From e223399c7c158abc538f9c890c3ff62e5f442e42 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Fri, 5 Apr 2024 12:15:14 +0200
Subject: [PATCH] Chore: Make inject script more robust on repl & stream
 (#1429)

* try/catch injection of recording script in rrweb repl and stream

* Add empty changesets
---
 .changeset/light-fireants-exercise.md |  2 +
 packages/rrweb/scripts/repl.js        | 64 ++++++++++---------
 packages/rrweb/scripts/stream.js      | 91 ++++++++++++++-------------
 3 files changed, 83 insertions(+), 74 deletions(-)
 create mode 100644 .changeset/light-fireants-exercise.md

diff --git a/.changeset/light-fireants-exercise.md b/.changeset/light-fireants-exercise.md
new file mode 100644
index 00000000..a845151c
--- /dev/null
+++ b/.changeset/light-fireants-exercise.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/rrweb/scripts/repl.js b/packages/rrweb/scripts/repl.js
index 0bf4a7de..a36f34a2 100644
--- a/packages/rrweb/scripts/repl.js
+++ b/packages/rrweb/scripts/repl.js
@@ -22,40 +22,44 @@ void (async () => {
   let events = [];
 
   async function injectRecording(frame) {
-    await frame.evaluate((rrwebCode) => {
-      const win = window;
-      if (win.__IS_RECORDING__) return;
-      win.__IS_RECORDING__ = true;
+    try {
+      await frame.evaluate((rrwebCode) => {
+        const win = window;
+        if (win.__IS_RECORDING__) return;
+        win.__IS_RECORDING__ = true;
 
-      (async () => {
-        function loadScript(code) {
-          const s = document.createElement('script');
-          let r = false;
-          s.type = 'text/javascript';
-          s.innerHTML = code;
-          if (document.head) {
-            document.head.append(s);
-          } else {
-            requestAnimationFrame(() => {
+        (async () => {
+          function loadScript(code) {
+            const s = document.createElement('script');
+            let r = false;
+            s.type = 'text/javascript';
+            s.innerHTML = code;
+            if (document.head) {
               document.head.append(s);
-            });
+            } else {
+              requestAnimationFrame(() => {
+                document.head.append(s);
+              });
+            }
           }
-        }
-        loadScript(rrwebCode);
+          loadScript(rrwebCode);
 
-        win.events = [];
-        rrweb.record({
-          emit: (event) => {
-            win.events.push(event);
-            win._replLog(event);
-          },
-          plugins: [],
-          recordCanvas: true,
-          recordCrossOriginIframes: true,
-          collectFonts: true,
-        });
-      })();
-    }, code);
+          win.events = [];
+          rrweb.record({
+            emit: (event) => {
+              win.events.push(event);
+              win._replLog(event);
+            },
+            plugins: [],
+            recordCanvas: true,
+            recordCrossOriginIframes: true,
+            collectFonts: true,
+          });
+        })();
+      }, code);
+    } catch (e) {
+      console.error('failed to inject recording script:', e);
+    }
   }
 
   await start('https://react-redux.realworld.io');
diff --git a/packages/rrweb/scripts/stream.js b/packages/rrweb/scripts/stream.js
index 93e0a66d..39693b11 100644
--- a/packages/rrweb/scripts/stream.js
+++ b/packages/rrweb/scripts/stream.js
@@ -24,55 +24,58 @@ const pluginCode = fs.readFileSync(
 );
 
 async function injectRecording(frame) {
-  await frame.evaluate(
-    (rrwebCode, pluginCode) => {
-      const win = window;
-      if (win.__IS_RECORDING__) return;
-      win.__IS_RECORDING__ = true;
+  try {
+    await frame.evaluate(
+      (rrwebCode, pluginCode) => {
+        const win = window;
+        if (win.__IS_RECORDING__) return;
+        win.__IS_RECORDING__ = true;
 
-      (async () => {
-        function loadScript(code) {
-          const s = document.createElement('script');
-          s.type = 'text/javascript';
-          s.innerHTML = code;
-          if (document.head) {
-            document.head.append(s);
-          } else {
-            requestAnimationFrame(() => {
+        (async () => {
+          function loadScript(code) {
+            const s = document.createElement('script');
+            s.type = 'text/javascript';
+            s.innerHTML = code;
+            if (document.head) {
               document.head.append(s);
-            });
+            } else {
+              requestAnimationFrame(() => {
+                document.head.append(s);
+              });
+            }
           }
-        }
-        loadScript(rrwebCode);
-        loadScript(pluginCode);
+          loadScript(rrwebCode);
+          loadScript(pluginCode);
 
-        win.events = [];
-        window.record = win.rrweb.record;
-        window.plugin = new rrwebCanvasWebRTCRecord.RRWebPluginCanvasWebRTCRecord(
-          {
-            signalSendCallback: (msg) => {
-              // [record#callback] provides canvas id, stream, and webrtc sdpOffer signal & connect message
-              _signal(msg);
+          win.events = [];
+          window.record = win.rrweb.record;
+          window.plugin =
+            new rrwebCanvasWebRTCRecord.RRWebPluginCanvasWebRTCRecord({
+              signalSendCallback: (msg) => {
+                // [record#callback] provides canvas id, stream, and webrtc sdpOffer signal & connect message
+                _signal(msg);
+              },
+            });
+
+          window.record({
+            emit: (event) => {
+              win.events.push(event);
+              win._captureEvent(event);
             },
-          },
-        );
-
-        window.record({
-          emit: (event) => {
-            win.events.push(event);
-            win._captureEvent(event);
-          },
-          plugins: [window.plugin.initPlugin()],
-          recordCanvas: false,
-          recordCrossOriginIframes: true,
-          collectFonts: true,
-          inlineImages: true,
-        });
-      })();
-    },
-    code,
-    pluginCode,
-  );
+            plugins: [window.plugin.initPlugin()],
+            recordCanvas: false,
+            recordCrossOriginIframes: true,
+            collectFonts: true,
+            inlineImages: true,
+          });
+        })();
+      },
+      code,
+      pluginCode,
+    );
+  } catch (e) {
+    console.error('failed to inject script, error:', e);
+  }
 }
 
 async function startReplay(page, serverURL, recordedPage) {