feat(replay): Add ReplayCanvas integration

mydea · billyvg · commit 38b1a4e261e4 · 2024-01-05T11:06:01.000-05:00
Adding this integration in addition to `Replay` will set up canvas recording.
diff --git a/.size-limit.js b/.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',
diff --git a/dev-packages/browser-integration-tests/utils/replayHelpers.ts b/dev-packages/browser-integration-tests/utils/replayHelpers.ts
@@ -1,10 +1,12 @@
+/* eslint-disable max-lines */
 import type { fullSnapshotEvent, incrementalSnapshotEvent } from '@sentry-internal/rrweb';
 import { EventType } from '@sentry-internal/rrweb';
 import type { ReplayEventWithTime } from '@sentry/browser';
 import type {
   InternalEventContext,
   RecordingEvent,
   ReplayContainer,
+  ReplayPluginOptions,
   Session,
 } from '@sentry/replay/build/npm/types/types';
 import type { Breadcrumb, Event, ReplayEvent, ReplayRecordingMode } from '@sentry/types';
@@ -171,6 +173,8 @@ export function getReplaySnapshot(page: Page): Promise<{
   _isPaused: boolean;
   _isEnabled: boolean;
   _context: InternalEventContext;
+  _options: ReplayPluginOptions;
+  _hasCanvas: boolean;
   session: Session | undefined;
   recordingMode: ReplayRecordingMode;
 }> {
@@ -182,6 +186,9 @@ export function getReplaySnapshot(page: Page): Promise<{
       _isPaused: replay.isPaused(),
       _isEnabled: replay.isEnabled(),
       _context: replay.getContext(),
+      _options: replay.getOptions(),
+      // We cannot pass the function through as this is serialized
+      _hasCanvas: typeof replay.getOptions()._experiments.canvas?.manager === 'function',
       session: replay.session,
       recordingMode: replay.recordingMode,
     };
diff --git a/packages/browser-integration-tests/suites/replay/canvas/template.html b/packages/browser-integration-tests/suites/replay/canvas/template.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <button onclick="console.log('Test log')">Click me</button>
+  </body>
+</html>
diff --git a/packages/browser-integration-tests/suites/replay/canvas/withCanvasIntegrationFirst/init.js b/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://public@dsn.ingest.sentry.io/1337',
+  sampleRate: 0,
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 0.0,
+  debug: true,
+
+  integrations: [new Sentry.ReplayCanvas(), window.Replay],
+});
diff --git a/packages/browser-integration-tests/suites/replay/canvas/withCanvasIntegrationFirst/test.ts b/packages/browser-integration-tests/suites/replay/canvas/withCanvasIntegrationFirst/test.ts
@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getReplaySnapshot, shouldSkipReplayTest } from '../../../../utils/replayHelpers';
+
+sentryTest('sets up canvas when adding ReplayCanvas integration first', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipReplayTest()) {
+    sentryTest.skip();
+  }
+
+  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);
+
+  const replay = await getReplaySnapshot(page);
+  const canvasOptions = replay._options._experiments?.canvas;
+  expect(canvasOptions.fps).toBe(4);
+  expect(canvasOptions.quality).toBe(0.6);
+  expect(replay._hasCanvas).toBe(true);
+});
diff --git a/packages/browser-integration-tests/suites/replay/canvas/withCanvasIntegrationSecond/init.js b/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://public@dsn.ingest.sentry.io/1337',
+  sampleRate: 0,
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 0.0,
+  debug: true,
+
+  integrations: [window.Replay, new Sentry.ReplayCanvas()],
+});
diff --git a/packages/browser-integration-tests/suites/replay/canvas/withCanvasIntegrationSecond/test.ts b/packages/browser-integration-tests/suites/replay/canvas/withCanvasIntegrationSecond/test.ts
@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getReplaySnapshot, shouldSkipReplayTest } from '../../../../utils/replayHelpers';
+
+sentryTest('sets up canvas when adding ReplayCanvas integration after Replay', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipReplayTest()) {
+    sentryTest.skip();
+  }
+
+  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);
+
+  const replay = await getReplaySnapshot(page);
+  const canvasOptions = replay._options._experiments?.canvas;
+  expect(canvasOptions.fps).toBe(4);
+  expect(canvasOptions.quality).toBe(0.6);
+  expect(replay._hasCanvas).toBe(true);
+});
diff --git a/packages/browser-integration-tests/suites/replay/canvas/withoutCanvasIntegration/init.js b/packages/browser-integration-tests/suites/replay/canvas/withoutCanvasIntegration/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://public@dsn.ingest.sentry.io/1337',
+  sampleRate: 0,
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 0.0,
+  debug: true,
+
+  integrations: [window.Replay],
+});
diff --git a/packages/browser-integration-tests/suites/replay/canvas/withoutCanvasIntegration/test.ts b/packages/browser-integration-tests/suites/replay/canvas/withoutCanvasIntegration/test.ts
@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getReplaySnapshot, shouldSkipReplayTest } from '../../../../utils/replayHelpers';
+
+sentryTest('does not setup up canvas without ReplayCanvas integration', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipReplayTest()) {
+    sentryTest.skip();
+  }
+
+  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);
+
+  const replay = await getReplaySnapshot(page);
+  const canvasOptions = replay._options._experiments?.canvas;
+  expect(canvasOptions).toBe(undefined);
+  expect(replay._hasCanvas).toBe(false);
+});
diff --git a/packages/browser/src/index.ts b/packages/browser/src/index.ts
@@ -20,7 +20,7 @@ const INTEGRATIONS = {
 
 export { INTEGRATIONS as Integrations };
 
-export { Replay } from '@sentry/replay';
+export { Replay, ReplayCanvas } from '@sentry/replay';
 export type {
   ReplayEventType,
   ReplayEventWithTime,
diff --git a/packages/replay/rollup.bundle.config.mjs b/packages/replay/rollup.bundle.config.mjs
@@ -2,12 +2,20 @@ import { makeBaseBundleConfig, makeBundleConfigVariants } from '@sentry-internal
 
 const baseBundleConfig = makeBaseBundleConfig({
   bundleType: 'addon',
-  entrypoints: ['src/index.ts'],
+  entrypoints: ['src/integration.ts'],
   jsVersion: 'es6',
   licenseTitle: '@sentry/replay',
   outputFileBase: () => 'bundles/replay',
 });
 
-const builds = makeBundleConfigVariants(baseBundleConfig);
+const baseCanvasBundleConfig = makeBaseBundleConfig({
+  bundleType: 'addon',
+  entrypoints: ['src/canvas.ts'],
+  jsVersion: 'es6',
+  licenseTitle: '@sentry/replaycanvas',
+  outputFileBase: () => 'bundles/replaycanvas',
+});
+
+const builds = [...makeBundleConfigVariants(baseBundleConfig), ...makeBundleConfigVariants(baseCanvasBundleConfig)];
 
 export default builds;
diff --git a/packages/replay/src/canvas.ts b/packages/replay/src/canvas.ts
@@ -0,0 +1,54 @@
+import { getCanvasManager } from '@sentry-internal/rrweb';
+import type { Integration } from '@sentry/types';
+import type { ReplayConfiguration } from './types';
+
+interface ReplayCanvasOptions {
+  fps: number;
+  quality: number;
+}
+
+/** An integration to add canvas recording to replay. */
+export class ReplayCanvas implements Integration {
+  /**
+   * @inheritDoc
+   */
+  public static id: string = 'ReplayCanvas';
+
+  /**
+   * @inheritDoc
+   */
+  public name: string;
+
+  private _canvasOptions: ReplayCanvasOptions;
+
+  public constructor() {
+    this.name = ReplayCanvas.id;
+    // TODO FN: Allow to configure this
+    // But since we haven't finalized how to configure this, this is predefined for now
+    // to avoid breaking changes
+    this._canvasOptions = {
+      fps: 4,
+      quality: 0.6,
+    };
+  }
+
+  /** @inheritdoc */
+  public setupOnce(): void {
+    // noop
+  }
+
+  /**
+   * Get the options that should be merged into replay options.
+   * This is what is actually called by the Replay integration to setup canvas.
+   */
+  public getOptions(): Partial<ReplayConfiguration> {
+    return {
+      _experiments: {
+        canvas: {
+          ...this._canvasOptions,
+          manager: getCanvasManager,
+        },
+      },
+    };
+  }
+}
diff --git a/packages/replay/src/index.ts b/packages/replay/src/index.ts
@@ -1,4 +1,5 @@
 export { Replay } from './integration';
+export { ReplayCanvas } from './canvas';
 
 export type {
   ReplayEventType,
diff --git a/packages/replay/src/integration.ts b/packages/replay/src/integration.ts
@@ -318,6 +318,7 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
 
     return this._replay.getSessionId();
   }
+
   /**
    * Initializes replay.
    */
@@ -326,6 +327,12 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
       return;
     }
 
+    // We have to run this in _initialize, because this runs in setTimeout
+    // So when this runs all integrations have been added
+    // Before this, we cannot access integrations on the client,
+    // so we need to mutate the options here
+    this._maybeLoadFromReplayCanvasIntegration();
+
     this._replay.initializeSampling();
   }
 
