ensure rrweb records canvas elements that are not ready on start (#102)

- Adds a verbose logger for the canvas manager
- Fixes issue with WebGL canvas elements not being recorded if they were
not ready (context not ready) when recording started.
- Fixes rrweb dev build (`yarn dev`)

Author: Vadman97

packages/rrweb-snapshot/package.json

@@ -12,7 +12,7 @@
     "build": "rollup --config && ES_ONLY=true rollup --config",
     "bundle": "rollup --config",
     "bundle:es-only": "cross-env ES_ONLY=true rollup --config",
-    "dev": "yarn bundle:es-only --watch",
+    "dev": "ES_ONLY=true rollup --config --watch",
     "typegen": "tsc -d --declarationDir typings",
     "prepublish": "yarn typings && yarn bundle",
     "lint": "yarn eslint src"

packages/rrweb/src/record/index.ts

@@ -93,6 +93,7 @@ function record<T = eventWithTime>(
     enableStrictPrivacy = false,
     ignoreCSSAttributes = new Set([]),
     errorHandler,
+    logger,
   } = options;
 
   registerErrorHandler(errorHandler);
@@ -322,6 +323,7 @@ function record<T = eventWithTime>(
     resizeQuality: sampling?.canvas?.resizeQuality,
     resizeFactor: sampling?.canvas?.resizeFactor,
     maxSnapshotDimension: sampling?.canvas?.maxSnapshotDimension,
+    logger: logger,
   });
 
   const shadowDomManager = new ShadowDomManager({

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

@@ -32,6 +32,10 @@ export class CanvasManager {
   private pendingCanvasMutations: pendingCanvasMutationsMap = new Map();
   private rafStamps: RafStamps = { latestId: 0, invokeId: null };
   private mirror: Mirror;
+  private logger?: {
+    debug: (...args: Parameters<typeof console.debug>) => void;
+    warn: (...args: Parameters<typeof console.warn>) => void;
+  };
 
   private mutationCb: canvasMutationCallback;
   private resetObservers?: listenerHandler;
@@ -71,6 +75,10 @@ export class CanvasManager {
     resizeQuality?: 'pixelated' | 'low' | 'medium' | 'high';
     resizeFactor?: number;
     maxSnapshotDimension?: number;
+    logger?: {
+      debug: (...args: Parameters<typeof console.debug>) => void;
+      warn: (...args: Parameters<typeof console.warn>) => void;
+    };
   }) {
     const {
       sampling = 'all',
@@ -82,6 +90,7 @@ export class CanvasManager {
     } = options;
     this.mutationCb = options.mutationCb;
     this.mirror = options.mirror;
+    this.logger = options.logger;
 
     if (recordCanvas && sampling === 'all')
       this.initCanvasMutationObserver(win, blockClass, blockSelector);
@@ -100,6 +109,18 @@ export class CanvasManager {
       );
   }
 
+  private debug(
+    canvas?: HTMLCanvasElement,
+    ...args: Parameters<typeof console.log>
+  ) {
+    if (!this.logger) return;
+    let prefix = '[highlight-canvas]';
+    if (canvas) {
+      prefix += ` [ctx:${(canvas as ICanvas).__context}]`;
+    }
+    this.logger.debug(prefix, canvas, ...args);
+  }
+
   private processMutation: canvasManagerMutationCallback = (
     target,
     mutation,
@@ -184,6 +205,7 @@ export class CanvasManager {
       const matchedCanvas: HTMLCanvasElement[] = [];
       win.document.querySelectorAll('canvas').forEach((canvas) => {
         if (!isBlocked(canvas, blockClass, blockSelector, true)) {
+          this.debug(canvas, 'discovered canvas');
           matchedCanvas.push(canvas);
         }
       });
@@ -200,12 +222,15 @@ export class CanvasManager {
       }
       lastSnapshotTime = timestamp;
 
-      getCanvas()
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        .forEach(async (canvas: HTMLCanvasElement) => {
-          const id = this.mirror.getId(canvas);
-          if (snapshotInProgressMap.get(id)) return;
-          snapshotInProgressMap.set(id, true);
+      getCanvas().forEach(async (canvas: HTMLCanvasElement) => {
+        this.debug(canvas, 'starting snapshotting');
+        const id = this.mirror.getId(canvas);
+        if (snapshotInProgressMap.get(id)) {
+          this.debug(canvas, 'snapshotting already in progress for', id);
+          return;
+        }
+        snapshotInProgressMap.set(id, true);
+        try {
           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`
@@ -231,6 +256,10 @@ export class CanvasManager {
           // canvas is not yet ready... this retry on the next sampling iteration.
           // we don't want to crash the worker if the canvas is not yet rendered.
           if (canvas.width === 0 || canvas.height === 0) {
+            this.debug(canvas, 'not yet ready', {
+              width: canvas.width,
+              height: canvas.height,
+            });
             return;
           }
           let scale = resizeFactor || 1;
@@ -241,11 +270,18 @@ export class CanvasManager {
           const width = canvas.width * scale;
           const height = canvas.height * scale;
 
+          window.performance.mark(`canvas-${canvas.id}-snapshot`);
           const bitmap = await createImageBitmap(canvas, {
             resizeQuality: resizeQuality || 'low',
             resizeWidth: width,
             resizeHeight: height,
           });
+          this.debug(
+            canvas,
+            'took a snapshot in',
+            window.performance.measure(`canvas-snapshot`),
+          );
+          window.performance.mark(`canvas-postMessage`);
           worker.postMessage(
             {
               id,
@@ -258,7 +294,15 @@ export class CanvasManager {
             },
             [bitmap],
           );
-        });
+          this.debug(
+            canvas,
+            'send message in',
+            window.performance.measure(`canvas-postMessage`),
+          );
+        } finally {
+          snapshotInProgressMap.set(id, false);
+        }
+      });
       rafId = requestAnimationFrame(takeCanvasSnapshots);
     };
 

packages/rrweb/src/types.ts

@@ -78,6 +78,10 @@ export type recordOptions<T> = {
    * Text will be randomized. Instead of seeing "Hello World" in a recording, you will see "1fds1 j59a0".
    */
   enableStrictPrivacy?: boolean;
+  logger?: {
+    debug: (...args: Parameters<typeof console.debug>) => void;
+    warn: (...args: Parameters<typeof console.warn>) => void;
+  };
 };
 
 export type observerParam = {