From 577bad28c95260023efa22f690d5fb4802d0798f Mon Sep 17 00:00:00 2001 From: Yun Feng Date: Fri, 16 Sep 2022 15:01:51 +1000 Subject: [PATCH 1/2] fix: some shadow doms are observed multiple times and cause duplicate elements in the replayer --- packages/rrweb/src/record/shadow-dom-manager.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/rrweb/src/record/shadow-dom-manager.ts b/packages/rrweb/src/record/shadow-dom-manager.ts index b2aeae01b2..bfff380ef8 100644 --- a/packages/rrweb/src/record/shadow-dom-manager.ts +++ b/packages/rrweb/src/record/shadow-dom-manager.ts @@ -17,6 +17,7 @@ type BypassOptions = Omit< }; export class ShadowDomManager { + private shadowDoms = new WeakSet(); private mutationCb: mutationCallBack; private scrollCb: scrollCallback; private bypassOptions: BypassOptions; @@ -55,6 +56,8 @@ export class ShadowDomManager { public addShadowRoot(shadowRoot: ShadowRoot, doc: Document) { if (!isNativeShadowDom(shadowRoot)) return; + if (this.shadowDoms.has(shadowRoot)) return; + this.shadowDoms.add(shadowRoot); initMutationObserver( { ...this.bypassOptions, @@ -106,5 +109,6 @@ export class ShadowDomManager { public reset() { this.restorePatches.forEach((restorePatch) => restorePatch()); + this.shadowDoms = new WeakSet(); } } From e4a9356d971e711524a7c8ad8d6a639478515c18 Mon Sep 17 00:00:00 2001 From: Yun Feng Date: Fri, 16 Sep 2022 18:14:48 +1000 Subject: [PATCH 2/2] fix: in the live mode, the page https://bugs.chromium.org/p/chromium/issues/detail?id=1352333 has duplicate shadow doms in the replayer --- packages/rrweb/scripts/stream.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/rrweb/scripts/stream.js b/packages/rrweb/scripts/stream.js index 6cd099da22..394c23e9e0 100644 --- a/packages/rrweb/scripts/stream.js +++ b/packages/rrweb/scripts/stream.js @@ -227,6 +227,9 @@ void (async () => { 'window.__IS_RECORDING__', ); if (!isRecording) { + // When the page navigates, I notice this event is emitted twice so that there are two recording processes running in a single page. + // Set recording flag True ASAP to prevent recording twice. + await recordedPage.evaluate('window.__IS_RECORDING__ = true'); await startRecording(recordedPage, serverURL); } });