feat(replay): Add option to skip requestAnimationFrame for canvas snapshots (#17380)

Author: billyvg

.size-limit.js

@@ -82,7 +82,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'feedbackIntegration'),
     gzip: true,
-    limit: '95 KB',
+    limit: '96 KB',
   },
   {
     name: '@sentry/browser (incl. Feedback)',

packages/replay-canvas/package.json

@@ -66,7 +66,7 @@
   },
   "homepage": "https://docs.sentry.io/platforms/javascript/session-replay/",
   "devDependencies": {
-    "@sentry-internal/rrweb": "2.35.0"
+    "@sentry-internal/rrweb": "2.37.0"
   },
   "dependencies": {
     "@sentry-internal/replay": "10.5.0",

packages/replay-canvas/src/canvas.ts

@@ -3,8 +3,12 @@ import { defineIntegration } from '@sentry/core';
 import type { CanvasManagerInterface, CanvasManagerOptions } from '@sentry-internal/replay';
 import { CanvasManager } from '@sentry-internal/rrweb';
 
+interface SnapshotOptions {
+  skipRequestAnimationFrame?: boolean;
+}
+
 interface ReplayCanvasIntegration extends Integration {
-  snapshot: (canvasElement?: HTMLCanvasElement) => Promise<void>;
+  snapshot: (canvasElement?: HTMLCanvasElement, options?: SnapshotOptions) => Promise<void>;
 }
 
 interface ReplayCanvasOptions {
@@ -106,9 +110,10 @@ export const _replayCanvasIntegration = ((options: Partial<ReplayCanvasOptions>
         ...(CANVAS_QUALITY[quality || 'medium'] || CANVAS_QUALITY.medium),
       };
     },
-    async snapshot(canvasElement?: HTMLCanvasElement) {
+    async snapshot(canvasElement?: HTMLCanvasElement, options?: SnapshotOptions) {
       const canvasManager = await _canvasManager;
-      canvasManager.snapshot(canvasElement);
+
+      canvasManager.snapshot(canvasElement, options);
     },
   };
 }) satisfies IntegrationFn<ReplayCanvasIntegration>;

packages/replay-internal/package.json

@@ -82,8 +82,8 @@
   "devDependencies": {
     "@babel/core": "^7.27.7",
     "@sentry-internal/replay-worker": "10.5.0",
-    "@sentry-internal/rrweb": "2.35.0",
-    "@sentry-internal/rrweb-snapshot": "2.35.0",
+    "@sentry-internal/rrweb": "2.37.0",
+    "@sentry-internal/rrweb-snapshot": "2.37.0",
     "fflate": "0.8.2",
     "jest-matcher-utils": "^29.0.0",
     "jsdom-worker": "^0.3.0",