fix(rrweb): Use unpatched requestAnimationFrame when possible

packages/rrweb/src/record/observers/canvas/canvas-manager.ts

@@ -14,7 +14,7 @@
   CanvasArg,
   ImageBitmapDataURLWorkerResponse,
 } from '@sentry-internal/rrweb-types';
-import { isBlocked } from '../../../utils';
+import { isBlocked, onRequestAnimationFrame } from '../../../utils';
 import { CanvasContext } from '@sentry-internal/rrweb-types';
 import initCanvas2DMutationObserver from './2d';
 import initCanvasContextObserver from './canvas';
@@ -147,7 +147,7 @@
       this.pendingCanvasMutations.set(target, []);
     }
 
     this.pendingCanvasMutations.get(target)!.push(mutation);
   };
 
   private initCanvasFPSObserver(
@@ -227,7 +227,7 @@
         lastSnapshotTime &&
         timestamp - lastSnapshotTime < timeBetweenSnapshots
       ) {
-        rafId = requestAnimationFrame(takeCanvasSnapshots);
+        rafId = onRequestAnimationFrame(takeCanvasSnapshots);
         return;
       }
       lastSnapshotTime = timestamp;
@@ -278,10 +278,10 @@
             })();
           });
       });
-      rafId = requestAnimationFrame(takeCanvasSnapshots);
+      rafId = onRequestAnimationFrame(takeCanvasSnapshots);
     };
 
-    rafId = requestAnimationFrame(takeCanvasSnapshots);
+    rafId = onRequestAnimationFrame(takeCanvasSnapshots);
 
     this.resetObservers = () => {
       canvasContextReset();
@@ -330,15 +330,15 @@
   }
 
   private startPendingCanvasMutationFlusher() {
-    requestAnimationFrame(() => this.flushPendingCanvasMutations());
+    onRequestAnimationFrame(() => this.flushPendingCanvasMutations());
   }
 
   private startRAFTimestamping() {
     const setLatestRAFTimestamp = (timestamp: DOMHighResTimeStamp) => {
       this.rafStamps.latestId = timestamp;
-      requestAnimationFrame(setLatestRAFTimestamp);
+      onRequestAnimationFrame(setLatestRAFTimestamp);
     };
-    requestAnimationFrame(setLatestRAFTimestamp);
+    onRequestAnimationFrame(setLatestRAFTimestamp);
   }
 
   flushPendingCanvasMutations() {
@@ -348,7 +348,7 @@
         this.flushPendingCanvasMutationFor(canvas, id);
       },
     );
-    requestAnimationFrame(() => this.flushPendingCanvasMutations());
+    onRequestAnimationFrame(() => this.flushPendingCanvasMutations());
   }
 
   flushPendingCanvasMutationFor(canvas: HTMLCanvasElement, id: number) {
@@ -360,7 +360,7 @@
     if (!valuesWithType || id === -1) return;
 
     const values = valuesWithType.map((value) => {
       const { type, ...rest } = value;
       return rest;
     });
     const { type } = valuesWithType[0];

packages/rrweb/src/record/processed-node-manager.ts

@@ -1,3 +1,4 @@
+import { onRequestAnimationFrame } from '../utils';
 import type MutationBuffer from './mutation';
 
 /**
@@ -13,7 +14,7 @@ export default class ProcessedNodeManager {
   }
 
   private periodicallyClear() {
-    requestAnimationFrame(() => {
+    onRequestAnimationFrame(() => {
       this.clear();
       if (this.loop) this.periodicallyClear();
     });

packages/rrweb/src/replay/timer.ts

@@ -4,6 +4,7 @@ import {
   EventType,
   IncrementalSource,
 } from '@sentry-internal/rrweb-types';
+import { onRequestAnimationFrame } from '../utils';
 
 export class Timer {
   public timeOffset = 0;
@@ -39,14 +40,14 @@ export class Timer {
       this.actions.splice(index, 0, action);
     }
     if (rafWasActive) {
-      this.raf = requestAnimationFrame(this.rafCheck.bind(this));
+      this.raf = onRequestAnimationFrame(this.rafCheck.bind(this));
     }
   }
 
   public start() {
     this.timeOffset = 0;
     this.lastTimestamp = performance.now();
-    this.raf = requestAnimationFrame(this.rafCheck.bind(this));
+    this.raf = onRequestAnimationFrame(this.rafCheck.bind(this));
   }
 
   private rafCheck() {
@@ -64,7 +65,7 @@ export class Timer {
       }
     }
     if (this.actions.length > 0) {
-      this.raf = requestAnimationFrame(this.rafCheck.bind(this));
+      this.raf = onRequestAnimationFrame(this.rafCheck.bind(this));
     } else {
       this.raf = true; // was active
     }

packages/rrweb/src/utils.ts

@@ -34,7 +34,7 @@
   'now you can use replayer.getMirror() to access the mirror instance of a replayer,' +
   '\r\n' +
   'or you can use record.mirror to access the mirror instance during recording.';
 /** @deprecated */
 export let _mirror: DeprecatedMirror = {
   map: {},
   getId() {
@@ -118,7 +118,7 @@
           set(value) {
             // put hooked setter into event loop to avoid of set latency
             setTimeout(() => {
               d.set!.call(this, value);
             }, 0);
             if (original && original.set) {
               original.set.call(this, value);
@@ -131,7 +131,7 @@
 
 // copy from https://github.com/getsentry/sentry-javascript/blob/b2109071975af8bf0316d3b5b38f519bdaf5dc15/packages/utils/src/object.ts
 export function patch(
   source: { [key: string]: any },
   name: string,
   replacement: (...args: unknown[]) => unknown,
 ): () => void {
@@ -589,3 +589,46 @@
   if (!doc) return false;
   return doc.contains(n) || shadowHostInDom(n);
 }
+
+let cachedRequestAnimationFrameImplementation:
+  | undefined
+  | typeof requestAnimationFrame;
+
+/**
+ * We generally want to use window.requestAnimationFrame.
+ * However, in some cases this may be wrapped (e.g. by Zone.js for Angular),
+ * so we try to get an unpatched version of this from a sandboxed iframe.
+ */
+function getRequestAnimationFrameImplementation(): typeof requestAnimationFrame {
+  if (cachedRequestAnimationFrameImplementation) {
+    return cachedRequestAnimationFrameImplementation;
+  }
+
+  const document = window.document;
+  let requestAnimationFrameImplementation = window.requestAnimationFrame;
+  if (document && typeof document.createElement === 'function') {
+    try {
+      const sandbox = document.createElement('iframe');
+      sandbox.hidden = true;
+      document.head.appendChild(sandbox);
+      const contentWindow = sandbox.contentWindow;
+      if (contentWindow && contentWindow.requestAnimationFrame) {
+        requestAnimationFrameImplementation =
+          // eslint-disable-next-line @typescript-eslint/unbound-method
+          contentWindow.requestAnimationFrame;
+      }
+      document.head.removeChild(sandbox);
+    } catch (e) {
+      // Could not create sandbox iframe, just use window.requestAnimationFrame
+    }
+  }
+
+  return (cachedRequestAnimationFrameImplementation =
+    requestAnimationFrameImplementation.bind(window));
+}
+
+export function onRequestAnimationFrame(
+  ...rest: Parameters<typeof requestAnimationFrame>
+): ReturnType<typeof requestAnimationFrame> {
+  return getRequestAnimationFrameImplementation()(...rest);
+}