From 15b41f734d874517a9866468581283366b843d3a Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Tue, 26 Sep 2023 16:57:08 +0100 Subject: [PATCH 1/4] Add config option to turn off all snapshotting and related observers - allows RRWEB to be used for click/movement tracking alone, e.g. for a heatmaps use case - could also be used if there was a separate process for recording the DOM (in which case a 3rd party library like https://github.com/antonmedv/finder could be added to record targets instead of the mirror) --- packages/rrweb/src/record/index.ts | 5 ++++ packages/rrweb/src/record/observer.ts | 33 +++++++++++++++++---------- packages/rrweb/src/types.ts | 2 ++ 3 files changed, 28 insertions(+), 12 deletions(-) diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index 1c2141bfef..7308ac6d04 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -78,6 +78,7 @@ function record( sampling = {}, dataURLOptions = {}, mousemoveWait, + recordDOM = true, recordCanvas = false, recordCrossOriginIframes = false, recordAfter = options.recordAfter === 'DOMContentLoaded' @@ -345,6 +346,9 @@ function record( }); takeFullSnapshot = (isCheckout = false) => { + if (!recordDOM) { + return; + } wrappedEmit( wrapEvent({ type: EventType.Meta, @@ -529,6 +533,7 @@ function record( maskInputOptions, inlineStylesheet, sampling, + recordDOM, recordCanvas, inlineImages, userTriggeredOnInput, diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index 428cce1a4e..033c0930e0 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -1282,7 +1282,10 @@ export function initObservers( } mergeHooks(o, hooks); - const mutationObserver = initMutationObserver(o, o.doc); + let mutationObserver: MutationObserver | undefined; + if (o.recordDOM) { + mutationObserver = initMutationObserver(o, o.doc); + } const mousemoveHandler = initMoveObserver(o); const mouseInteractionHandler = initMouseInteractionObserver(o); const scrollHandler = initScrollObserver(o); @@ -1292,16 +1295,20 @@ export function initObservers( const inputHandler = initInputObserver(o); const mediaInteractionHandler = initMediaInteractionObserver(o); - const styleSheetObserver = initStyleSheetObserver(o, { win: currentWindow }); - const adoptedStyleSheetObserver = initAdoptedStyleSheetObserver(o, o.doc); - const styleDeclarationObserver = initStyleDeclarationObserver(o, { - win: currentWindow, - }); - const fontObserver = o.collectFonts - ? initFontObserver(o) - : () => { - // - }; + let styleSheetObserver = () => {}; + let adoptedStyleSheetObserver = () => {}; + let styleDeclarationObserver = () => {}; + let fontObserver = () => {}; + if (o.recordDOM) { + styleSheetObserver = initStyleSheetObserver(o, { win: currentWindow }); + adoptedStyleSheetObserver = initAdoptedStyleSheetObserver(o, o.doc); + styleDeclarationObserver = initStyleDeclarationObserver(o, { + win: currentWindow, + }); + if (o.collectFonts) { + fontObserver = initFontObserver(o); + } + } const selectionObserver = initSelectionObserver(o); // plugins @@ -1314,7 +1321,9 @@ export function initObservers( return callbackWrapper(() => { mutationBuffers.forEach((b) => b.reset()); - mutationObserver.disconnect(); + if (mutationObserver) { + mutationObserver.disconnect(); + } mousemoveHandler(); mouseInteractionHandler(); scrollHandler(); diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts index 17ed750e68..1ceb44222b 100644 --- a/packages/rrweb/src/types.ts +++ b/packages/rrweb/src/types.ts @@ -60,6 +60,7 @@ export type recordOptions = { packFn?: PackFn; sampling?: SamplingStrategy; dataURLOptions?: DataURLOptions; + recordDOM?: boolean; recordCanvas?: boolean; recordCrossOriginIframes?: boolean; recordAfter?: 'DOMContentLoaded' | 'load'; @@ -98,6 +99,7 @@ export type observerParam = { canvasMutationCb: canvasMutationCallback; fontCb: fontCallback; sampling: SamplingStrategy; + recordDOM: boolean; recordCanvas: boolean; inlineImages: boolean; userTriggeredOnInput: boolean; From 37ce69b79661e94d2fb8a97b2cdd89d8763d67e8 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Wed, 27 Sep 2023 10:14:52 +0100 Subject: [PATCH 2/4] Create polite-olives-wave.md --- .changeset/polite-olives-wave.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/polite-olives-wave.md diff --git a/.changeset/polite-olives-wave.md b/.changeset/polite-olives-wave.md new file mode 100644 index 0000000000..b5f2cd08b4 --- /dev/null +++ b/.changeset/polite-olives-wave.md @@ -0,0 +1,5 @@ +--- +"rrweb": patch +--- + +Add 'recordDOM' config option to turn off recording of DOM (making recordings unreplayable). Specialist use case e.g. only heatmap click/scroll recording From f118d93ba087784eaeed4068b21f58933551ff64 Mon Sep 17 00:00:00 2001 From: eoghanmurray Date: Wed, 27 Sep 2023 09:16:25 +0000 Subject: [PATCH 3/4] Apply formatting changes --- .changeset/polite-olives-wave.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/polite-olives-wave.md b/.changeset/polite-olives-wave.md index b5f2cd08b4..1d3e5987f3 100644 --- a/.changeset/polite-olives-wave.md +++ b/.changeset/polite-olives-wave.md @@ -1,5 +1,5 @@ --- -"rrweb": patch +'rrweb': patch --- Add 'recordDOM' config option to turn off recording of DOM (making recordings unreplayable). Specialist use case e.g. only heatmap click/scroll recording From 4295db1c30f06cefb5a414060ab4a3bc37d3bbdc Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Fri, 13 Oct 2023 09:57:37 +0100 Subject: [PATCH 4/4] Update packages/rrweb/src/record/observer.ts Co-authored-by: Justin Halsall --- packages/rrweb/src/record/observer.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index 033c0930e0..02a9ae8669 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -1321,9 +1321,7 @@ export function initObservers( return callbackWrapper(() => { mutationBuffers.forEach((b) => b.reset()); - if (mutationObserver) { - mutationObserver.disconnect(); - } + mutationObserver?.disconnect(); mousemoveHandler(); mouseInteractionHandler(); scrollHandler();