ref(replay): Use rrweb for slow click detection

Author: mydea

packages/replay/src/coreHandlers/handleClick.ts

@@ -1,16 +1,19 @@
+import { IncrementalSource, MouseInteractions, record } from '@sentry-internal/rrweb';
 import type { Breadcrumb } from '@sentry/types';
 
 import { WINDOW } from '../constants';
 import type {
+  RecordingEvent,
   ReplayClickDetector,
   ReplayContainer,
   ReplayMultiClickFrame,
   ReplaySlowClickFrame,
   SlowClickConfig,
 } from '../types';
+import { ReplayEventTypeFullSnapshot, ReplayEventTypeIncrementalSnapshot } from '../types';
 import { timestampToS } from '../util/timestamp';
 import { addBreadcrumbEvent } from './util/addBreadcrumbEvent';
-import { getClickTargetNode } from './util/domUtils';
+import { getClosestInteractive } from './util/domUtils';
 import { onWindowOpen } from './util/onWindowOpen';
 
 type ClickBreadcrumb = Breadcrumb & {
@@ -26,6 +29,16 @@ interface Click {
   node: HTMLElement;
 }
 
+type IncrementalRecordingEvent = RecordingEvent & {
+  type: typeof ReplayEventTypeIncrementalSnapshot;
+  data: { source: IncrementalSource };
+};
+
+type IncrementalMouseInteractionRecordingEvent = IncrementalRecordingEvent & {
+  type: typeof ReplayEventTypeIncrementalSnapshot;
+  data: { type: MouseInteractions; id: number };
+};
+
 /** Handle a click. */
 export function handleClick(clickDetector: ReplayClickDetector, clickBreadcrumb: Breadcrumb, node: HTMLElement): void {
   clickDetector.handleClick(clickBreadcrumb, node);
@@ -70,48 +83,14 @@ export class ClickDetector implements ReplayClickDetector {
 
   /** Register click detection handlers on mutation or scroll. */
   public addListeners(): void {
-    const mutationHandler = (): void => {
-      this._lastMutation = nowInSeconds();
-    };
-
-    const scrollHandler = (): void => {
-      this._lastScroll = nowInSeconds();
-    };
-
     const cleanupWindowOpen = onWindowOpen(() => {
       // Treat window.open as mutation
       this._lastMutation = nowInSeconds();
     });
 
-    const clickHandler = (event: MouseEvent): void => {
-      if (!event.target) {
-        return;
-      }
-
-      const node = getClickTargetNode(event);
-      if (node) {
-        this._handleMultiClick(node as HTMLElement);
-      }
-    };
-
-    const obs = new MutationObserver(mutationHandler);
-
-    obs.observe(WINDOW.document.documentElement, {
-      attributes: true,
-      characterData: true,
-      childList: true,
-      subtree: true,
-    });
-
-    WINDOW.addEventListener('scroll', scrollHandler, { passive: true });
-    WINDOW.addEventListener('click', clickHandler, { passive: true });
-
     this._teardown = () => {
-      WINDOW.removeEventListener('scroll', scrollHandler);
-      WINDOW.removeEventListener('click', clickHandler);
       cleanupWindowOpen();
 
-      obs.disconnect();
       this._clicks = [];
       this._lastMutation = 0;
       this._lastScroll = 0;
@@ -129,7 +108,7 @@ export class ClickDetector implements ReplayClickDetector {
     }
   }
 
-  /** Handle a click */
+  /** @inheritDoc */
   public handleClick(breadcrumb: Breadcrumb, node: HTMLElement): void {
     if (ignoreElement(node, this._ignoreSelector) || !isClickBreadcrumb(breadcrumb)) {
       return;
@@ -158,6 +137,22 @@ export class ClickDetector implements ReplayClickDetector {
     }
   }
 
+  /** @inheritDoc */
+  public registerMutation(timestamp = Date.now()): void {
+    this._lastMutation = timestampToS(timestamp);
+  }
+
+  /** @inheritDoc */
+  public registerScroll(timestamp = Date.now()): void {
+    this._lastScroll = timestampToS(timestamp);
+  }
+
+  /** @inheritDoc */
+  public registerClick(element: HTMLElement): void {
+    const node = getClosestInteractive(element);
+    this._handleMultiClick(node as HTMLElement);
+  }
+
   /** Count multiple clicks on elements. */
   private _handleMultiClick(node: HTMLElement): void {
     this._getClicks(node).forEach(click => {
@@ -311,3 +306,47 @@ function isClickBreadcrumb(breadcrumb: Breadcrumb): breadcrumb is ClickBreadcrum
 function nowInSeconds(): number {
   return Date.now() / 1000;
 }
+
+/** Update the click detector based on a recording event of rrweb. */
+export function updateClickDetectorForRecordingEvent(clickDetector: ReplayClickDetector, event: RecordingEvent): void {
+  try {
+    // We interpret a full snapshot as a mutation (this may not be true, but there is no way for us to know)
+    if (event.type === ReplayEventTypeFullSnapshot) {
+      clickDetector.registerMutation(event.timestamp);
+    }
+
+    if (!isIncrementalEvent(event)) {
+      return;
+    }
+
+    const { source } = event.data;
+    if (source === IncrementalSource.Mutation) {
+      clickDetector.registerMutation(event.timestamp);
+    }
+
+    if (source === IncrementalSource.Scroll) {
+      clickDetector.registerScroll(event.timestamp);
+    }
+
+    if (isIncrementalMouseInteraction(event)) {
+      const { type, id } = event.data;
+      const node = record.mirror.getNode(id);
+
+      if (node instanceof HTMLElement && type === MouseInteractions.Click) {
+        clickDetector.registerClick(node);
+      }
+    }
+  } catch {
+    // ignore errors here, e.g. if accessing something that does not exist
+  }
+}
+
+function isIncrementalEvent(event: RecordingEvent): event is IncrementalRecordingEvent {
+  return event.type === ReplayEventTypeIncrementalSnapshot;
+}
+
+function isIncrementalMouseInteraction(
+  event: IncrementalRecordingEvent,
+): event is IncrementalMouseInteractionRecordingEvent {
+  return event.data.source === IncrementalSource.MouseInteraction;
+}

packages/replay/src/coreHandlers/util/domUtils.ts

@@ -7,6 +7,12 @@ export interface DomHandlerData {
 
 const INTERACTIVE_SELECTOR = 'button,a';
 
+/** Get the closest interactive parent element, or else return the given element. */
+export function getClosestInteractive(element: Element): Element {
+  const closestInteractive = element.closest(INTERACTIVE_SELECTOR);
+  return closestInteractive || element;
+}
+
 /**
  * For clicks, we check if the target is inside of a button or link
  * If so, we use this as the target instead
@@ -20,8 +26,7 @@ export function getClickTargetNode(event: DomHandlerData['event'] | MouseEvent):
     return target;
   }
 
-  const closestInteractive = target.closest(INTERACTIVE_SELECTOR);
-  return closestInteractive || target;
+  return getClosestInteractive(target);
 }
 
 /** Get the event target node. */

packages/replay/src/types/replay.ts

@@ -441,7 +441,15 @@ export interface SendBufferedReplayOptions {
 export interface ReplayClickDetector {
   addListeners(): void;
   removeListeners(): void;
+
+  /** Handle a click breadcrumb. */
   handleClick(breadcrumb: Breadcrumb, node: HTMLElement): void;
+  /** Register a mutation that happened at a given time. */
+  registerMutation(timestamp?: number): void;
+  /** Register a scroll that happened at a given time. */
+  registerScroll(timestamp?: number): void;
+  /** Register that a click on an element happened. */
+  registerClick(element: HTMLElement): void;
 }
 
 export interface ReplayContainer {

packages/replay/src/util/handleRecordingEmit.ts

@@ -1,6 +1,7 @@
 import { EventType } from '@sentry-internal/rrweb';
 import { logger } from '@sentry/utils';
 
+import { updateClickDetectorForRecordingEvent } from '../coreHandlers/handleClick';
 import { saveSession } from '../session/saveSession';
 import type { RecordingEvent, ReplayContainer, ReplayOptionFrameEvent } from '../types';
 import { addEventSync } from './addEvent';
@@ -29,6 +30,10 @@ export function getHandleRecordingEmit(replay: ReplayContainer): RecordingEmitCa
     const isCheckout = _isCheckout || !hadFirstEvent;
     hadFirstEvent = true;
 
+    if (replay.clickDetector) {
+      updateClickDetectorForRecordingEvent(replay.clickDetector, event);
+    }
+
     // The handler returns `true` if we do not want to trigger debounced flush, `false` if we want to debounce flush.
     replay.addUpdate(() => {
       // The session is always started immediately on pageload/init, but for