change to not use _experiments for canvas

Author: billyvg

packages/replay-canvas/src/canvas.ts

@@ -1,11 +1,53 @@
-import { getCanvasManager } from '@sentry-internal/rrweb';
-import type { ReplayConfiguration } from '@sentry/replay';
+import { CanvasManager } from '@sentry-internal/rrweb';
+import type { CanvasManagerInterface } from '@sentry/replay';
 import type { Integration } from '@sentry/types';
 
 interface ReplayCanvasOptions {
   quality: 'low' | 'medium' | 'high';
 }
 
+interface ReplayCanvasIntegrationOptions {
+  recordCanvas: true;
+  getCanvasManager: (options: ConstructorParameters<typeof CanvasManager>[0]) => CanvasManagerInterface;
+  sampling: {
+    canvas: number;
+  };
+  dataURLOptions: {
+    type: string;
+    quality: number;
+  };
+}
+
+const CANVAS_QUALITY = {
+  low: {
+    sampling: {
+      canvas: 1,
+    },
+    dataURLOptions: {
+      type: 'image/webp',
+      quality: 0.25,
+    },
+  },
+  medium: {
+    sampling: {
+      canvas: 2,
+    },
+    dataURLOptions: {
+      type: 'image/webp',
+      quality: 0.4,
+    },
+  },
+  high: {
+    sampling: {
+      canvas: 4,
+    },
+    dataURLOptions: {
+      type: 'image/webp',
+      quality: 0.5,
+    },
+  },
+};
+
 /** An integration to add canvas recording to replay. */
 export class ReplayCanvas implements Integration {
   /**
@@ -20,10 +62,10 @@ export class ReplayCanvas implements Integration {
 
   private _canvasOptions: ReplayCanvasOptions;
 
-  public constructor(options?: Partial<ReplayCanvasOptions>) {
+  public constructor(options: Partial<ReplayCanvasOptions> = {}) {
     this.name = ReplayCanvas.id;
     this._canvasOptions = {
-      quality: (options && options.quality) || 'medium',
+      quality: options.quality || 'medium',
     };
   }
 
@@ -36,15 +78,13 @@ export class ReplayCanvas implements Integration {
    * 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> {
+  public getOptions(): ReplayCanvasIntegrationOptions {
+    const { quality } = this._canvasOptions;
+
     return {
-      _experiments: {
-        canvas: {
-          ...this._canvasOptions,
-          manager: getCanvasManager,
-          quality: this._canvasOptions.quality,
-        },
-      },
+      recordCanvas: true,
+      getCanvasManager: (options: ConstructorParameters<typeof CanvasManager>[0]) => new CanvasManager(options),
+      ...(CANVAS_QUALITY[quality || 'medium'] || CANVAS_QUALITY.medium),
     };
   }
 }

packages/replay/src/constants.ts

@@ -53,33 +53,3 @@ export const MAX_REPLAY_DURATION = 3_600_000; // 60 minutes in ms;
 
 /** Default attributes to be ignored when `maskAllText` is enabled */
 export const DEFAULT_IGNORED_ATTRIBUTES = ['title', 'placeholder'];
-
-export const CANVAS_QUALITY = {
-  low: {
-    sampling: {
-      canvas: 1,
-    },
-    dataURLOptions: {
-      type: 'image/webp',
-      quality: 0.25,
-    },
-  },
-  medium: {
-    sampling: {
-      canvas: 2,
-    },
-    dataURLOptions: {
-      type: 'image/webp',
-      quality: 0.4,
-    },
-  },
-  high: {
-    sampling: {
-      canvas: 4,
-    },
-    dataURLOptions: {
-      type: 'image/webp',
-      quality: 0.5,
-    },
-  },
-};

packages/replay/src/index.ts

@@ -11,6 +11,7 @@ export type {
   ReplayFrameEvent,
   ReplaySpanFrame,
   ReplaySpanFrameEvent,
+  CanvasManagerInterface,
 } from './types';
 
 // TODO (v8): Remove deprecated types

packages/replay/src/integration.ts

@@ -349,11 +349,6 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
 
   /** 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 */
@@ -365,16 +360,8 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
       if (!canvasIntegration) {
         return;
       }
-      const additionalOptions = canvasIntegration.getOptions();
-
-      const mergedExperimentsOptions = {
-        ...this._initialOptions._experiments,
-        ...additionalOptions._experiments,
-      };
-
-      this._initialOptions._experiments = mergedExperimentsOptions;
 
-      this._replay!.getOptions()._experiments = mergedExperimentsOptions;
+      this._replay!.addIntegration('canvas', canvasIntegration.getOptions());
     } catch {
       // ignore errors here
     }

packages/replay/src/replay.ts

@@ -12,7 +12,6 @@ import { logger } from '@sentry/utils';
 
 import {
   BUFFER_CHECKOUT_TIME,
-  CANVAS_QUALITY,
   SESSION_IDLE_EXPIRE_DURATION,
   SESSION_IDLE_PAUSE_DURATION,
   SLOW_CLICK_SCROLL_TIMEOUT,
@@ -145,6 +144,11 @@ export class ReplayContainer implements ReplayContainerInterface {
 
   private _context: InternalEventContext;
 
+  /**
+   * Internal integrations (e.g. canvas)
+   */
+  private _integrations: Record<string, Record<string, unknown>>;
+
   public constructor({
     options,
     recordingOptions,
@@ -163,6 +167,7 @@ export class ReplayContainer implements ReplayContainerInterface {
     this._lastActivity = Date.now();
     this._isEnabled = false;
     this._isPaused = false;
+    this._integrations = {};
     this._hasInitializedCoreListeners = false;
     this._context = {
       errorIds: new Set(),
@@ -338,7 +343,8 @@ export class ReplayContainer implements ReplayContainerInterface {
    */
   public startRecording(): void {
     try {
-      const canvas = this._options._experiments.canvas;
+      const { canvas } = this._integrations;
+
       this._stopRecording = record({
         ...this._recordingOptions,
         // When running in error sampling mode, we need to overwrite `checkoutEveryNms`
@@ -347,12 +353,7 @@ export class ReplayContainer implements ReplayContainerInterface {
         ...(this.recordingMode === 'buffer' && { checkoutEveryNms: BUFFER_CHECKOUT_TIME }),
         emit: getHandleRecordingEmit(this),
         onMutation: this._onMutationHandler,
-        ...(canvas &&
-          canvas.manager && {
-            recordCanvas: true,
-            getCanvasManager: canvas.manager,
-            ...(CANVAS_QUALITY[canvas.quality || 'medium'] || CANVAS_QUALITY.medium),
-          }),
+        ...canvas,
       });
     } catch (err) {
       this._handleException(err);
@@ -717,6 +718,13 @@ export class ReplayContainer implements ReplayContainerInterface {
     return spanToJSON(lastTransaction).description;
   }
 
+  /**
+   * Internal integration use only, should not be public
+   */
+  public addIntegration(name: string, options: Record<string, unknown>): void {
+    this._integrations[name] = options;
+  }
+
   /**
    * Initialize and start all listeners to varying events (DOM,
    * Performance Observer, Recording, Sentry SDK, etc)