Add option to block animation on <title> tag which can generate massi…

…ve recordings on some websites (think scrolling title tag)
rrweb-io · Nov 26, 2021 · ff98727 · ff98727
1 parent 1f26708
commit ff98727
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
@@ -110,6 +110,7 @@ function record<T = eventWithTime>(
           // as they destroy some (hidden) info:
           headMetaAuthorship: _slimDOMOptions === 'all',
           headMetaDescKeywords: _slimDOMOptions === 'all',
+          headTitleMutations: _slimDOMOptions === 'all',  // block title tag 'animation' which can generate a lot of mutations that aren't usually displayed in replayers
         }
       : _slimDOMOptions
       ? _slimDOMOptions

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -429,7 +429,7 @@ export default class MutationBuffer {
   };
 
   private processMutation = (m: mutationRecord) => {
-    if (isIgnored(m.target)) {
+    if (isIgnored(m.target, this.slimDOMOptions)) {
       return;
     }
     switch (m.type) {
@@ -529,7 +529,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(m.target, this.blockClass) || isIgnored(n)) {
+          if (isBlocked(m.target, this.blockClass) || isIgnored(n, this.slimDOMOptions)) {
             return;
           }
           // removed node has not been serialized yet, just remove it from the Set
@@ -578,7 +578,7 @@ export default class MutationBuffer {
       return;
     }
     if (isINode(n)) {
-      if (isIgnored(n)) {
+      if (isIgnored(n, this.slimDOMOptions)) {
         return;
       }
       this.movedSet.add(n);

diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
@@ -247,7 +247,13 @@ export function isBlocked(node: Node | null, blockClass: blockClass): boolean {
   return isBlocked(node.parentNode, blockClass);
 }
 
-export function isIgnored(n: Node | INode): boolean {
+export function isIgnored(n: Node | INode, slimDOMOptions: SlimDOMOptions): boolean {
+  if ((n as Node).tagName === 'TITLE' && slimDOMOptions.headTitleMutations) {
+    // we do this check here but not in rrweb-snapshot
+    // to block mutations/animations on the title.
+    // the headTitleMutations options isn't intended to block recording of the initial value
+    return true;
+  }
   if ('__sn' in n) {
     return (n as INode).__sn.id === IGNORED_NODE;
   }