From 0dff4e13fa4456834684535203ce5917d17d407f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 1 Apr 2026 12:00:00 +0800
Subject: [PATCH] close #320 use emitter handler to catch before load state

---
 src/replay/index.ts   | 30 ++++++++++++++++++++++--------
 src/replay/machine.ts |  4 ++--
 src/types.ts          |  1 +
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index cadc8b07..1d45e53c 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -403,7 +403,7 @@ export class Replayer {
 
   private rebuildFullSnapshot(
     event: fullSnapshotEvent & { timestamp: number },
-    isSync: boolean = false
+    isSync: boolean = false,
   ) {
     if (!this.iframe.contentDocument) {
       return console.warn('Looks like your replayer has been destroyed.');
@@ -426,7 +426,9 @@ export class Replayer {
       (styleEl.sheet! as CSSStyleSheet).insertRule(injectStylesRules[idx], idx);
     }
     this.emitter.emit(ReplayerEvents.FullsnapshotRebuilded, event);
-    if (!isSync) this.waitForStylesheetLoad();
+    if (!isSync) {
+      this.waitForStylesheetLoad();
+    }
     if (this.config.UNSAFE_replayCanvas) {
       this.preloadAllImages();
     }
@@ -441,9 +443,15 @@ export class Replayer {
       const unloadSheets: Set<HTMLLinkElement> = new Set();
       let timer: number;
       let beforeLoadState = this.service.state;
-      const { unsubscribe } = this.service.subscribe((state) => {
-        beforeLoadState = state;
-      });
+      const stateHandler = () => {
+        beforeLoadState = this.service.state;
+      };
+      this.emitter.on(ReplayerEvents.Start, stateHandler);
+      this.emitter.on(ReplayerEvents.Pause, stateHandler);
+      const unsubscribe = () => {
+        this.emitter.off(ReplayerEvents.Start, stateHandler);
+        this.emitter.off(ReplayerEvents.Pause, stateHandler);
+      };
       head
         .querySelectorAll('link[rel="stylesheet"]')
         .forEach((css: HTMLLinkElement) => {
@@ -487,9 +495,15 @@ export class Replayer {
    */
   private preloadAllImages() {
     let beforeLoadState = this.service.state;
-    const { unsubscribe } = this.service.subscribe((state) => {
-      beforeLoadState = state;
-    });
+    const stateHandler = () => {
+      beforeLoadState = this.service.state;
+    };
+    this.emitter.on(ReplayerEvents.Start, stateHandler);
+    this.emitter.on(ReplayerEvents.Pause, stateHandler);
+    const unsubscribe = () => {
+      this.emitter.off(ReplayerEvents.Start, stateHandler);
+      this.emitter.off(ReplayerEvents.Pause, stateHandler);
+    };
     let count = 0;
     let resolved = 0;
     for (const event of this.service.state.context.events) {
diff --git a/src/replay/machine.ts b/src/replay/machine.ts
index bee1602f..f4cf39d4 100644
--- a/src/replay/machine.ts
+++ b/src/replay/machine.ts
@@ -116,8 +116,8 @@ export function createPlayerService(
             },
             TO_LIVE: {
               target: 'live',
-              actions: ['startLive']
-            }
+              actions: ['startLive'],
+            },
           },
         },
         live: {
diff --git a/src/types.ts b/src/types.ts
index d1940d51..10a141b7 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -409,6 +409,7 @@ export type Handler = (event?: unknown) => void;
 export type Emitter = {
   on(type: string, handler: Handler): void;
   emit(type: string, event?: unknown): void;
+  off(type: string, handler: Handler): void;
 };
 
 export type Arguments<T> = T extends (...payload: infer U) => unknown