@@ -339,6 +346,40 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
       recordingOptions: this._recordingOptions,
     });
   }
+
+  /** Get canvas options from ReplayCanvas integration, if it is also added. */
+  private _maybeLoadFromReplayCanvasIntegration(): void {
+    // If already defined, skip this...
+    if (this._initialOptions._experiments.canvas) {
+      return;
+    }
+
+    // To save bundle size, we skip checking for stuff here
+    // and instead just try-catch everything - as generally this should all be defined
+    /* eslint-disable @typescript-eslint/no-non-null-assertion */
+    try {
+      const client = getClient()!;
+      const canvasIntegration = client.getIntegrationById!('ReplayCanvas') as Integration & {
+        getOptions(): Partial<ReplayConfiguration>;
+      };
+      if (!canvasIntegration) {
+        return;
+      }
+      const additionalOptions = canvasIntegration.getOptions();
+
+      const mergedExperimentsOptions = {
+        ...this._initialOptions._experiments,
+        ...additionalOptions._experiments,
+      };
+
+      this._initialOptions._experiments = mergedExperimentsOptions;
+
+      this._replay!.getOptions()._experiments = mergedExperimentsOptions;
+    } catch {
+      // ignore errors here
+    }
+    /* eslint-enable @typescript-eslint/no-non-null-assertion */
+  }
 }
 
 /** Parse Replay-related options from SDK options */
diff --git a/packages/types/src/client.ts b/packages/types/src/client.ts
@@ -138,9 +138,12 @@ export interface Client<O extends ClientOptions = ClientOptions> {
    */
   getEventProcessors?(): EventProcessor[];
 
-  /** Returns the client's instance of the given integration class, it any. */
+  /** Returns the client's instance of the given integration class, if it exists. */
   getIntegration<T extends Integration>(integration: IntegrationClass<T>): T | null;
 
+  /** Returns the client's instance of the given integration name, if it exists. */
+  getIntegrationById?(integrationId: string): Integration | undefined;
+
   /**
    * Add an integration to the client.
    * This can be used to e.g. lazy load integrations.

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`export { Replay } from './integration';`
	`2`	`+export { ReplayCanvas } from './canvas';`
`2`	`3`
`3`	`4`	`export type {`
`4`	`5`	`ReplayEventType,`