Impl record iframe (#481)

* Impl record iframe

* iframe observe

* temp: add bundle file to git

* update bundle

* update with pick

* update bundle

* fix fragment map remove

* feat: add an option to determine whether to pause CSS animation when playback is paused (#428)

set pauseAnimation to true by default

* fix: elements would lose some states like scroll position because of "virtual parent" optimization (#427)

* fix: elements would lose some state like scroll position because of "virtual parent" optimization

* refactor: the bugfix code

bug: elements would lose some state like scroll position because of "virtual parent" optimization

* fix: an error occured at applyMutation(remove nodes part)

error message:
Uncaught (in promise) DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

* pick fixes

* revert ignore file

* re-impl iframe record

* re-impl iframe replay

* code housekeeping

* move multi layer dimension calculation to replay side

* update test cases

* teardown test server

* upgrade rrweb-snapshot with iframe load timeout

Co-authored-by: Lucky Feng <[email protected]>

Author: Yuyz0112

package.json

@@ -62,6 +62,6 @@
     "@xstate/fsm": "^1.4.0",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
-    "rrweb-snapshot": "^1.0.4"
+    "rrweb-snapshot": "^1.0.6"
   }
 }

scripts/repl.ts

@@ -81,7 +81,11 @@ function getCode(): string {
         width: 1600,
         height: 900,
       },
-      args: ['--start-maximized', '--ignore-certificate-errors'],
+      args: [
+        '--start-maximized',
+        '--ignore-certificate-errors',
+        '--no-sandbox',
+      ],
     });
     const page = await browser.newPage();
     await page.goto(url, {
@@ -128,7 +132,7 @@ function getCode(): string {
         width: 1600,
         height: 900,
       },
-      args: ['--start-maximized'],
+      args: ['--start-maximized', '--no-sandbox'],
     });
     const page = await browser.newPage();
     await page.goto('about:blank');

src/record/iframe-manager.ts

@@ -0,0 +1,36 @@
+import { serializedNodeWithId, INode } from 'rrweb-snapshot';
+import { mutationCallBack } from '../types';
+
+export class IframeManager {
+  private iframes: WeakMap<HTMLIFrameElement, true> = new WeakMap();
+  private mutationCb: mutationCallBack;
+  private loadListener?: (iframeEl: HTMLIFrameElement) => unknown;
+
+  constructor(options: { mutationCb: mutationCallBack }) {
+    this.mutationCb = options.mutationCb;
+  }
+
+  public addIframe(iframeEl: HTMLIFrameElement) {
+    this.iframes.set(iframeEl, true);
+  }
+
+  public addLoadListener(cb: (iframeEl: HTMLIFrameElement) => unknown) {
+    this.loadListener = cb;
+  }
+
+  public attachIframe(iframeEl: INode, childSn: serializedNodeWithId) {
+    this.mutationCb({
+      adds: [
+        {
+          parentId: iframeEl.__sn.id,
+          nextId: null,
+          node: childSn,
+        },
+      ],
+      removes: [],
+      texts: [],
+      attributes: [],
+    });
+    this.loadListener?.((iframeEl as unknown) as HTMLIFrameElement);
+  }
+}