diff --git a/.changeset/title-deanimate-option.md b/.changeset/title-deanimate-option.md new file mode 100644 index 0000000000..d568615f18 --- /dev/null +++ b/.changeset/title-deanimate-option.md @@ -0,0 +1,6 @@ +--- +"rrweb-snapshot": patch +"rrweb": patch +--- + +Add slimDOM option to block animation on 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 index 1abfe4d6c0..e4538a827a 100644 --- 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 index 080cf14549..ffc6f88b6d 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -174,6 +174,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 index d96fab315d..a798441969 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -530,7 +530,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) { @@ -688,7 +688,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; @@ -747,7 +747,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 index f426689d2f..b7fa12506e 100644 --- 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, classMatchesRegex } from 'rrweb-snapshot'; import type { RRNode, RRIFrameElement } from 'rrdom'; @@ -276,7 +276,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;