fix duplicated shadow dom (#1095)

* fix: duplicated elements in shadow doms

clean observers before taking new full snapshots

* add checker for replayer to make it stable when data has duplicated nodes

* apply review suggestions

* add change log

* Apply formatting changes

* update prettier to fit the master branch

---------

Co-authored-by: Mark-Fenng <Mark-Fenng@users.noreply.github.com>

packages/rrweb-snapshot/src/rebuild.ts

@@ -8,7 +8,7 @@ import {
   attributes,
   legacyAttributes,
 } from './types';
-import { isElement, Mirror } from './utils';
+import { isElement, Mirror, isNodeMetaEqual } from './utils';
 
 const tagMap: tagMap = {
   script: 'noscript',
@@ -364,6 +364,19 @@ export function buildNodeWithSN(
     afterAppend,
     cache,
   } = options;
+  /**
+   * Add a check to see if the node is already in the mirror. If it is, we can skip the whole process.
+   * This situation (duplicated nodes) can happen when recorder has some unfixed bugs and the same node is recorded twice. Or something goes wrong when saving or transferring event data.
+   * Duplicated node creation may cause unexpected errors in replayer. This check tries best effort to prevent the errors.
+   */
+  if (mirror.has(n.id)) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const nodeInMirror = mirror.getNode(n.id)!;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const meta = mirror.getMeta(nodeInMirror)!;
+    // For safety concern, check if the node in mirror is the same as the node we are trying to build
+    if (isNodeMetaEqual(meta, n)) return mirror.getNode(n.id);
+  }
   let node = buildNode(n, { doc, hackCss, cache });
   if (!node) {
     return null;

packages/rrweb-snapshot/src/utils.ts

@@ -5,6 +5,12 @@ import {
   nodeMetaMap,
   IMirror,
   serializedNodeWithId,
+  serializedNode,
+  NodeType,
+  documentNode,
+  documentTypeNode,
+  textNode,
+  elementNode,
 } from './types';
 
 export function isElement(n: Node): n is Element {
@@ -213,3 +219,30 @@ export function is2DCanvasBlank(canvas: HTMLCanvasElement): boolean {
   }
   return true;
 }
+
+export function isNodeMetaEqual(a: serializedNode, b: serializedNode): boolean {
+  if (!a || !b || a.type !== b.type) return false;
+  if (a.type === NodeType.Document)
+    return a.compatMode === (b as documentNode).compatMode;
+  else if (a.type === NodeType.DocumentType)
+    return (
+      a.name === (b as documentTypeNode).name &&
+      a.publicId === (b as documentTypeNode).publicId &&
+      a.systemId === (b as documentTypeNode).systemId
+    );
+  else if (
+    a.type === NodeType.Comment ||
+    a.type === NodeType.Text ||
+    a.type === NodeType.CDATA
+  )
+    return a.textContent === (b as textNode).textContent;
+  else if (a.type === NodeType.Element)
+    return (
+      a.tagName === (b as elementNode).tagName &&
+      JSON.stringify(a.attributes) ===
+        JSON.stringify((b as elementNode).attributes) &&
+      a.isSVG === (b as elementNode).isSVG &&
+      a.needBlock === (b as elementNode).needBlock
+    );
+  return false;
+}