feat(replay): Add ReplayCanvas integration (#10112)

Adding this integration in addition to `Replay` will set up canvas
recording.

```javascript
Sentry.init({
  dsn: '',
  integrations: [
    Sentry.Replay(),
    Sentry.ReplayCanvas(),
  ]
});
```

---------

Co-authored-by: Francesco Novy <[email protected]>

Author: billyvg

.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

.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
 

.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',

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.8.0",
     "@sentry/browser": "7.93.0",
     "@sentry/tracing": "7.93.0",
     "axios": "1.6.0",

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

@@ -1,16 +1,10 @@
-import { getCanvasManager } from '@sentry-internal/rrweb';
 import * as Sentry from '@sentry/browser';
 
 window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 50,
   flushMaxDelay: 50,
   minReplayDuration: 0,
-  _experiments: {
-    canvas: {
-      manager: getCanvasManager,
-    },
-  },
 });
 
 Sentry.init({
@@ -20,5 +14,5 @@ Sentry.init({
   replaysOnErrorSampleRate: 0.0,
   debug: true,
 
-  integrations: [window.Replay],
+  integrations: [window.Replay, new Sentry.ReplayCanvas()],
 });

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

@@ -4,7 +4,7 @@ import { sentryTest } from '../../../../utils/fixtures';
 import { getReplayRecordingContent, shouldSkipReplayTest, waitForReplayRequest } from '../../../../utils/replayHelpers';
 
 sentryTest('can record canvas', async ({ getLocalTestUrl, page, browserName }) => {
-  if (shouldSkipReplayTest() || browserName === 'webkit') {
+  if (shouldSkipReplayTest() || browserName === 'webkit' || (process.env.PW_BUNDLE || '').startsWith('bundle')) {
     sentryTest.skip();
   }
 
@@ -24,6 +24,16 @@ sentryTest('can record canvas', async ({ getLocalTestUrl, page, browserName }) =
 
   await page.goto(url);
   await reqPromise0;
+  const content0 = getReplayRecordingContent(await reqPromise0);
+  expect(content0.optionsEvents).toEqual([
+    {
+      tag: 'options',
+      payload: expect.objectContaining({
+        shouldRecordCanvas: true,
+      }),
+    },
+  ]);
+
   await Promise.all([page.click('#draw'), reqPromise1]);
 
   const { incrementalSnapshots } = getReplayRecordingContent(await reqPromise2);

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

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

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

@@ -0,0 +1,31 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getReplaySnapshot, shouldSkipReplayTest, waitForReplayRequest } from '../../../../utils/replayHelpers';
+
+sentryTest('sets up canvas when adding ReplayCanvas integration first', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipReplayTest() || (process.env.PW_BUNDLE || '').startsWith('bundle')) {
+    sentryTest.skip();
+  }
+
+  const reqPromise0 = waitForReplayRequest(page, 0);
+
+  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;
+
+  const replay = await getReplaySnapshot(page);
+  const canvasOptions = replay._canvas;
+  expect(canvasOptions?.sampling.canvas).toBe(2);
+  expect(canvasOptions?.dataURLOptions.quality).toBe(0.4);
+  expect(replay._hasCanvas).toBe(true);
+});

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

@@ -0,0 +1,18 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.Replay = new Sentry.Replay({
+  flushMinDelay: 200,
+  flushMaxDelay: 200,
+  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()],
+});

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

@@ -0,0 +1,31 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getReplaySnapshot, shouldSkipReplayTest, waitForReplayRequest } from '../../../../utils/replayHelpers';
+
+sentryTest('sets up canvas when adding ReplayCanvas integration after Replay', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipReplayTest() || (process.env.PW_BUNDLE || '').startsWith('bundle')) {
+    sentryTest.skip();
+  }
+
+  const reqPromise0 = waitForReplayRequest(page, 0);
+
+  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;
+
+  const replay = await getReplaySnapshot(page);
+  const canvasOptions = replay._canvas;
+  expect(canvasOptions?.sampling.canvas).toBe(2);
+  expect(canvasOptions?.dataURLOptions.quality).toBe(0.4);
+  expect(replay._hasCanvas).toBe(true);
+});