Merge remote-tracking branch 'origin/develop' into DominikB2014/add-span-domain-to-span-data

Author: DominikB2014

.craft.yml

@@ -32,6 +32,10 @@ targets:
   - name: npm
     id: '@sentry-internal/feedback'
     includeNames: /^sentry-internal-feedback-\d.*\.tgz$/
+  ## 1.8 ReplayCanvas package (browser only)
+  - name: npm
+    id: '@sentry-internal/replay-canvas'
+    includeNames: /^sentry-internal-replay-canvas-\d.*\.tgz$/
 
   ## 2. Browser & Node SDKs
   - name: npm

.git-blame-ignore-revs

@@ -12,3 +12,6 @@ ef6b3c7877d5fc8031c08bb28b0ffafaeb01f501
 
 # chore: Enforce formatting of MD files in repository root #10127
 aecf26f22dbf65ce2c0caadc4ce71b46266c9f45
+
+# chore: Create dev-packages folder #9997 
+35205b4cc5783237e69452c39ea001e461d9c84d

.github/workflows/build.yml

@@ -100,6 +100,7 @@ jobs:
               - *shared
               - 'packages/browser/**'
               - 'packages/replay/**'
+              - 'packages/replay-canvas/**'
               - 'packages/feedback/**'
             browser_integration:
               - *shared
