Replace Array.from with clean implementation (rrweb-io#1464)

This work is to try to provide support where rrweb might be included in applications with various tools that might override Array.from so that the 2nd parameter (the map function) will always work for rrweb. Co-authored-by: Michael Dellanoce <[email protected]>
amplitude · Oct 16, 2024 · 9f0fb7c · 9f0fb7c
1 parent 0983ef8
commit 9f0fb7c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/.changeset/eleven-bobcats-peel.md b/.changeset/eleven-bobcats-peel.md
@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+better support for coexistence with older libraries (e.g. MooTools & Prototype.js) which modify the in-built `Array.from` function
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
@@ -49,6 +49,20 @@ let takeFullSnapshot!: (isCheckout?: boolean) => void;
 let canvasManager!: CanvasManager;
 let recording = false;
 
+// Multiple tools (i.e. MooTools, Prototype.js) override Array.from and drop support for the 2nd parameter
+// Try to pull a clean implementation from a newly created iframe
+try {
+  if (Array.from([1], (x) => x * 2)[0] !== 2) {
+    const cleanFrame = document.createElement('iframe');
+    document.body.appendChild(cleanFrame);
+    // eslint-disable-next-line @typescript-eslint/unbound-method -- Array.from is static and doesn't rely on binding
+    Array.from = cleanFrame.contentWindow?.Array.from || Array.from;
+    document.body.removeChild(cleanFrame);
+  }
+} catch (err) {
+  console.debug('Unable to override Array.from', err);
+}
+
 const mirror = createMirror();
 function record<T = eventWithTime>(
   options: recordOptions<T> = {},

diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
@@ -207,6 +207,7 @@ export type missingNodeMap = {
 declare global {
   interface Window {
     FontFace: typeof FontFace;
+    Array: typeof Array;
   }
 }