fix rrweb canvas recording crash (#79)

slow canvas loading can cause the canvas manager worker to crash. also fix a merge conflict in rrweb styles file.
highlight · Aug 2, 2022 · 8168bc6 · 8168bc6
1 parent 7c39523
commit 8168bc6
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",

diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
@@ -172,6 +172,11 @@ export class CanvasManager {
               context?.clear(context.COLOR_BUFFER_BIT);
             }
           }
+          // 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) {
+            return;
+          }
           const bitmap = await createImageBitmap(canvas);
           worker.postMessage(
             {

diff --git a/packages/rrweb/src/replay/styles/inject-style.ts b/packages/rrweb/src/replay/styles/inject-style.ts
@@ -1,5 +1,4 @@
 const rules: (blockClass: string) => string[] = (blockClass: string) => [
-  `.${blockClass} { background: currentColor }`,
   'noscript { display: none !important; }',
   `.${blockClass} { background: currentColor; border-radius: 5px; }`,
   `.${blockClass}:hover::after {content: 'Redacted'; color: white; background: black; text-align: center; width: 100%; display: block;}`,

diff --git a/packages/rrweb/src/replay/styles/style.css b/packages/rrweb/src/replay/styles/style.css
@@ -77,3 +77,15 @@
     height: 10px;
   }
 }
+
+.rr-player {
+  position: relative;
+  background: white;
+  float: left;
+  border-radius: 5px;
+  box-shadow: 0 24px 48px rgba(17, 16, 62, 0.12);
+}
+
+.rr-player__frame {
+  overflow: hidden;
+}