WIP: capture slow click

Author: mydea

packages/replay/src/coreHandlers/handleDom.ts

@@ -5,6 +5,7 @@ import { htmlTreeAsString } from '@sentry/utils';
 
 import type { ReplayContainer } from '../types';
 import { createBreadcrumb } from '../util/createBreadcrumb';
+import { detectSlowClick } from './handleSlowClick';
 import { addBreadcrumbEvent } from './util/addBreadcrumbEvent';
 import { getAttributesToRecord } from './util/getAttributesToRecord';
 
@@ -26,6 +27,11 @@ export const handleDomListener: (replay: ReplayContainer) => (handlerData: DomHa
       return;
     }
 
+    const isClick = handlerData.name === 'click';
+    if (isClick) {
+      detectSlowClick(replay, result as Breadcrumb & { timestamp: number }, getTargetNode(handlerData) as HTMLElement);
+    }
+
     addBreadcrumbEvent(replay, result);
   };
 

packages/replay/src/coreHandlers/handleSlowClick.ts

@@ -0,0 +1,96 @@
+import type { Breadcrumb } from '@sentry/types';
+
+import { WINDOW } from '../constants';
+import type { ReplayContainer } from '../types';
+import { addBreadcrumbEvent } from './util/addBreadcrumbEvent';
+
+const SLOW_CLICK_THRESHOLD = 500; // in ms
+const SLOW_CLICK_TIMEOUT = 5_000; // in ms
+const SLOW_CLICK_DISABLE_SELECTOR = '[data-sentry-disable-slowclick],.data-sentry-disable-slowclick';
+
+type ClickBreadcrumb = Breadcrumb & {
+  timestamp: number;
+};
+
+/**
+ * Detect a slow click on a button/a tag,
+ * and potentially create a corresponding breadcrumb.
+ */
+export function detectSlowClick(replay: ReplayContainer, clickBreadcrumb: ClickBreadcrumb, node: HTMLElement): void {
+  if (
+    (node.tagName !== 'BUTTON' && node.tagName !== 'A') ||
+    // TODO FN: make this configurable?
+    node.matches(SLOW_CLICK_DISABLE_SELECTOR)
+  ) {
+    return;
+  }
+
+  /*
+    We consider a slow click a click on a button/a, which does not trigger one of:
+     - DOM mutation
+     - URL change
+     - Scroll
+     Within 500ms.
+  */
+
+  const _cleanup: (() => void)[] = [];
+
+  function cleanup(): void {
+    _cleanup.forEach(fn => fn());
+  }
+
+  // After timeout time, def. consider this a slow click, and stop watching for mutations
+  const timeout = setTimeout(() => {
+    handleSlowClick(replay, clickBreadcrumb);
+    cleanup();
+  }, SLOW_CLICK_TIMEOUT);
+
+  const handler = (): void => {
+    maybeHandleSlowClick(replay, clickBreadcrumb);
+    cleanup();
+  };
+
+  const obs = new MutationObserver(handler);
+
+  obs.observe(WINDOW.document.documentElement, {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  });
+
+  WINDOW.addEventListener('scroll', handler);
+  WINDOW.addEventListener('popstate', handler);
+
+  _cleanup.push(() => clearTimeout(timeout));
+  _cleanup.push(() => obs.disconnect());
+  _cleanup.push(() => WINDOW.removeEventListener('scroll', handler));
+  _cleanup.push(() => WINDOW.removeEventListener('popstate', handler));
+}
+
+function maybeHandleSlowClick(replay: ReplayContainer, clickBreadcrumb: ClickBreadcrumb): void {
+  const now = Date.now();
+  const timeAfterClickMs = now - clickBreadcrumb.timestamp * 1000;
+
+  if (timeAfterClickMs > SLOW_CLICK_THRESHOLD) {
+    handleSlowClick(replay, clickBreadcrumb, timeAfterClickMs);
+  }
+}
+
+function handleSlowClick(replay: ReplayContainer, clickBreadcrumb: ClickBreadcrumb, _timeAfterClickMs?: number): void {
+  const timeAfterClickMs = _timeAfterClickMs ? _timeAfterClickMs : Date.now() - clickBreadcrumb.timestamp * 1000;
+
+  const breadcrumb = {
+    message: clickBreadcrumb.message,
+    timestamp: clickBreadcrumb.timestamp,
+    category: 'ui.slowClickDetected',
+    data: {
+      ...clickBreadcrumb.data,
+      url: WINDOW.location.href,
+      // TODO FN: add parametrized route, when possible
+      timeAfterClickMs: Math.min(timeAfterClickMs, SLOW_CLICK_TIMEOUT),
+    },
+  };
+
+  addBreadcrumbEvent(replay, breadcrumb);
+}