@@ -371,6 +372,7 @@ jobs:
             ${{ github.workspace }}/packages/browser/build/bundles/**
             ${{ github.workspace }}/packages/integrations/build/bundles/**
             ${{ github.workspace }}/packages/replay/build/bundles/**
+            ${{ github.workspace }}/packages/replay-canvas/build/bundles/**
             ${{ github.workspace }}/packages/**/*.tgz
             ${{ github.workspace }}/packages/serverless/build/aws/dist-serverless/*.zip
 
@@ -776,8 +778,14 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: [14, 16, 18, 20, 21]
+        node: [18, 20, 21]
         remix: [1, 2]
+        # Remix v2 only supports Node 18+, so run Node 14, 16 tests separately
+        include:
+          - node: 14
+            remix: 1
+          - node: 16
+            remix: 1
     steps:
       - name: Check out current commit (${{ needs.job_get_metadata.outputs.commit_label }})
         uses: actions/checkout@v4
@@ -863,8 +871,9 @@ jobs:
             'node-express-app',
             'create-react-app',
             'create-next-app',
-            'create-remix-app',
-            'create-remix-app-v2',
+            # disabling remix e2e tests because of flakes
+            # 'create-remix-app',
+            # 'create-remix-app-v2',
             'debug-id-sourcemaps',
             'nextjs-app-dir',
             'nextjs-14',

.size-limit.js

@@ -14,6 +14,13 @@ module.exports = [
     gzip: true,
     limit: '75 KB',
   },
+  {
+    name: '@sentry/browser (incl. Tracing, Replay with Canvas) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, Replay, BrowserTracing, ReplayCanvas }',
+    gzip: true,
+    limit: '90 KB',
+  },
   {
     name: '@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped)',
     path: 'packages/browser/build/npm/esm/index.js',
@@ -47,6 +54,13 @@ module.exports = [
     gzip: true,
     limit: '50 KB',
   },
+  {
+    name: '@sentry/browser (incl. sendFeedback) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, sendFeedback }',
+    gzip: true,
+    limit: '50 KB',
+  },
   {
     name: '@sentry/browser - Webpack (gzipped)',
     path: 'packages/browser/build/npm/esm/index.js',

MIGRATION.md

@@ -10,6 +10,32 @@ npx @sentry/migr8@latest
 This will let you select which updates to run, and automatically update your code. Make sure to still review all code
 changes!
 
+## Deprecate `getCurrentHub()`
+
+In v8, you will no longer have a Hub, only Scopes as a concept. This also means that `getCurrentHub()` will eventually
+be removed.
+
+Instead of `getCurrentHub()`, use the respective replacement API directly - see [Deprecate Hub](#deprecate-hub) for
+details.
+
+## Deprecate class-based integrations
+
+In v7, integrations are classes and can be added as e.g. `integrations: [new Sentry.Integrations.ContextLines()]`. In
+v8, integrations will not be classes anymore, but instead functions. Both the use as a class, as well as accessing
+integrations from the `Integrations.XXX` hash, is deprecated in favor of using the new functional integrations
+
+- for example, `new Integrations.LinkedErrors()` becomes `linkedErrorsIntegration()`.
+
+The following list shows how integrations should be migrated:
+
+| Old                      | New                             |
+| ------------------------ | ------------------------------- |
+| `new InboundFilters()`   | `inboundFiltersIntegrations()`  |
+| `new FunctionToString()` | `functionToStringIntegration()` |
+| `new LinkedErrors()`     | `linkedErrorsIntegration()`     |
+| `new ModuleMetadata()`   | `moduleMetadataIntegration()`   |
+| `new RequestData()`      | `requestDataIntegration()`      |
+
 ## Deprecate `hub.bindClient()` and `makeMain()`
 
 Instead, either directly use `initAndBind()`, or the new APIs `setCurrentClient()` and `client.init()`. See
@@ -54,7 +80,7 @@ If you are using the `Hub` right now, see the following table on how to migrate
 | ---------------------- | ------------------------------------------------------------------------------------ |
 | `new Hub()`            | `withScope()`, `withIsolationScope()` or `new Scope()`                               |
 | hub.isOlderThan()      | REMOVED - Was used to compare `Hub` instances, which are gonna be removed            |
-| hub.bindClient()       | A combination of `scope.setClient()` and `client.setupIntegrations()`                |
+| hub.bindClient()       | A combination of `scope.setClient()` and `client.init()`                             |
 | hub.pushScope()        | `Sentry.withScope()`                                                                 |
 | hub.popScope()         | `Sentry.withScope()`                                                                 |
 | hub.withScope()        | `Sentry.withScope()`                                                                 |
@@ -177,6 +203,10 @@ In v8, the Span class is heavily reworked. The following properties & methods ar
 - `span.setData()`: Use `span.setAttribute()` instead.
 - `span.instrumenter` This field was removed and will be replaced internally.
 - `span.transaction`: Use `getRootSpan` utility function instead.
+- `span.spanRecorder`: Span recording will be handled internally by the SDK.
+- `span.status`: Use `.setStatus` to set or update and `spanToJSON()` to read the span status.
+- `span.op`: Use `startSpan` functions to set, `setAttribute()` to update and `spanToJSON` to read the span operation.
+- `span.isSuccess`: Use `spanToJSON(span).status === 'ok'` instead.
 - `transaction.setMetadata()`: Use attributes instead, or set data on the scope.
 - `transaction.metadata`: Use attributes instead, or set data on the scope.
 - `transaction.setContext()`: Set context on the surrounding scope instead.

dev-packages/browser-integration-tests/package.json

@@ -45,7 +45,7 @@
   "dependencies": {
     "@babel/preset-typescript": "^7.16.7",
     "@playwright/test": "^1.31.1",
-    "@sentry-internal/rrweb": "2.7.3",
+    "@sentry-internal/rrweb": "2.9.0",
     "@sentry/browser": "7.93.0",
     "@sentry/tracing": "7.93.0",
     "axios": "1.6.0",

dev-packages/browser-integration-tests/suites/public-api/captureUserFeedback/withCaptureException/init.js

@@ -0,0 +1,16 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  beforeSend(event) {
+    Sentry.captureUserFeedback({
+      event_id: event.event_id,
+      name: 'John Doe',
+      email: '[email protected]',
+      comments: 'This feedback should be attached associated with the captured error',
+    });
+    return event;
+  },
+});

dev-packages/browser-integration-tests/suites/public-api/captureUserFeedback/withCaptureException/subject.js

@@ -0,0 +1 @@
+Sentry.captureException(new Error('Error with Feedback'));

dev-packages/browser-integration-tests/suites/public-api/captureUserFeedback/withCaptureException/test.ts

@@ -0,0 +1,23 @@
+import { expect } from '@playwright/test';
+import type { Event, UserFeedback } from '@sentry/types';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getMultipleSentryEnvelopeRequests } from '../../../../utils/helpers';
+
+sentryTest('capture user feedback when captureException is called', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const data = (await getMultipleSentryEnvelopeRequests(page, 2, { url })) as (Event | UserFeedback)[];
+
+  expect(data).toHaveLength(2);
+
+  const errorEvent = ('exception' in data[0] ? data[0] : data[1]) as Event;
+  const feedback = ('exception' in data[0] ? data[1] : data[0]) as UserFeedback;
+
+  expect(feedback).toEqual({
+    comments: 'This feedback should be attached associated with the captured error',
+    email: '[email protected]',
+    event_id: errorEvent.event_id,
+    name: 'John Doe',
+  });
+});

dev-packages/browser-integration-tests/suites/public-api/captureUserFeedback/withCaptureMessage/init.js

@@ -0,0 +1,16 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  beforeSend(event) {
+    Sentry.captureUserFeedback({
+      event_id: event.event_id,
+      name: 'John Doe',
+      email: '[email protected]',
+      comments: 'This feedback should be attached associated with the captured message',
+    });
+    return event;
+  },
+});

dev-packages/browser-integration-tests/suites/public-api/captureUserFeedback/withCaptureMessage/subject.js

@@ -0,0 +1 @@
+Sentry.captureMessage('Message with Feedback');

dev-packages/browser-integration-tests/suites/public-api/captureUserFeedback/withCaptureMessage/test.ts

@@ -0,0 +1,23 @@
+import { expect } from '@playwright/test';
+import type { Event, UserFeedback } from '@sentry/types';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getMultipleSentryEnvelopeRequests } from '../../../../utils/helpers';
+
+sentryTest('capture user feedback when captureMessage is called', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const data = (await getMultipleSentryEnvelopeRequests(page, 2, { url })) as (Event | UserFeedback)[];
+
+  expect(data).toHaveLength(2);
+
+  const errorEvent = ('exception' in data[0] ? data[0] : data[1]) as Event;
+  const feedback = ('exception' in data[0] ? data[1] : data[0]) as UserFeedback;
+
+  expect(feedback).toEqual({
+    comments: 'This feedback should be attached associated with the captured message',
+    email: '[email protected]',
+    event_id: errorEvent.event_id,
+    name: 'John Doe',
+  });
+});

dev-packages/browser-integration-tests/suites/public-api/startTransaction/basic_usage/test.ts

@@ -29,16 +29,20 @@ sentryTest('should report finished spans as children of the root transaction', a
   expect(transaction.spans).toHaveLength(3);
 
   const span_1 = transaction.spans?.[0];
+
+  // eslint-disable-next-line deprecation/deprecation
   expect(span_1?.op).toBe('span_1');
   expect(span_1?.parentSpanId).toEqual(rootSpanId);
   // eslint-disable-next-line deprecation/deprecation
   expect(span_1?.data).toMatchObject({ foo: 'bar', baz: [1, 2, 3] });
 
   const span_3 = transaction.spans?.[1];
+  // eslint-disable-next-line deprecation/deprecation
   expect(span_3?.op).toBe('span_3');
   expect(span_3?.parentSpanId).toEqual(rootSpanId);
 
   const span_5 = transaction.spans?.[2];
+  // eslint-disable-next-line deprecation/deprecation
   expect(span_5?.op).toBe('span_5');
   // eslint-disable-next-line deprecation/deprecation
   expect(span_5?.parentSpanId).toEqual(span_3?.spanId);

dev-packages/browser-integration-tests/suites/replay/canvas/manualSnapshot/init.js

@@ -0,0 +1,18 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.Replay = new Sentry.Replay({
+  flushMinDelay: 50,
+  flushMaxDelay: 50,
+  minReplayDuration: 0,
+});
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  sampleRate: 0,
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 0.0,
+  debug: true,
+
+  integrations: [window.Replay, new Sentry.ReplayCanvas({ enableManualSnapshot: true })],
+});

dev-packages/browser-integration-tests/suites/replay/canvas/manualSnapshot/template.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <canvas id="canvas" width="150" height="150"></canvas>
+    <button id="draw">Draw</button>
+  </body>
+
+
+  <script>
+  function draw() {
+  const canvas = document.getElementById("canvas");
+    if (canvas.getContext) {
+      console.log('has canvas')
+      const ctx = canvas.getContext("2d");
+
+      ctx.fillRect(25, 25, 100, 100);
+      ctx.clearRect(45, 45, 60, 60);
+      ctx.strokeRect(50, 50, 50, 50);
+    }
+  }
+  document.getElementById('draw').addEventListener('click', draw);
+  </script>
+</html>

dev-packages/browser-integration-tests/suites/replay/canvas/manualSnapshot/test.ts

@@ -0,0 +1,79 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getReplayRecordingContent, shouldSkipReplayTest, waitForReplayRequest } from '../../../../utils/replayHelpers';
+
+sentryTest('can manually snapshot canvas', async ({ getLocalTestUrl, page, browserName }) => {
+  if (shouldSkipReplayTest() || browserName === 'webkit' || (process.env.PW_BUNDLE || '').startsWith('bundle')) {
+    sentryTest.skip();
+  }
+
+  const reqPromise0 = waitForReplayRequest(page, 0);
+  const reqPromise1 = waitForReplayRequest(page, 1);
+  const reqPromise2 = waitForReplayRequest(page, 2);
+  const reqPromise3 = waitForReplayRequest(page, 3);
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.goto(url);
+  await reqPromise0;
+  await Promise.all([page.click('#draw'), reqPromise1]);
+
+  const { incrementalSnapshots } = getReplayRecordingContent(await reqPromise2);
+  expect(incrementalSnapshots).toEqual([]);
+
+  await page.evaluate(() => {
+    (window as any).Sentry.getClient().getIntegrationById('ReplayCanvas').snapshot();
+  });
+
+  const { incrementalSnapshots: incrementalSnapshotsManual } = getReplayRecordingContent(await reqPromise3);
+  expect(incrementalSnapshotsManual).toEqual(
+    expect.arrayContaining([
+      {
+        data: {
+          commands: [
+            {
+              args: [0, 0, 150, 150],
+              property: 'clearRect',
+            },
+            {
+              args: [
+                {
+                  args: [
+                    {
+                      data: [
+                        {
+                          base64: expect.any(String),
+                          rr_type: 'ArrayBuffer',
+                        },
+                      ],
+                      rr_type: 'Blob',
+                      type: 'image/webp',
+                    },
+                  ],
+                  rr_type: 'ImageBitmap',
+                },
+                0,
+                0,
+              ],
+              property: 'drawImage',
+            },
+          ],
+          id: 9,
+          source: 9,
+          type: 0,
+        },
+        timestamp: 0,
+        type: 3,
+      },
+    ]),
+  );
+});