Rename recordImages to inlineImages and try catch

rrweb-io · Jan 4, 2022 · cec7fda · cec7fda
1 parent e737ed4
commit cec7fda
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 20 deletions.
diff --git a/guide.md b/guide.md
@@ -155,7 +155,7 @@ The parameter of `rrweb.record` accepts the following options.
 | packFn               | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                |
 | sampling             | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                |
 | recordCanvas         | false              | whether to record the canvas element                                                                                                                                                          |
-| recordImages         | false              | whether to record the image content                                                                                                                                                          |
+| inlineImages         | false              | whether to record the image content                                                                                                                                                          |
 | collectFonts         | false              | whether to collect fonts in the website                                                                                                                                                       |
 | recordLog            | false              | whether to record console output, refer to the [console recipe](./docs/recipes/console.md)                                                                                                    |
 | userTriggeredOnInput | false              | whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. [What is `userTriggered`?](https://github.com/rrweb-io/rrweb/pull/495) |

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -381,7 +381,7 @@ function serializeNode(
     maskInputOptions: MaskInputOptions;
     maskTextFn: MaskTextFn | undefined;
     maskInputFn: MaskInputFn | undefined;
-    recordImages: boolean;
+    inlineImages: boolean;
     recordCanvas: boolean;
     keepIframeSrcFn: KeepIframeSrcFn;
   },
@@ -396,7 +396,7 @@ function serializeNode(
     maskInputOptions = {},
     maskTextFn,
     maskInputFn,
-    recordImages,
+    inlineImages,
     recordCanvas,
     keepIframeSrcFn,
   } = options;
@@ -513,13 +513,17 @@ function serializeNode(
         attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL();
       }
       // save image offline
-      if (tagName === 'img' && recordImages && canvasService && canvasCtx) {
+      if (tagName === 'img' && inlineImages && canvasService && canvasCtx) {
         const image = (n as HTMLImageElement);
         image.crossOrigin = 'anonymous';
-        canvasService.width = image.naturalWidth;
-        canvasService.height = image.naturalHeight;
-        canvasCtx.drawImage(image, 0, 0);
-        attributes.rr_dataURL = canvasService.toDataURL();
+        try {
+          canvasService.width = image.naturalWidth;
+          canvasService.height = image.naturalHeight;
+          canvasCtx.drawImage(image, 0, 0);
+          attributes.rr_dataURL = canvasService.toDataURL();
+        } catch {
+          // ignore error
+        }
       }
       // media elements
       if (tagName === 'audio' || tagName === 'video') {
@@ -734,7 +738,7 @@ export function serializeNodeWithId(
     maskInputFn: MaskInputFn | undefined;
     slimDOMOptions: SlimDOMOptions;
     keepIframeSrcFn?: KeepIframeSrcFn;
-    recordImages?: boolean;
+    inlineImages?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
@@ -755,7 +759,7 @@ export function serializeNodeWithId(
     maskTextFn,
     maskInputFn,
     slimDOMOptions,
-    recordImages = false,
+    inlineImages = false,
     recordCanvas = false,
     onSerialize,
     onIframeLoad,
@@ -773,7 +777,7 @@ export function serializeNodeWithId(
     maskInputOptions,
     maskTextFn,
     maskInputFn,
-    recordImages,
+    inlineImages,
     recordCanvas,
     keepIframeSrcFn,
   });
@@ -826,7 +830,7 @@ export function serializeNodeWithId(
     ) {
       preserveWhiteSpace = false;
     }
-    if (recordImages) {
+    if (inlineImages) {
       initCanvasService(doc);
     }
     const bypassOptions = {
@@ -842,7 +846,7 @@ export function serializeNodeWithId(
       maskTextFn,
       maskInputFn,
       slimDOMOptions,
-      recordImages,
+      inlineImages,
       recordCanvas,
       preserveWhiteSpace,
       onSerialize,
@@ -895,7 +899,7 @@ export function serializeNodeWithId(
             maskTextFn,
             maskInputFn,
             slimDOMOptions,
-            recordImages,
+            inlineImages,
             recordCanvas,
             preserveWhiteSpace,
             onSerialize,
@@ -928,7 +932,7 @@ function snapshot(
     maskTextFn?: MaskTextFn;
     maskInputFn?: MaskTextFn;
     slimDOM?: boolean | SlimDOMOptions;
-    recordImages?: boolean;
+    inlineImages?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
@@ -943,7 +947,7 @@ function snapshot(
     maskTextClass = 'rr-mask',
     maskTextSelector = null,
     inlineStylesheet = true,
-    recordImages = false,
+    inlineImages = false,
     recordCanvas = false,
     maskAllInputs = false,
     maskTextFn,
@@ -1013,7 +1017,7 @@ function snapshot(
       maskTextFn,
       maskInputFn,
       slimDOMOptions,
-      recordImages,
+      inlineImages,
       recordCanvas,
       preserveWhiteSpace,
       onSerialize,

diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts
@@ -202,7 +202,7 @@ iframe.contentDocument.querySelector('center').clientHeight
     await page.waitForSelector('img', { timeout: 1000 });
 
     const snapshot = await page.evaluate(`${code}
-    const [snap] = rrweb.snapshot(document, {recordImages: true, inlineStylesheet: false});
+    const [snap] = rrweb.snapshot(document, {inlineImages: true, inlineStylesheet: false});
     JSON.stringify(snap, null, 2);
     `);
 

diff --git a/packages/rrweb-snapshot/typings/snapshot.d.ts b/packages/rrweb-snapshot/typings/snapshot.d.ts
@@ -19,7 +19,7 @@ export declare function serializeNodeWithId(n: Node | INode, options: {
     maskInputFn: MaskInputFn | undefined;
     slimDOMOptions: SlimDOMOptions;
     keepIframeSrcFn?: KeepIframeSrcFn;
-    recordImages?: boolean;
+    inlineImages?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
@@ -36,7 +36,7 @@ declare function snapshot(n: Document, options?: {
     maskTextFn?: MaskTextFn;
     maskInputFn?: MaskTextFn;
     slimDOM?: boolean | SlimDOMOptions;
-    recordImages?: boolean;
+    inlineImages?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;