meta: Update CHANGELOG for 8.21.0

.craft.yml

@@ -75,6 +75,9 @@ targets:
   - name: npm
     id: '@sentry/vercel-edge'
     includeNames: /^sentry-vercel-edge-\d.*\.tgz$/
+  - name: npm
+    id: '@sentry/cloudflare'
+    includeNames: /^sentry-cloudflare-\d.*\.tgz$/
   - name: npm
     id: '@sentry/deno'
     includeNames: /^sentry-deno-\d.*\.tgz$/

.github/ISSUE_TEMPLATE/bug.yml

@@ -80,11 +80,14 @@ body:
   - type: textarea
     id: sdk-setup
     attributes:
-      label: SDK Setup/Reproduction Example
+      label: Reproduction Example/SDK Setup
       description:
-        How do you set up your Sentry SDK? Please show us your `Sentry.init` code.
-        Or even better—share a link to a reproduction example.
+        To ensure that we can help you as fast as possible, please share a link to a reproduction example (GitHub repo or online code editor).
+        This enables us to quickly understand and address your issue.
+        If you do not post a link, kindly paste your `Sentry.init` code, so we can see how you set up Sentry.
       placeholder: |-
+        https://some-JS-online-code-editor.com/my-example
+
         ```javascript
         Sentry.init({
           dsn: __YOUR_DSN__

.github/workflows/build.yml

@@ -519,7 +519,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: [14, 16, 18, 20, 22.4]
+        node: [14, 16, 18, 20, 22]
     steps:
       - name: Check out current commit (${{ needs.job_get_metadata.outputs.commit_label }})
         uses: actions/checkout@v4
@@ -579,7 +579,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: [14, 16, 18, 20, 22.4]
+        node: [14, 16, 18, 20, 22]
     steps:
       - name: Check out current commit (${{ needs.job_get_metadata.outputs.commit_label }})
         uses: actions/checkout@v4
@@ -816,12 +816,12 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: [14, 16, 18, 20, 22.4]
+        node: [14, 16, 18, 20, 22]
         typescript:
           - false
         include:
           # Only check typescript for latest version (to streamline CI)
-          - node: 22.4
+          - node: 22
             typescript: '3.8'
     steps:
       - name: Check out current commit (${{ needs.job_get_metadata.outputs.commit_label }})
@@ -858,7 +858,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: [18, 20, 22.4]
+        node: [18, 20, 22]
         remix: [1, 2]
         # Remix v2 only supports Node 18+, so run 16 tests separately
         include:
@@ -990,6 +990,7 @@ jobs:
             'node-express-esm-without-loader',
             'node-express-cjs-preload',
             'node-otel-sdk-node',
+            'node-otel-custom-sampler',
             'ember-classic',
             'ember-embroider',
             'nextjs-app-dir',
@@ -1384,7 +1385,7 @@ jobs:
           - os: ubuntu-20.04
             node: 20
           - os: ubuntu-20.04
-            node: 22.4
+            node: 22
 
             # x64 musl
           - os: ubuntu-20.04
@@ -1398,7 +1399,7 @@ jobs:
             node: 20
           - os: ubuntu-20.04
             container: node:22-alpine3.18
-            node: 22.4
+            node: 22
 
             # arm64 glibc
           - os: ubuntu-20.04
@@ -1412,7 +1413,7 @@ jobs:
             node: 20
           - os: ubuntu-20.04
             arch: arm64
-            node: 22.4
+            node: 22
 
             # arm64 musl
           - os: ubuntu-20.04
@@ -1430,7 +1431,7 @@ jobs:
           - os: ubuntu-20.04
             arch: arm64
             container: node:22-alpine3.18
-            node: 22.4
+            node: 22
 
             # macos x64
           - os: macos-13
@@ -1443,7 +1444,7 @@ jobs:
             node: 20
             arch: x64
           - os: macos-13
-            node: 22.4
+            node: 22
             arch: x64
 
             # macos arm64
@@ -1461,7 +1462,7 @@ jobs:
             target_platform: darwin
           - os: macos-13
             arch: arm64
-            node: 22.4
+            node: 22
             target_platform: darwin
 
             # windows x64
@@ -1475,7 +1476,7 @@ jobs:
             node: 20
             arch: x64
           - os: windows-2022
-            node: 22.4
+            node: 22
             arch: x64
 
     steps:

.size-limit.js

@@ -15,7 +15,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration'),
     gzip: true,
-    limit: '35 KB',
+    limit: '36 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay)',
@@ -29,7 +29,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration'),
     gzip: true,
-    limit: '65 KB',
+    limit: '66 KB',
     modifyWebpackConfig: function (config) {
       const webpack = require('webpack');
       config.plugins.push(
@@ -48,14 +48,14 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'replayCanvasIntegration'),
     gzip: true,
-    limit: '76 KB',
+    limit: '78 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay, Feedback)',
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'feedbackIntegration'),
     gzip: true,
-    limit: '89 KB',
+    limit: '90 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay, Feedback, metrics)',
@@ -107,7 +107,7 @@ module.exports = [
     import: createImport('init', 'ErrorBoundary', 'reactRouterV6BrowserTracingIntegration'),
     ignore: ['react/jsx-runtime'],
     gzip: true,
-    limit: '38 KB',
+    limit: '39 KB',
   },
   // Vue SDK (ESM)
   {

CHANGELOG.md

@@ -1,13 +1,43 @@
 # Changelog
 
-> [!IMPORTANT]  
+> [!IMPORTANT] Important
+>
 > If you are upgrading to the `8.x` versions of the SDK from `7.x` or below, make sure you follow our
 > [migration guide](https://docs.sentry.io/platforms/javascript/migration/) first.
 
 ## Unreleased
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
+## 8.21.0
+
+### Important Changes
+
+- **Alpha release of Official Cloudflare SDK**
+  - feat(cloudflare): Add `withSentry` method (#13025)
+  - feat(cloudflare): Add cloudflare sdk scaffolding (#12953)
+  - feat(cloudflare): Add basic cloudflare package and tests (#12861)
+
+This release contains the alpha version of `@sentry/cloudflare`, our SDK for the
+[Cloudflare Workers JavaScript Runtime](https://developers.cloudflare.com/workers/)! For details on how to use it,
+please see the [README](./packages/cloudflare/README.md). Any feedback/bug reports are greatly appreciated, please
+[reach out on GitHub](https://github.com/getsentry/sentry-javascript/issues/12620).
+
+Please note that only Cloudflare Workers are tested and supported - official Cloudflare Pages support will come in an
+upcoming release.
+
+### Other Changes
+
+- feat(feedback): Make cropped screenshot area draggable (#13071)
+- feat(core): Adapt spans for client-side fetch to streaming responses (#12723)
+- feat(core): Capture # of dropped spans through `beforeSendTransaction` (#13022)
+- feat(deps): bump @opentelemetry/instrumentation-aws-sdk from 0.43.0 to 0.43.1 (#13089)
+- feat(deps): bump @opentelemetry/instrumentation-express from 0.41.0 to 0.41.1 (#13090)
+- feat(nuxt): Add connected tracing meta tags (#13098)
+- feat(nuxt): Add vue-router instrumentation (#13054)
+- fix(feedback): Ensure pluggable feedback CDN bundle is correctly built (#13081)
+- fix(node): Improve OTEL validation logic (#13079)
+
 ## 8.20.0
 
 ### Important Changes

dev-packages/browser-integration-tests/README.md

@@ -100,3 +100,15 @@ occur while writing tests for Sentry Browser SDK.
   - If a `subject.js` is defined for the test case.
   - If either of `init.js` or `subject.js` contain non-browser code.
   - If the webpack configuration is valid.
+
+- #### Debugging Tests
+
+  To debug one or multiple test scenarios, you can use playwright's UI mode. This opens a simulated browser window with
+  console logs, a timeline of the page and how it was rendered, a list of steps within the test and filtering
+  capabilities to run the specific test. This is really helpful to understand what happened during the test or for
+  example when a timeout occurred.
+
+  To use UI mode, simply call `yarn test --ui` and filter on the test in the UI.
+
+  Note: passing [the `-g` flag](#running-tests-locally) along with the `--ui` command doesn't give you an advantage as
+  you have to filter on the test again in the UI.

dev-packages/browser-integration-tests/suites/feedback/captureFeedback/init.js

@@ -1,11 +1,13 @@
 import * as Sentry from '@sentry/browser';
+// Import this separately so that generatePlugin can handle it for CDN scenarios
+import { feedbackIntegration } from '@sentry/browser';
 
 window.Sentry = Sentry;
 
 Sentry.init({
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
   integrations: [
-    Sentry.feedbackIntegration({
+    feedbackIntegration({
       tags: { from: 'integration init' },
     }),
   ],

dev-packages/browser-integration-tests/suites/feedback/captureFeedbackAndReplay/hasSampling/init.js

@@ -1,4 +1,6 @@
 import * as Sentry from '@sentry/browser';
+// Import this separately so that generatePlugin can handle it for CDN scenarios
+import { feedbackIntegration } from '@sentry/browser';
 
 window.Sentry = Sentry;
 
@@ -12,6 +14,6 @@ Sentry.init({
       flushMaxDelay: 200,
       minReplayDuration: 0,
     }),
-    Sentry.feedbackIntegration(),
+    feedbackIntegration(),
   ],
 });

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/init.js

@@ -1,10 +1,12 @@
 import * as Sentry from '@sentry/browser';
+// Import this separately so that generatePlugin can handle it for CDN scenarios
+import { feedbackIntegration } from '@sentry/browser';
 
 window.Sentry = Sentry;
 
 Sentry.init({
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
-  integrations: [Sentry.browserTracingIntegration(), Sentry.feedbackIntegration()],
+  integrations: [Sentry.browserTracingIntegration(), feedbackIntegration()],
   tracePropagationTargets: ['http://example.com'],
   tracesSampleRate: 1,
 });

dev-packages/browser-integration-tests/utils/generatePlugin.ts

@@ -24,6 +24,9 @@ const useLoader = bundleKey.startsWith('loader');
 
 // These are imports that, when using CDN bundles, are not included in the main CDN bundle.
 // In this case, if we encounter this import, we want to add this CDN bundle file instead
+// IMPORTANT NOTE: In order for this to work, you need to import this from browser like this:
+// import { httpClientIntegration } from '@sentry/browser';
+// You cannot use e.g. Sentry.httpClientIntegration, as this will not be detected
 const IMPORTED_INTEGRATION_CDN_BUNDLE_PATHS: Record<string, string> = {
   httpClientIntegration: 'httpclient',
   captureConsoleIntegration: 'captureconsole',
@@ -34,6 +37,7 @@ const IMPORTED_INTEGRATION_CDN_BUNDLE_PATHS: Record<string, string> = {
   extraErrorDataIntegration: 'extraerrordata',
   reportingObserverIntegration: 'reportingobserver',
   sessionTimingIntegration: 'sessiontiming',
+  feedbackIntegration: 'feedback',
 };
 
 const BUNDLE_PATHS: Record<string, Record<string, string>> = {

dev-packages/browser-integration-tests/utils/helpers.ts

@@ -246,15 +246,11 @@ export function shouldSkipTracingTest(): boolean {
 }
 
 /**
- * We can only test feedback tests in certain bundles/packages:
- * - NPM (ESM, CJS)
- * - CDN bundles that contain the Replay integration
- *
- * @returns `true` if we should skip the feedback test
+ * Today we always run feedback tests, but this can be used to guard this if we ever need to.
  */
 export function shouldSkipFeedbackTest(): boolean {
-  const bundle = process.env.PW_BUNDLE as string | undefined;
-  return bundle != null && !bundle.includes('feedback') && !bundle.includes('esm') && !bundle.includes('cjs');
+  // We always run these, in bundles the pluggable integration is automatically added
+  return false;
 }
 
 /**

dev-packages/e2e-tests/README.md

@@ -43,7 +43,7 @@ Test applications are completely standalone applications that can be used to ver
 these commands:
 
 ```sh
