fix duplicate shadow doms in the recorder (#1002)

* fix: some shadow doms are observed multiple times and cause duplicate elements in the replayer

* fix: in the live mode, the page https://bugs.chromium.org/p/chromium/issues/detail?id=1352333 has duplicate shadow doms in the replayer

Author: YunFeng0817

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);
       }
     });

packages/rrweb/src/record/shadow-dom-manager.ts

@@ -17,6 +17,7 @@ type BypassOptions = Omit<
 };
 
 export class ShadowDomManager {
+  private shadowDoms = new WeakSet<ShadowRoot>();
   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();
   }
 }