feat(replay): Add ReplayCanvas integration

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

Author: mydea

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,

packages/replay/rollup.bundle.config.mjs

@@ -8,6 +8,14 @@ const baseBundleConfig = makeBaseBundleConfig({
   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;

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,
+        },
+      },
+    };
+  }
+}

packages/replay/src/index.ts

@@ -1,4 +1,5 @@
 export { Replay } from './integration';
+export { ReplayCanvas } from './canvas';
 
 export type {
   ReplayConfiguration,