Add option to block animation on <title> tag (rrweb-io#760)

* Add option to block animation on <title> tag which can generate massive recordings on some websites (think scrolling title tag) * Add new option to slimDOMOptions type with tsdoc as suggested by Justin
pendo-io · Jul 29, 2024 · 2bd51a3 · 2bd51a3
1 parent 599fd8d
commit 2bd51a3
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 5 deletions.
diff --git a/.changeset/title-deanimate-option.md b/.changeset/title-deanimate-option.md
@@ -0,0 +1,6 @@
+---
+"rrweb-snapshot": patch
+"rrweb": patch
+---
+
+Add slimDOM option to block animation on <title> tag; enabled when the 'all' value is used for slimDOM
diff --git a/packages/rrweb-snapshot/src/types.ts b/packages/rrweb-snapshot/src/types.ts
@@ -169,6 +169,10 @@ export type SlimDOMOptions = Partial<{
   headMetaHttpEquiv: boolean;
   headMetaAuthorship: boolean;
   headMetaVerification: boolean;
+  /**
+   * blocks title tag 'animations' which can generate a lot of mutations that aren't usually displayed in replayers
+   **/
+  headTitleMutations: boolean;
 }>;
 
 export type DataURLOptions = Partial<{

diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
@@ -175,6 +175,7 @@ function record<T = eventWithTime>(
           // as they destroy some (hidden) info:
           headMetaAuthorship: _slimDOMOptions === 'all',
           headMetaDescKeywords: _slimDOMOptions === 'all',
+          headTitleMutations: _slimDOMOptions === 'all',
         }
       : _slimDOMOptions
       ? _slimDOMOptions

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -567,7 +567,7 @@ export default class MutationBuffer {
   };
 
   private processMutation = (m: mutationRecord) => {
-    if (isIgnored(m.target, this.mirror)) {
+    if (isIgnored(m.target, this.mirror, this.slimDOMOptions)) {
       return;
     }
     switch (m.type) {
@@ -733,7 +733,7 @@ export default class MutationBuffer {
             : this.mirror.getId(m.target);
           if (
             isBlocked(m.target, this.blockClass, this.blockSelector, false) ||
-            isIgnored(n, this.mirror) ||
+            isIgnored(n, this.mirror, this.slimDOMOptions) ||
             !isSerialized(n, this.mirror)
           ) {
             return;
@@ -793,7 +793,7 @@ export default class MutationBuffer {
     if (this.addedSet.has(n) || this.movedSet.has(n)) return;
 
     if (this.mirror.hasNode(n)) {
-      if (isIgnored(n, this.mirror)) {
+      if (isIgnored(n, this.mirror, this.slimDOMOptions)) {
         return;
       }
       this.movedSet.add(n);

diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
@@ -9,7 +9,7 @@ import type {
   DeprecatedMirror,
   textMutation,
 } from '@rrweb/types';
-import type { IMirror, Mirror } from 'rrweb-snapshot';
+import type { IMirror, Mirror, SlimDOMOptions } from 'rrweb-snapshot';
 import {
   isShadowRoot,
   IGNORED_NODE,
@@ -298,7 +298,17 @@ export function isSerialized(n: Node, mirror: Mirror): boolean {
   return mirror.getId(n) !== -1;
 }
 
-export function isIgnored(n: Node, mirror: Mirror): boolean {
+export function isIgnored(
+  n: Node,
+  mirror: Mirror,
+  slimDOMOptions: SlimDOMOptions,
+): boolean {
+  if ((n as Element).tagName === 'TITLE' && slimDOMOptions.headTitleMutations) {
+    // we do this check here but not in rrweb-snapshot
+    // to block mutations/animations on the title.
+    // the headTitleMutations option isn't intended to block recording of the initial value
+    return true;
+  }
   // The main part of the slimDOM check happens in
   // rrweb-snapshot::serializeNodeWithId
   return mirror.getId(n) === IGNORED_NODE;