fix: reset mirror when stopping

packages/rrweb/src/record/iframe-manager.ts

@@ -333,5 +333,8 @@ export class IframeManager {
       contentWindow.removeEventListener('message', handler);
     });
     this.nestedIframeListeners.clear();
+
+    this.crossOriginIframeMirror.reset();
+    this.crossOriginIframeStyleMirror.reset();
   }
 }

packages/rrweb/src/record/index.ts

@@ -557,7 +557,7 @@
             plugins
               ?.filter((p) => p.observer)
               ?.map((p) => ({
                 observer: p.observer!,
                 options: p.options,
                 callback: (payload: object) =>
                   wrappedEmit({
@@ -575,7 +575,7 @@
 
     const loadListener = (iframeEl: HTMLIFrameElement) => {
       try {
         handlers.push(observe(iframeEl.contentDocument!));
       } catch (error) {
         // TODO: handle internal error
         console.warn(error);
@@ -622,6 +622,7 @@
       processedNodeManager.destroy();
       iframeManager.removeLoadListener();
       iframeManager.destroy();
+      mirror.reset();
       recording = false;
       unregisterErrorHandler();
     };

packages/rrweb/src/record/mutation.ts

@@ -256,6 +256,12 @@ export default class MutationBuffer {
     this.canvasManager.reset();
   }
 
+  public destroy() {
+    while (this.mapRemoves.length) {
+      this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
+    }
+  }
+
   public processMutations = (mutations: mutationRecord[]) => {
     mutations.forEach(this.processMutation); // adds mutations to the buffer
     this.emit(); // clears buffer if not locked/frozen

packages/rrweb/src/record/observer.ts

@@ -1349,6 +1349,7 @@ export function initObservers(
   }
 
   return callbackWrapper(() => {
+    mutationBuffers.forEach((b) => b.destroy());
     mutationBuffers.forEach((b) => b.reset());
     mutationObserver?.disconnect();
     mousemoveHandler();

packages/rrweb/src/record/observers/canvas/canvas-manager.ts

@@ -34,10 +34,20 @@ export class CanvasManager {
   private resetObservers?: listenerHandler;
   private frozen = false;
   private locked = false;
+  private rafIdTimestamp: number | null = null;
+  private rafIdFlush: number | null = null;
 
   public reset() {
     this.pendingCanvasMutations.clear();
     this.resetObservers && this.resetObservers();
+    if (this.rafIdTimestamp !== null) {
+      cancelAnimationFrame(this.rafIdTimestamp);
+      this.rafIdTimestamp = null;
+    }
+    if (this.rafIdFlush !== null) {
+      cancelAnimationFrame(this.rafIdFlush);
+      this.rafIdFlush = null;
+    }
   }
 
   public freeze() {
@@ -296,15 +306,17 @@ export class CanvasManager {
   }
 
   private startPendingCanvasMutationFlusher() {
-    requestAnimationFrame(() => this.flushPendingCanvasMutations());
+    this.rafIdFlush = requestAnimationFrame(() =>
+      this.flushPendingCanvasMutations(),
+    );
   }
 
   private startRAFTimestamping() {
     const setLatestRAFTimestamp = (timestamp: DOMHighResTimeStamp) => {
       this.rafStamps.latestId = timestamp;
-      requestAnimationFrame(setLatestRAFTimestamp);
+      this.rafIdTimestamp = requestAnimationFrame(setLatestRAFTimestamp);
     };
-    requestAnimationFrame(setLatestRAFTimestamp);
+    this.rafIdTimestamp = requestAnimationFrame(setLatestRAFTimestamp);
   }
 
   flushPendingCanvasMutations() {
@@ -314,7 +326,9 @@ export class CanvasManager {
         this.flushPendingCanvasMutationFor(canvas, id);
       },
     );
-    requestAnimationFrame(() => this.flushPendingCanvasMutations());
+    this.rafIdFlush = requestAnimationFrame(() =>
+      this.flushPendingCanvasMutations(),
+    );
   }
 
   flushPendingCanvasMutationFor(canvas: HTMLCanvasElement, id: number) {