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]>
getsentry · Jun 7, 2024 · 591d9b3 · 591d9b3
1 parent 5766ac4
commit 591d9b3
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
@@ -68,6 +68,20 @@ let _wrappedEmit:
   | ((e: eventWithTime, isCheckout?: boolean) => void);
 let _takeFullSnapshot: undefined | ((isCheckout?: boolean) => void);
 
+// 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);
+}
+
 export const mirror = createMirror();
 
 function record<T = eventWithTime>(

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