support recording canvas in iframe and shadow dom

.changeset/friendly-zebras-relax.md

@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+Support recording canvas in iframe and shadow dom

packages/rrweb/src/record/index.ts

@@ -27,6 +27,7 @@ import {
   scrollCallback,
   canvasMutationParam,
   adoptedStyleSheetParam,
+  IWindow,
 } from '@rrweb/types';
 import type { CrossOriginIframeMessageEventContent } from '../types';
 import { IframeManager } from './iframe-manager';
@@ -393,6 +394,9 @@ function record<T = eventWithTime>(
       },
       onIframeLoad: (iframe, childSn) => {
         iframeManager.attachIframe(iframe, childSn);
+        if (iframe.contentWindow) {
+          canvasManager.addWindow(iframe.contentWindow as IWindow);
+        }
         shadowDomManager.observeAttachShadow(iframe);
       },
       onStylesheetLoad: (linkEl, childSn) => {

packages/rrweb/src/record/mutation.ts

@@ -19,6 +19,7 @@ import type {
   removedNodeMutation,
   addedNodeMutation,
   Optional,
+  IWindow,
 } from '@rrweb/types';
 import {
   isBlocked,
@@ -331,6 +332,9 @@ export default class MutationBuffer {
         },
         onIframeLoad: (iframe, childSn) => {
           this.iframeManager.attachIframe(iframe, childSn);
+          if (iframe.contentWindow) {
+            this.canvasManager.addWindow(iframe.contentWindow as IWindow);
+          }
           this.shadowDomManager.observeAttachShadow(iframe);
         },
         onStylesheetLoad: (link, childSn) => {

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

@@ -24,19 +24,56 @@ type pendingCanvasMutationsMap = Map<
   canvasMutationWithType[]
 >;
 
+export interface CanvasManagerConstructorOptions {
+  recordCanvas: boolean;
+  mutationCb: canvasMutationCallback;
+  win: IWindow;
+  blockClass: blockClass;
+  blockSelector: string | null;
+  mirror: Mirror;
+  sampling?: 'all' | number;
+  dataURLOptions: DataURLOptions;
+}
+
 export class CanvasManager {
   private pendingCanvasMutations: pendingCanvasMutationsMap = new Map();
   private rafStamps: RafStamps = { latestId: 0, invokeId: null };
+  private options: CanvasManagerConstructorOptions;
   private mirror: Mirror;
 
+  private shadowDoms = new Set<WeakRef<ShadowRoot>>();
+  private windowsSet = new WeakSet<IWindow>();
+  private windows: WeakRef<IWindow>[] = [];
+
   private mutationCb: canvasMutationCallback;
-  private resetObservers?: listenerHandler;
+  private restoreHandlers: listenerHandler[] = [];
   private frozen = false;
   private locked = false;
 
+  private snapshotInProgressMap: Map<number, boolean> = new Map();
+  private worker: ImageBitmapDataURLRequestWorker | null = null;
+
   public reset() {
     this.pendingCanvasMutations.clear();
-    this.resetObservers && this.resetObservers();
+    this.restoreHandlers.forEach((handler) => {
+      try {
+        handler();
+      } catch (e) {
+        //
+      }
+    });
+    this.restoreHandlers = [];
+    this.windowsSet = new WeakSet();
+    this.windows = [];
+    this.shadowDoms = new Set();
+    this.worker = null;
+    this.snapshotInProgressMap = new Map();
+    if (
+      this.options.recordCanvas &&
+      typeof this.options.sampling === 'number'
+    ) {
+      this.worker = this.initFPSWorker();
+    }
   }
 
   public freeze() {
@@ -55,16 +92,7 @@ export class CanvasManager {
     this.locked = false;
   }
 
-  constructor(options: {
-    recordCanvas: boolean;
-    mutationCb: canvasMutationCallback;
-    win: IWindow;
-    blockClass: blockClass;
-    blockSelector: string | null;
-    mirror: Mirror;
-    sampling?: 'all' | number;
-    dataURLOptions: DataURLOptions;
-  }) {
+  constructor(options: CanvasManagerConstructorOptions) {
     const {
       sampling = 'all',
       win,
@@ -75,53 +103,62 @@ export class CanvasManager {
     } = options;
     this.mutationCb = options.mutationCb;
     this.mirror = options.mirror;
+    this.options = options;
 
-    if (recordCanvas && sampling === 'all')
-      this.initCanvasMutationObserver(win, blockClass, blockSelector);
-    if (recordCanvas && typeof sampling === 'number')
-      this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, {
+    if (recordCanvas && sampling === 'all') {
+      this.startRAFTimestamping();
+      this.startPendingCanvasMutationFlusher();
+    }
+    if (recordCanvas && typeof sampling === 'number') {
+      this.worker = this.initFPSWorker();
+      this.initCanvasFPSObserver(sampling, blockClass, blockSelector, {
         dataURLOptions,
       });
+    }
+    this.addWindow(win);
   }
 
-  private processMutation: canvasManagerMutationCallback = (
-    target,
-    mutation,
-  ) => {
-    const newFrame =
-      this.rafStamps.invokeId &&
-      this.rafStamps.latestId !== this.rafStamps.invokeId;
-    if (newFrame || !this.rafStamps.invokeId)
-      this.rafStamps.invokeId = this.rafStamps.latestId;
+  public addWindow(win: IWindow) {
+    const {
+      sampling = 'all',
+      blockClass,
+      blockSelector,
+      recordCanvas,
+    } = this.options;
+    if (this.windowsSet.has(win)) return;
 
-    if (!this.pendingCanvasMutations.has(target)) {
-      this.pendingCanvasMutations.set(target, []);
+    if (recordCanvas && sampling === 'all') {
+      this.initCanvasMutationObserver(win, blockClass, blockSelector);
+    }
+    if (recordCanvas && typeof sampling === 'number') {
+      const canvasContextReset = initCanvasContextObserver(
+        win,
+        blockClass,
+        blockSelector,
+        true,
+      );
+      this.restoreHandlers.push(() => {
+        canvasContextReset();
+      });
     }
+    this.windowsSet.add(win);
+    this.windows.push(new WeakRef(win));
+  }
 
-    this.pendingCanvasMutations.get(target)!.push(mutation);
-  };
+  public addShadowRoot(shadowRoot: ShadowRoot) {
+    this.shadowDoms.add(new WeakRef(shadowRoot));
+  }
 
-  private initCanvasFPSObserver(
-    fps: number,
-    win: IWindow,
-    blockClass: blockClass,
-    blockSelector: string | null,
-    options: {
-      dataURLOptions: DataURLOptions;
-    },
-  ) {
-    const canvasContextReset = initCanvasContextObserver(
-      win,
-      blockClass,
-      blockSelector,
-      true,
-    );
-    const snapshotInProgressMap: Map<number, boolean> = new Map();
+  public resetShadowRoots() {
+    this.shadowDoms = new Set();
+  }
+
+  private initFPSWorker(): ImageBitmapDataURLRequestWorker {
     const worker =
       new ImageBitmapDataURLWorker() as ImageBitmapDataURLRequestWorker;
     worker.onmessage = (e) => {
       const { id } = e.data;
-      snapshotInProgressMap.set(id, false);
+      this.snapshotInProgressMap.set(id, false);
 
       if (!('base64' in e.data)) return;
 
@@ -154,22 +191,67 @@ export class CanvasManager {
         ],
       });
     };
+    return worker;
+  }
 
+  private processMutation: canvasManagerMutationCallback = (
+    target,
+    mutation,
+  ) => {
+    const newFrame =
+      this.rafStamps.invokeId &&
+      this.rafStamps.latestId !== this.rafStamps.invokeId;
+    if (newFrame || !this.rafStamps.invokeId)
+      this.rafStamps.invokeId = this.rafStamps.latestId;
+
+    if (!this.pendingCanvasMutations.has(target)) {
+      this.pendingCanvasMutations.set(target, []);
+    }
+
+    this.pendingCanvasMutations.get(target)!.push(mutation);
+  };
+
+  private initCanvasFPSObserver(
+    fps: number,
+    blockClass: blockClass,
+    blockSelector: string | null,
+    options: {
+      dataURLOptions: DataURLOptions;
+    },
+  ) {
     const timeBetweenSnapshots = 1000 / fps;
     let lastSnapshotTime = 0;
     let rafId: number;
 
     const getCanvas = (): HTMLCanvasElement[] => {
       const matchedCanvas: HTMLCanvasElement[] = [];
-      win.document.querySelectorAll('canvas').forEach((canvas) => {
-        if (!isBlocked(canvas, blockClass, blockSelector, true)) {
-          matchedCanvas.push(canvas);
+      const searchCanvas = (root: Document | ShadowRoot) => {
+        root.querySelectorAll('canvas').forEach((canvas) => {
+          if (!isBlocked(canvas, blockClass, blockSelector, true)) {
+            matchedCanvas.push(canvas);
+          }
+        });
+      };
+      for (const item of this.windows) {
+        const window = item.deref();
+        if (window) {
+          searchCanvas(window.document);
         }
-      });
+      }
+      for (const item of this.shadowDoms) {
+        const shadowRoot = item.deref();
+        if (shadowRoot) {
+          searchCanvas(shadowRoot);
+        }
+      }
       return matchedCanvas;
     };
 
     const takeCanvasSnapshots = (timestamp: DOMHighResTimeStamp) => {
+      if (!this.windows.length) {
+        // exit loop if windows list is empty
+        return;
+      }
       if (
         lastSnapshotTime &&
         timestamp - lastSnapshotTime < timeBetweenSnapshots
@@ -182,15 +264,18 @@ export class CanvasManager {
       getCanvas()
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
         .forEach(async (canvas: HTMLCanvasElement) => {
+          if (!this.mirror.hasNode(canvas)) {
+            return;
+          }
           const id = this.mirror.getId(canvas);
-          if (snapshotInProgressMap.get(id)) return;
+          if (this.snapshotInProgressMap.get(id)) return;
 
           // The browser throws if the canvas is 0 in size
           // Uncaught (in promise) DOMException: Failed to execute 'createImageBitmap' on 'Window': The source image width is 0.
           // Assuming the same happens with height
           if (canvas.width === 0 || canvas.height === 0) return;
 
-          snapshotInProgressMap.set(id, true);
+          this.snapshotInProgressMap.set(id, true);
           if (['webgl', 'webgl2'].includes((canvas as ICanvas).__context)) {
             // if the canvas hasn't been modified recently,
             // its contents won't be in memory and `createImageBitmap`
@@ -214,7 +299,7 @@ export class CanvasManager {
             }
           }
           const bitmap = await createImageBitmap(canvas);
-          worker.postMessage(
+          this.worker?.postMessage(
             {
               id,
               bitmap,
@@ -230,20 +315,16 @@ export class CanvasManager {
 
     rafId = requestAnimationFrame(takeCanvasSnapshots);
 
-    this.resetObservers = () => {
-      canvasContextReset();
+    this.restoreHandlers.push(() => {
       cancelAnimationFrame(rafId);
-    };
+    });
   }
 
   private initCanvasMutationObserver(
     win: IWindow,
     blockClass: blockClass,
     blockSelector: string | null,
   ): void {
-    this.startRAFTimestamping();
-    this.startPendingCanvasMutationFlusher();
-
     const canvasContextReset = initCanvasContextObserver(
       win,
       blockClass,
@@ -265,11 +346,11 @@ export class CanvasManager {
       this.mirror,
     );
 
-    this.resetObservers = () => {
+    this.restoreHandlers.push(() => {
       canvasContextReset();
       canvas2DReset();
       canvasWebGL1and2Reset();
-    };
+    });
   }
 
   private startPendingCanvasMutationFlusher() {

packages/rrweb/src/record/shadow-dom-manager.ts

@@ -52,6 +52,7 @@ export class ShadowDomManager {
     if (!isNativeShadowDom(shadowRoot)) return;
     if (this.shadowDoms.has(shadowRoot)) return;
     this.shadowDoms.add(shadowRoot);
+    this.bypassOptions.canvasManager.addShadowRoot(shadowRoot);
     const observer = initMutationObserver(
       {
         ...this.bypassOptions,
@@ -151,5 +152,6 @@ export class ShadowDomManager {
     });
     this.restoreHandlers = [];
     this.shadowDoms = new WeakSet();
+    this.bypassOptions.canvasManager.resetShadowRoots();
   }
 }