improve: some websites rebuild imcomplete (#1163)

* improve: mutation.ts, loop use Set replace Array * improve: add a try-catch to utils.ts to make it robust * Create yellow-mails-cheat.md --------- Co-authored-by: Yun Feng <[email protected]>
rrweb-io · Mar 13, 2023 · 4cb4d0e · 4cb4d0e
1 parent e7f0c80
commit 4cb4d0e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/.changeset/yellow-mails-cheat.md b/.changeset/yellow-mails-cheat.md
@@ -0,0 +1,8 @@
+---
+'rrweb': patch
+---
+
+Fix: some websites rebuild imcomplete
+
+1. Some websites, addedSet in emit function is not empty, but the result converted from Array.from is empty.
+2. Some websites polyfill classList functions of HTML elements. Their implementation may throw errors and cause the snapshot to fail. I add try-catch statements to make the code robust.
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -333,7 +333,7 @@ export default class MutationBuffer {
       this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
     }
 
-    for (const n of Array.from(this.movedSet.values())) {
+    for (const n of this.movedSet) {
       if (
         isParentRemoved(this.removes, n, this.mirror) &&
         !this.movedSet.has(n.parentNode!)
@@ -343,7 +343,7 @@ export default class MutationBuffer {
       pushAdd(n);
     }
 
-    for (const n of Array.from(this.addedSet.values())) {
+    for (const n of this.addedSet) {
       if (
         !isAncestorInSet(this.droppedSet, n) &&
         !isParentRemoved(this.removes, n, this.mirror)

diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
@@ -229,11 +229,15 @@ export function isBlocked(
       : node.parentElement;
   if (!el) return false;
 
-  if (typeof blockClass === 'string') {
-    if (el.classList.contains(blockClass)) return true;
-    if (checkAncestors && el.closest('.' + blockClass) !== null) return true;
-  } else {
-    if (classMatchesRegex(el, blockClass, checkAncestors)) return true;
+  try {
+    if (typeof blockClass === 'string') {
+      if (el.classList.contains(blockClass)) return true;
+      if (checkAncestors && el.closest('.' + blockClass) !== null) return true;
+    } else {
+      if (classMatchesRegex(el, blockClass, checkAncestors)) return true;
+    }
+  } catch (e) {
+    // e
   }
   if (blockSelector) {
     if (el.matches(blockSelector)) return true;