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

@@ -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

packages/rrweb/src/record/index.ts

@@ -78,6 +78,7 @@ function record<T = eventWithTime>(
     sampling = {},
     dataURLOptions = {},
     mousemoveWait,
+    recordDOM = true,
     recordCanvas = false,
     recordCrossOriginIframes = false,
     recordAfter = options.recordAfter === 'DOMContentLoaded'
@@ -345,6 +346,9 @@ function record<T = eventWithTime>(
   });
 
   takeFullSnapshot = (isCheckout = false) => {
+    if (!recordDOM) {
+      return;
+    }
     wrappedEmit(
       wrapEvent({
         type: EventType.Meta,
@@ -529,6 +533,7 @@ function record<T = eventWithTime>(
           maskInputOptions,
           inlineStylesheet,
           sampling,
+          recordDOM,
           recordCanvas,
           inlineImages,
           userTriggeredOnInput,

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 });
+  let styleSheetObserver = () => {};
-  const adoptedStyleSheetObserver = initAdoptedStyleSheetObserver(o, o.doc);
+  let adoptedStyleSheetObserver = () => {};
-  const styleDeclarationObserver = initStyleDeclarationObserver(o, {
+  let styleDeclarationObserver = () => {};
-    win: currentWindow,
+  let fontObserver = () => {};
-  });
+  if (o.recordDOM) {
-  const fontObserver = o.collectFonts
+    styleSheetObserver = initStyleSheetObserver(o, { win: currentWindow });
-    ? initFontObserver(o)
+    adoptedStyleSheetObserver = initAdoptedStyleSheetObserver(o, o.doc);
-    : () => {
+    styleDeclarationObserver = initStyleDeclarationObserver(o, {
-        //
+      win: currentWindow,
-      };
+    });
+    if (o.collectFonts) {
+      fontObserver = initFontObserver(o);
+    }
+  }
   const selectionObserver = initSelectionObserver(o);
 
   // plugins
@@ -1314,7 +1321,7 @@ export function initObservers(
 
   return callbackWrapper(() => {
     mutationBuffers.forEach((b) => b.reset());
-    mutationObserver.disconnect();
+    mutationObserver?.disconnect();
     mousemoveHandler();
     mouseInteractionHandler();
     scrollHandler();

packages/rrweb/src/types.ts

@@ -60,6 +60,7 @@ export type recordOptions<T> = {
   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;