-cd packages/e2e-tests
+cd dev-packages/e2e-tests
 
 # Create a new test application folder
 mkdir test-applications/my-new-test-application # Name of the new folder doesn't technically matter but choose something meaningful

dev-packages/e2e-tests/test-applications/create-remix-app-express-legacy/tests/server-transactions.test.ts

@@ -3,6 +3,21 @@ import { uuid4 } from '@sentry/utils';
 
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
+test.describe.configure({ mode: 'serial' });
+
+test('Sends parameterized transaction name to Sentry', async ({ page }) => {
+  const transactionPromise = waitForTransaction('create-remix-app-express-legacy', transactionEvent => {
+    return transactionEvent.contexts?.trace?.op === 'http.server';
+  });
+
+  await page.goto('/user/123');
+
+  const transaction = await transactionPromise;
+
+  expect(transaction).toBeDefined();
+  expect(transaction.transaction).toBe('routes/user.$id');
+});
+
 test('Sends form data with action span to Sentry', async ({ page }) => {
   await page.goto('/action-formdata');
 

dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/tests/server-transactions.test.ts

@@ -3,6 +3,21 @@ import { uuid4 } from '@sentry/utils';
 
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
+test.describe.configure({ mode: 'serial' });
+
+test('Sends parameterized transaction name to Sentry', async ({ page }) => {
+  const transactionPromise = waitForTransaction('create-remix-app-express-vite-dev', transactionEvent => {
+    return transactionEvent.contexts?.trace?.op === 'http.server';
+  });
+
+  await page.goto('/user/123');
+
+  const transaction = await transactionPromise;
+
+  expect(transaction).toBeDefined();
+  expect(transaction.transaction).toBe('GET user/:id');
+});
+
 test('Sends two linked transactions (server & client) to Sentry', async ({ page }) => {
   // We use this to identify the transactions
   const testTag = uuid4();