turn some warning message into debug message

src/replay/index.ts

@@ -69,6 +69,7 @@ export class Replayer {
       loadTimeout: 0,
       skipInactive: false,
       showWarning: true,
+      showDebug: false,
     };
     this.config = Object.assign({}, defaultConfig, config);
 
@@ -445,7 +446,7 @@ export class Replayer {
         const event = new Event(MouseInteractions[d.type].toLowerCase());
         const target = mirror.getNode(d.id);
         if (!target) {
-          return this.warnNodeNotFound(d, d.id);
+          return this.debugNodeNotFound(d, d.id);
         }
         switch (d.type) {
           case MouseInteractions.Blur:
@@ -490,7 +491,7 @@ export class Replayer {
         }
         const target = mirror.getNode(d.id);
         if (!target) {
-          return this.warnNodeNotFound(d, d.id);
+          return this.debugNodeNotFound(d, d.id);
         }
         if ((target as Node) === this.iframe.contentDocument) {
           this.iframe.contentWindow!.scrollTo({
@@ -529,7 +530,7 @@ export class Replayer {
         }
         const target = mirror.getNode(d.id);
         if (!target) {
-          return this.warnNodeNotFound(d, d.id);
+          return this.debugNodeNotFound(d, d.id);
         }
         try {
           ((target as Node) as HTMLInputElement).checked = d.isChecked;
@@ -577,7 +578,7 @@ export class Replayer {
     this.mouse.style.top = `${y}px`;
     const target = mirror.getNode(id);
     if (!target) {
-      return this.warnNodeNotFound(d, id);
+      return this.debugNodeNotFound(d, id);
     }
     this.hoverElements((target as Node) as Element);
   }
@@ -621,4 +622,18 @@ export class Replayer {
     }
     console.warn(REPLAY_CONSOLE_PREFIX, `Node with id '${id}' not found in`, d);
   }
+
+  private debugNodeNotFound(d: incrementalData, id: number) {
+    /**
+     * There may me some valid scenes of node not being found.
+     * Because DOM events are macrotask and MutationObserver callback
+     * is microtask, so events fired on a removed DOM may emit
+     * snapshots in the reverse order.
+     */
+    if (!this.config.showDebug) {
+      return;
+    }
+    // tslint:disable-next-line: no-console
+    console.log(REPLAY_CONSOLE_PREFIX, `Node with id '${id}' not found in`, d);
+  }
 }

src/types.ts

@@ -231,6 +231,7 @@ export type playerConfig = {
   loadTimeout: number;
   skipInactive: Boolean;
   showWarning: Boolean;
+  showDebug: Boolean;
 };
 
 export type playerMetaData = {