fix: rrweb recorder may throw error when stopping recording after an iframe becomes cross-origin

.changeset/nervous-actors-jam.md

@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+fix: rrweb recorder may throw error when stopping recording after an iframe becomes cross-origin

packages/rrweb/src/record/index.ts

@@ -557,7 +557,7 @@
             plugins
               ?.filter((p) => p.observer)
               ?.map((p) => ({
                 observer: p.observer!,
                 options: p.options,
                 callback: (payload: object) =>
                   wrappedEmit({
@@ -575,7 +575,7 @@
 
     iframeManager.addLoadListener((iframeEl) => {
       try {
         handlers.push(observe(iframeEl.contentDocument!));
       } catch (error) {
         // TODO: handle internal error
         console.warn(error);
@@ -617,7 +617,25 @@
       );
     }
     return () => {
-      handlers.forEach((h) => h());
+      handlers.forEach((handler) => {
+        try {
+          handler();
+        } catch (error) {
+          const msg = String(error).toLowerCase();
+          /**
+           * https://github.com/rrweb-io/rrweb/pull/1695
+           * This error can occur in a known scenario:
+           * If an iframe is initially same-origin and observed, but later its 
+           src attribute is changed to a cross-origin URL,
+           * attempting to execute the handler in the stop record function will 
+           throw a "cannot access cross-origin frame" error.
+           * This error is expected and can be safely ignored.
+           */
+          if (!msg.includes('cross-origin')) {
+            console.warn(error);
+          }
+        }
+      });
       processedNodeManager.destroy();
       recording = false;
       unregisterErrorHandler();

packages/rrweb/test/record.test.ts

@@ -990,6 +990,21 @@ describe('record', function (this: ISuite) {
 
     await assertSnapshot(ctx.events);
   });
+
+  it('does not throw error when stopping recording after iframe becomes cross-origin', async () => {
+    await ctx.page.evaluate(async () => {
+      const { record } = (window as unknown as IWindow).rrweb;
+      const stopRecord = record({
+        emit: (window as unknown as IWindow).emit,
+      });
+      const iframe = document.createElement('iframe');
+      document.body.appendChild(iframe);
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      iframe.src = 'https://www.example.com'; // Change the same origin iframe to a cross origin iframe after it's recorded
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      stopRecord?.();
+    });
+  });
 });
 
 describe('record iframes', function (this: ISuite) {