Ensure the iframe id survives the onceIframeLoaded process; for som…

…e reason I'm seeing the `__sn` attribute on the iframe DOM element disappearing with the callback
rrweb-io · Dec 10, 2021 · 4b2276c · 4b2276c
1 parent ac592dc
commit 4b2276c
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 12 deletions.
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -712,7 +712,7 @@ export function serializeNodeWithId(
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
-    onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
+    onIframeLoad?: (iframeINode: INode, iframeId: number, node: serializedNodeWithId) => unknown;
     iframeLoadTimeout?: number;
   },
 ): serializedNodeWithId | null {
@@ -845,6 +845,7 @@ export function serializeNodeWithId(
     serializedNode.type === NodeType.Element &&
     serializedNode.tagName === 'iframe'
   ) {
+    const iframeId = serializedNode.id;
     onceIframeLoaded(
       n as HTMLIFrameElement,
       () => {
@@ -872,7 +873,8 @@ export function serializeNodeWithId(
           });
 
           if (serializedIframeNode) {
-            onIframeLoad(n as INode, serializedIframeNode);
+            // n may have lost it's __sn attribute by the time we get to this callback
+            onIframeLoad(n as INode, iframeId, serializedIframeNode);
           }
         }
       },
@@ -898,7 +900,7 @@ function snapshot(
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
-    onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
+    onIframeLoad?: (iframeINode: INode, iframeId: number, node: serializedNodeWithId) => unknown;
     iframeLoadTimeout?: number;
     keepIframeSrcFn?: KeepIframeSrcFn;
   },

diff --git a/packages/rrweb-snapshot/typings/snapshot.d.ts b/packages/rrweb-snapshot/typings/snapshot.d.ts
@@ -22,7 +22,7 @@ export declare function serializeNodeWithId(n: Node | INode, options: {
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
-    onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
+    onIframeLoad?: (iframeINode: INode, iframeId: number, node: serializedNodeWithId) => unknown;
     iframeLoadTimeout?: number;
 }): serializedNodeWithId | null;
 declare function snapshot(n: Document, options?: {
@@ -38,7 +38,7 @@ declare function snapshot(n: Document, options?: {
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
-    onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
+    onIframeLoad?: (iframeINode: INode, iframeId: number, node: serializedNodeWithId) => unknown;
     iframeLoadTimeout?: number;
     keepIframeSrcFn?: KeepIframeSrcFn;
 }): [serializedNodeWithId | null, idNodeMap];

diff --git a/packages/rrweb/src/record/iframe-manager.ts b/packages/rrweb/src/record/iframe-manager.ts
@@ -18,11 +18,11 @@ export class IframeManager {
     this.loadListener = cb;
   }
 
-  public attachIframe(iframeEl: INode, childSn: serializedNodeWithId) {
+  public attachIframe(iframeEl: INode, parentId: number, childSn: serializedNodeWithId) {
     this.mutationCb({
       adds: [
         {
-          parentId: iframeEl.__sn.id,
+          parentId: parentId,
           nextId: null,
           node: childSn,
         },

diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
@@ -236,8 +236,8 @@ function record<T = eventWithTime>(
           shadowDomManager.addShadowRoot(n.shadowRoot, document);
         }
       },
-      onIframeLoad: (iframe, childSn) => {
-        iframeManager.attachIframe(iframe, childSn);
+      onIframeLoad: (iframe, iframeid, childSn) => {
+        iframeManager.attachIframe(iframe, iframeid, childSn);
       },
       keepIframeSrcFn,
     });

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -304,8 +304,8 @@ export default class MutationBuffer {
             this.shadowDomManager.addShadowRoot(n.shadowRoot, document);
           }
         },
-        onIframeLoad: (iframe, childSn) => {
-          this.iframeManager.attachIframe(iframe, childSn);
+        onIframeLoad: (iframe, iframeId, childSn) => {
+          this.iframeManager.attachIframe(iframe, iframeId, childSn);
         },
       });
       if (sn) {

diff --git a/packages/rrweb/typings/record/iframe-manager.d.ts b/packages/rrweb/typings/record/iframe-manager.d.ts
@@ -9,5 +9,5 @@ export declare class IframeManager {
     });
     addIframe(iframeEl: HTMLIFrameElement): void;
     addLoadListener(cb: (iframeEl: HTMLIFrameElement) => unknown): void;
-    attachIframe(iframeEl: INode, childSn: serializedNodeWithId): void;
+    attachIframe(iframeEl: INode, parentId: number, childSn: serializedNodeWithId): void;
 }