Add option to block animation on <title> tag

.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

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<{

packages/rrweb/src/record/index.ts

@@ -174,6 +174,7 @@
           // as they destroy some (hidden) info:
           headMetaAuthorship: _slimDOMOptions === 'all',
           headMetaDescKeywords: _slimDOMOptions === 'all',
+          headTitleMutations: _slimDOMOptions === 'all',
         }
       : _slimDOMOptions
       ? _slimDOMOptions
@@ -553,7 +554,7 @@
             plugins
               ?.filter((p) => p.observer)
               ?.map((p) => ({
                 observer: p.observer!,
                 options: p.options,
                 callback: (payload: object) =>
                   wrappedEmit({
@@ -571,7 +572,7 @@
 
     iframeManager.addLoadListener((iframeEl) => {
       try {
         handlers.push(observe(iframeEl.contentDocument!));
       } catch (error) {
         // TODO: handle internal error
         console.warn(error);

packages/rrweb/src/record/mutation.ts

@@ -348,13 +348,13 @@
     };
 
     while (this.mapRemoves.length) {
       this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
     }
 
     for (const n of this.movedSet) {
       if (
         isParentRemoved(this.removes, n, this.mirror) &&
         !this.movedSet.has(n.parentNode!)
       ) {
         continue;
       }
@@ -530,7 +530,7 @@
   };
 
   private processMutation = (m: mutationRecord) => {
-    if (isIgnored(m.target, this.mirror)) {
+    if (isIgnored(m.target, this.mirror, this.slimDOMOptions)) {
       return;
     }
     switch (m.type) {
@@ -688,7 +688,7 @@
             : 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;
@@ -747,7 +747,7 @@
     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);

packages/rrweb/src/utils.ts

@@ -9,7 +9,7 @@
   DeprecatedMirror,
   textMutation,
 } from '@rrweb/types';
-import type { IMirror, Mirror } from 'rrweb-snapshot';
+import type { IMirror, Mirror, SlimDOMOptions } from 'rrweb-snapshot';
 import { isShadowRoot, IGNORED_NODE, classMatchesRegex } from 'rrweb-snapshot';
 import type { RRNode, RRIFrameElement } from 'rrdom';
 
@@ -30,7 +30,7 @@
   'now you can use replayer.getMirror() to access the mirror instance of a replayer,' +
   '\r\n' +
   'or you can use record.mirror to access the mirror instance during recording.';
 /** @deprecated */
 export let _mirror: DeprecatedMirror = {
   map: {},
   getId() {
@@ -114,7 +114,7 @@
           set(value) {
             // put hooked setter into event loop to avoid of set latency
             setTimeout(() => {
               d.set!.call(this, value);
             }, 0);
             if (original && original.set) {
               original.set.call(this, value);
@@ -127,7 +127,7 @@
 
 // copy from https://github.com/getsentry/sentry-javascript/blob/b2109071975af8bf0316d3b5b38f519bdaf5dc15/packages/utils/src/object.ts
 export function patch(
   source: { [key: string]: any },
   name: string,
   replacement: (...args: unknown[]) => unknown,
 ): () => void {
@@ -276,7 +276,17 @@
   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;