John/hig-1121-add-rrweb-patch-for-element-blocking (#49)

highlight · Sep 13, 2021 · e0cede2 · e0cede2
1 parent 0a6f7ff
commit e0cede2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "0.12.9",
+  "version": "0.12.10",
   "description": "record and replay the web",
   "scripts": {
     "test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",

diff --git a/src/record/mutation.ts b/src/record/mutation.ts
@@ -264,9 +264,6 @@ export default class MutationBuffer {
         ns = ns && ns.nextSibling;
         nextId = ns && this.mirror.getId((ns as unknown) as INode);
       }
-      if (nextId === -1 && isBlocked(n.nextSibling, this.blockClass)) {
-        nextId = null;
-      }
       return nextId;
     };
     const pushAdd = (n: Node) => {
@@ -506,11 +503,7 @@ export default class MutationBuffer {
           const parentId = isShadowRoot(m.target)
             ? this.mirror.getId((m.target.host as unknown) as INode)
             : this.mirror.getId(m.target as INode);
-          if (
-            isBlocked(n, this.blockClass) ||
-            isBlocked(m.target, this.blockClass) ||
-            isIgnored(n)
-          ) {
+          if (isBlocked(m.target, this.blockClass) || isIgnored(n)) {
             return;
           }
           // removed node has not been serialized yet, just remove it from the Set
@@ -554,9 +547,7 @@ export default class MutationBuffer {
   };
 
   private genAdds = (n: Node | INode, target?: Node | INode) => {
-    if (isBlocked(n, this.blockClass)) {
-      return;
-    }
+    // parent was blocked, so we can ignore this node
     if (target && isBlocked(target, this.blockClass)) {
       return;
     }
@@ -576,7 +567,10 @@ export default class MutationBuffer {
       this.addedSet.add(n);
       this.droppedSet.delete(n);
     }
-    n.childNodes.forEach((childN) => this.genAdds(childN));
+    // if this node is blocked `serializeNode` will turn it into a placeholder element
+    // but we have to remove it's children otherwise they will be added as placeholders too
+    if (!isBlocked(n, this.blockClass))
+      n.childNodes.forEach((childN) => this.genAdds(childN));
   };
 }
 

diff --git a/src/record/observer.ts b/src/record/observer.ts
@@ -60,6 +60,8 @@ type WindowWithAngularZone = Window & {
 
 export const mutationBuffers: MutationBuffer[] = [];
 
+const isCSSGroupingRuleSupported = typeof CSSGroupingRule !== 'undefined';
+
 function getEventTarget(event: Event): EventTarget | null {
   try {
     if ('composedPath' in event) {
@@ -500,7 +502,10 @@ function initInputObserver(
 function getNestedCSSRulePositions(rule: CSSRule): number[] {
   const positions: number[] = [];
   function recurse(childRule: CSSRule, pos: number[]) {
-    if (childRule.parentRule instanceof CSSGroupingRule) {
+    if (
+      isCSSGroupingRuleSupported &&
+      childRule.parentRule instanceof CSSGroupingRule
+    ) {
       const rules = Array.from(
         (childRule.parentRule as CSSGroupingRule).cssRules,
       );
@@ -544,6 +549,13 @@ function initStyleSheetObserver(
     return deleteRule.apply(this, arguments);
   };
 
+  if (!isCSSGroupingRuleSupported) {
+    return () => {
+      CSSStyleSheet.prototype.insertRule = insertRule;
+      CSSStyleSheet.prototype.deleteRule = deleteRule;
+    };
+  }
+
   const groupingInsertRule = CSSGroupingRule.prototype.insertRule;
   CSSGroupingRule.prototype.insertRule = function (
     rule: string,