check interaction target before apply

README.md

@@ -15,9 +15,7 @@ rrweb 主要由 3 部分组成：
 ## Roadmap
 
 - rrweb
-  - 避免 mutation observer 异步回调导致的时序问题
   - 处理跨域请求错误
-  - 实现更高效的高精度定时器
   - 转移至 web worker 中执行
   - 实现传输数据压缩
   - 移除 inline script

src/replay/index.ts

@@ -330,6 +330,12 @@ export class Replayer {
         }
         break;
       case IncrementalSource.MouseInteraction: {
+        /**
+         * Same as the situation of missing input target.
+         */
+        if (d.id === -1) {
+          break;
+        }
         const event = new Event(MouseInteractions[d.type].toLowerCase());
         const target = (mirror.getNode(d.id) as Node) as HTMLElement;
         target.dispatchEvent(event);
@@ -343,6 +349,12 @@ export class Replayer {
         break;
       }
       case IncrementalSource.Scroll: {
+        /**
+         * Same as the situation of missing input target.
+         */
+        if (d.id === -1) {
+          break;
+        }
         const target = mirror.getNode(d.id) as Node;
         if (target === this.iframe.contentDocument) {
           this.iframe.contentWindow!.scrollTo({
@@ -363,6 +375,15 @@ export class Replayer {
         });
         break;
       case IncrementalSource.Input: {
+        /**
+         * Input event on an unserialized node usually means the event
+         * was synchrony triggered programmatically after the node was
+         * created. This means there was not an user observable interaction
+         * and we do not need to replay it.
+         */
+        if (d.id === -1) {
+          break;
+        }
         const target: HTMLInputElement = (mirror.getNode(
           d.id,
         ) as Node) as HTMLInputElement;