From 528b8373a034c482789867284747e9875658370e Mon Sep 17 00:00:00 2001 From: Yanzhen Yu Date: Wed, 1 Apr 2026 12:00:00 +0800 Subject: [PATCH] upgrade to rrweb-snapshot v1.0 --- package.json | 2 +- src/record/index.ts | 13 +++++-------- src/record/mutation.ts | 25 ++++++++++++------------ src/record/observer.ts | 6 +++--- src/replay/index.ts | 43 ++++++++++++++++++++++++------------------ tslint.json | 4 +++- yarn.lock | 8 ++++---- 7 files changed, 53 insertions(+), 48 deletions(-) diff --git a/package.json b/package.json index 29aaf720..0037b1cb 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,6 @@ "@xstate/fsm": "^1.4.0", "mitt": "^1.1.3", "pako": "^1.0.11", - "rrweb-snapshot": "^0.8.4" + "rrweb-snapshot": "^1.0.0" } } diff --git a/src/record/index.ts b/src/record/index.ts index 149c2cf6..add17d71 100644 --- a/src/record/index.ts +++ b/src/record/index.ts @@ -86,8 +86,8 @@ function record( mutationBuffer.isFrozen() && e.type !== EventType.FullSnapshot && !( - e.type == EventType.IncrementalSnapshot && - e.data.source == IncrementalSource.Mutation + e.type === EventType.IncrementalSnapshot && + e.data.source === IncrementalSource.Mutation ) ) { // we've got a user initiated event so first we need to apply @@ -128,15 +128,12 @@ function record( let wasFrozen = mutationBuffer.isFrozen(); mutationBuffer.freeze(); // don't allow any mirror modifications during snapshotting - const [node, idNodeMap] = snapshot( - document, + const [node, idNodeMap] = snapshot(document, { blockClass, inlineStylesheet, - maskInputOptions, - // TODO: bypass slim DOM options - false, + maskAllInputs: maskInputOptions, recordCanvas, - ); + }); if (!node) { return console.warn('Failed to snapshot the document'); diff --git a/src/record/mutation.ts b/src/record/mutation.ts index d537b2be..897fdde3 100644 --- a/src/record/mutation.ts +++ b/src/record/mutation.ts @@ -209,18 +209,17 @@ export default class MutationBuffer { adds.push({ parentId, nextId, - node: serializeNodeWithId( - n, - document, - mirror.map, - this.blockClass, - null, - true, - this.inlineStylesheet, - this.maskInputOptions, - undefined, - this.recordCanvas, - )!, + node: serializeNodeWithId(n, { + doc: document, + map: mirror.map, + blockClass: this.blockClass, + blockSelector: null, + skipChild: true, + inlineStylesheet: this.inlineStylesheet, + maskInputOptions: this.maskInputOptions, + slimDOMOptions: {}, + recordCanvas: this.recordCanvas, + })!, }); }; @@ -305,7 +304,7 @@ export default class MutationBuffer { // attribute mutation's id was not in the mirror map means the target node has been removed .filter((attribute) => mirror.has(attribute.id)), removes: this.removes, - adds: adds, + adds, }; // payload may be empty if the mutations happened in some blocked elements if ( diff --git a/src/record/observer.ts b/src/record/observer.ts index 74259609..78102db3 100644 --- a/src/record/observer.ts +++ b/src/record/observer.ts @@ -57,7 +57,7 @@ function initMutationObserver( recordCanvas, ); const observer = new MutationObserver( - mutationBuffer.processMutations.bind(mutationBuffer) + mutationBuffer.processMutations.bind(mutationBuffer), ); observer.observe(document, { attributes: true, @@ -254,8 +254,8 @@ function initInputObserver( ] || maskInputOptions[type as keyof MaskInputOptions] ) { - if(maskInputFn) { - text = maskInputFn(text) + if (maskInputFn) { + text = maskInputFn(text); } else { text = '*'.repeat(text.length); } diff --git a/src/replay/index.ts b/src/replay/index.ts index 9b59df54..7888f768 100644 --- a/src/replay/index.ts +++ b/src/replay/index.ts @@ -232,7 +232,9 @@ export class Replayer { } if (typeof config.mouseTail !== 'undefined') { if (config.mouseTail === false) { - this.mouseTail && (this.mouseTail.style.display = 'none'); + if (this.mouseTail) { + this.mouseTail.style.display = 'none'; + } } else { if (!this.mouseTail) { this.mouseTail = document.createElement('canvas'); @@ -498,17 +500,20 @@ export class Replayer { ); } this.legacy_missingNodeRetryMap = {}; - mirror.map = rebuild(event.data.node, this.iframe.contentDocument)[1]; + mirror.map = rebuild(event.data.node, { + doc: this.iframe.contentDocument, + })[1]; const styleEl = document.createElement('style'); const { documentElement, head } = this.iframe.contentDocument; documentElement!.insertBefore(styleEl, head); const injectStylesRules = getInjectStyleRules( this.config.blockClass, ).concat(this.config.insertStyleRules); - if (this.config.pauseAnimation) + if (this.config.pauseAnimation) { injectStylesRules.push( 'html.rrweb-paused * { animation-play-state: paused !important; }', ); + } if (!this.service.state.matches('playing')) { this.iframe.contentDocument .getElementsByTagName('html')[0] @@ -809,7 +814,7 @@ export class Replayer { domParent!.appendChild(target); } - const styleSheet = styleEl.sheet; + const styleSheet: CSSStyleSheet = styleEl.sheet!; if (d.adds) { d.adds.forEach(({ rule, index }) => { @@ -920,10 +925,10 @@ export class Replayer { if (realParent && realParent.contains(target)) { realParent.removeChild(target); } else if (this.fragmentParentMap.has(target)) { - /** - * the target itself is a fragment document and it's not in the dom - * so we should remove the real target from its parent - */ + /** + * the target itself is a fragment document and it's not in the dom + * so we should remove the real target from its parent + */ const realTarget = this.fragmentParentMap.get(target)!; parent.removeChild(realTarget); this.fragmentParentMap.delete(target); @@ -933,6 +938,7 @@ export class Replayer { } }); + // tslint:disable-next-line: variable-name const legacy_missingNodeMap: missingNodeMap = { ...this.legacy_missingNodeRetryMap, }; @@ -1000,12 +1006,12 @@ export class Replayer { return queue.push(mutation); } - const target = buildNodeWithSN( - mutation.node, - this.iframe.contentDocument, - mirror.map, - true, - ) as Node; + const target = buildNodeWithSN(mutation.node, { + doc: this.iframe.contentDocument, + map: mirror.map, + skipChild: true, + hackCss: true, + }) as Node; // legacy data, we should not have -1 siblings any more if (mutation.previousId === -1 || mutation.nextId === -1) { @@ -1282,8 +1288,9 @@ export class Replayer { }); } const children = parentElement.children; - for (let i = 0; i < children.length; i++) - this.storeState((children[i] as unknown) as INode); + for (const child of Array.from(children)) { + this.storeState((child as unknown) as INode); + } } } } @@ -1305,8 +1312,8 @@ export class Replayer { this.elementStateMap.delete(parent); } const children = parentElement.children; - for (let i = 0; i < children.length; i++) { - this.restoreState((children[i] as unknown) as INode); + for (const child of Array.from(children)) { + this.restoreState((child as unknown) as INode); } } } diff --git a/tslint.json b/tslint.json index ad36979f..4511e9b4 100644 --- a/tslint.json +++ b/tslint.json @@ -19,7 +19,9 @@ "only-arrow-functions": false, "max-line-length": false, "no-empty": false, - "max-classes-per-file": false + "max-classes-per-file": false, + "semicolon": false, + "trailing-comma": false }, "rulesDirectory": [] } diff --git a/yarn.lock b/yarn.lock index c412b845..55ffd74e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2749,10 +2749,10 @@ rollup@^2.3.3: optionalDependencies: fsevents "~2.1.2" -rrweb-snapshot@^0.8.4: - version "0.8.4" - resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-0.8.4.tgz#3f8bf1270975f9dfad60321a29067d2ea39e3c39" - integrity sha512-6zY4lEUpA6qEd/ArAo1crWefxsmiXMuK/fTToGmsW+ehR8/pglxTsqpMPEkgQO9uBUIWIUE9I3CyIQkigmt4ug== +rrweb-snapshot@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/rrweb-snapshot/-/rrweb-snapshot-1.0.0.tgz#5736e0f14f3bfa5c9cad462e8178ae9b0ca9ce53" + integrity sha512-9mzEqbFE2OCe5aTzFFA1gKTqwvx2o2X2bMARpOWm7ST4cA1/xBbq4+wHia35CIn6EmMougaBVgUmah7QDJHXlQ== run-async@^2.2.0: version "2.4.1"