From 4b2276cba6720f52b66b6a24cae4791f9d4b294c Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 7 Oct 2021 14:43:20 +0100 Subject: [PATCH] Ensure the iframe id survives the `onceIframeLoaded` process; for some reason I'm seeing the `__sn` attribute on the iframe DOM element disappearing with the callback --- packages/rrweb-snapshot/src/snapshot.ts | 8 +++++--- packages/rrweb-snapshot/typings/snapshot.d.ts | 4 ++-- packages/rrweb/src/record/iframe-manager.ts | 4 ++-- packages/rrweb/src/record/index.ts | 4 ++-- packages/rrweb/src/record/mutation.ts | 4 ++-- packages/rrweb/typings/record/iframe-manager.d.ts | 2 +- 6 files changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts index f32c794b49..f0d2a187c8 100644 --- 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 index 9ccb147aa1..f2d8035055 100644 --- 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 index 1825c1786f..6b67dd41a9 100644 --- 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 index 5930913a8a..6b2340180b 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -236,8 +236,8 @@ function record( 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 index 924c58cd2c..917f71565c 100644 --- 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 index 4300a7abce..06825bbb13 100644 --- 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; }