From 5535ef7358334cc3345b6059be47ba9e82e92066 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Fri, 13 Oct 2023 09:58:20 +0100
Subject: [PATCH] Add config option to turn off all snapshotting and related
 observers (#1311)

* 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)
---------

Authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
---
 .changeset/polite-olives-wave.md      |  5 +++++
 packages/rrweb/src/record/index.ts    |  5 +++++
 packages/rrweb/src/record/observer.ts | 31 ++++++++++++++++-----------
 packages/rrweb/src/types.ts           |  2 ++
 4 files changed, 31 insertions(+), 12 deletions(-)
 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..1d3e5987f3
--- /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
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
index b74da44ce0..b9ca102944 100644
--- a/packages/rrweb/src/record/index.ts
+++ b/packages/rrweb/src/record/index.ts
@@ -101,6 +101,7 @@ function record<T = eventWithTime>(
     sampling = {},
     dataURLOptions = {},
     mousemoveWait,
+    recordDOM = true,
     recordCanvas = false,
     recordCrossOriginIframes = false,
     recordAfter = options.recordAfter === 'DOMContentLoaded'
@@ -387,6 +388,9 @@ function record<T = eventWithTime>(
         });
 
   takeFullSnapshot = (isCheckout = false) => {
+    if (!recordDOM) {
+      return;
+    }
     wrappedEmit(
       wrapEvent({
         type: EventType.Meta,
@@ -592,6 +596,7 @@ function record<T = eventWithTime>(
           maskInputOptions,
           inlineStylesheet,
           sampling,
+          recordDOM,
           recordCanvas,
           inlineImages,
           userTriggeredOnInput,
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index bddf82f97d..eba389ac73 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -1416,7 +1416,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);
@@ -1426,16 +1429,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);
   const customElementObserver = initCustomElementObserver(o);
 
@@ -1449,7 +1456,7 @@ export function initObservers(
 
   return callbackWrapper(() => {
     mutationBuffers.forEach((b) => b.reset());
-    mutationObserver.disconnect();
+    mutationObserver?.disconnect();
     mousemoveHandler();
     mouseInteractionHandler();
     scrollHandler();
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index 25eeadd631..16da94fd4b 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -77,6 +77,7 @@ export type recordOptions<T> = {
   packFn?: PackFn;
   sampling?: SamplingStrategy;
   dataURLOptions?: DataURLOptions;
+  recordDOM?: boolean;
   recordCanvas?: boolean;
   recordCrossOriginIframes?: boolean;
   recordAfter?: 'DOMContentLoaded' | 'load';
@@ -123,6 +124,7 @@ export type observerParam = {
   customElementCb: customElementCallback;
   fontCb: fontCallback;
   sampling: SamplingStrategy;
+  recordDOM: boolean;
   recordCanvas: boolean;
   inlineImages: boolean;
   userTriggeredOnInput: boolean;