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 c3a3f335b1..809e466e3c 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 1ec8c3bd6e..e663b205f8 100644 --- 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 index e5f19cb351..affee941b2 100644 --- 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 index bf31d8d253..51d55c82fb 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, @@ -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;