chore: upgrade rrweb to 2.0.0-alpha.12

package.json

@@ -46,7 +46,7 @@
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^11.1.6",
-        "@rrweb/types": "2.0.0-alpha.11",
+        "@rrweb/types": "2.0.0-alpha.12",
         "@sentry/types": "7.37.2",
         "@testing-library/dom": "^9.3.0",
         "@types/eslint": "^8.44.6",
@@ -86,8 +86,8 @@
         "rollup": "^4.9.6",
         "rollup-plugin-dts": "^6.1.0",
         "rollup-plugin-visualizer": "^5.12.0",
-        "rrweb": "2.0.0-alpha.11",
-        "rrweb-snapshot": "2.0.0-alpha.11",
+        "rrweb": "2.0.0-alpha.12",
+        "rrweb-snapshot": "2.0.0-alpha.12",
         "sinon": "9.0.2",
         "testcafe": "1.19.0",
         "testcafe-browser-provider-browserstack": "1.14.0",
@@ -107,7 +107,7 @@
     ],
     "pnpm": {
         "patchedDependencies": {
-            "[email protected].11": "patches/[email protected].11.patch"
+            "[email protected].12": "patches/[email protected].12.patch"
         }
     }
 }

patches/rrweb@2.0.0-alpha.12.patch

@@ -0,0 +1,69 @@
+diff --git a/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js b/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js
+index 8746997c9b849ac5c952fdbe0a8dd608d6680a3a..45c0076c7c36c75861cfc4234839ea621514cdff 100644
+--- a/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js
++++ b/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js
+@@ -91,11 +91,21 @@ class CanvasManager {
+         let rafId;
+         const getCanvas = () => {
+             const matchedCanvas = [];
+-            win.document.querySelectorAll('canvas').forEach((canvas) => {
+-                if (!isBlocked(canvas, blockClass, blockSelector, true)) {
+-                    matchedCanvas.push(canvas);
+-                }
+-            });
++            const searchCanvas = (root) => {
++                root.querySelectorAll('canvas').forEach((canvas) => {
++                    if (!isBlocked(canvas, blockClass, blockSelector, true)) {
++                        matchedCanvas.push(canvas);
++                    }
++                });
++                root.querySelectorAll('*').forEach((elem) => {
++                    if (elem.shadowRoot) {
++                        searchCanvas(elem.shadowRoot);
++                    }
++                });
++            };
++            
++            searchCanvas(win.document);
++            
+             return matchedCanvas;
+         };
+         const takeCanvasSnapshots = (timestamp) => {
+@@ -111,6 +121,12 @@ class CanvasManager {
+                 const id = this.mirror.getId(canvas);
+                 if (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);
+                 if (['webgl', 'webgl2'].includes(canvas.__context)) {
+                     const context = canvas.getContext(canvas.__context);
+@@ -118,12 +134,20 @@ class CanvasManager {
+                         context.clear(context.COLOR_BUFFER_BIT);
+                     }
+                 }
+-                const bitmap = yield createImageBitmap(canvas);
+-                worker.postMessage({
++
++                const width = canvas.clientWidth;
++                const height = canvas.clientHeight;
++
++                const bitmap = yield createImageBitmap(canvas, {
++                    resizeWidth: width,
++                    resizeHeight: height
++                })
++
++                    worker.postMessage({
+                     id,
+                     bitmap,
+-                    width: canvas.width,
+-                    height: canvas.height,
++                    width: width,
++                    height: height,
+                     dataURLOptions: options.dataURLOptions,
+                 }, [bitmap]);
+             }));