getsentry · mydea · Nov 2, 2023 · Oct 27, 2023 · Oct 31, 2023
diff --git a/packages/browser-integration-tests/suites/replay/slowClick/error/init.js b/packages/browser-integration-tests/suites/replay/slowClick/error/init.js
@@ -0,0 +1,18 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.Replay = new Sentry.Replay({
+  flushMinDelay: 200,
+  flushMaxDelay: 200,
+  minReplayDuration: 0,
+  slowClickTimeout: 3500,
+});
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  sampleRate: 1,
+  replaysSessionSampleRate: 0.0,
+  replaysOnErrorSampleRate: 1.0,
+
+  integrations: [window.Replay],
+});
diff --git a/packages/browser-integration-tests/suites/replay/slowClick/error/template.html b/packages/browser-integration-tests/suites/replay/slowClick/error/template.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <button id="buttonError">Trigger error</button>
+    <button id="buttonErrorMutation">Trigger error</button>
+
+    <script>
+      document.getElementById('buttonError').addEventListener('click', () => {
+        throw new Error('test error happened');
+      });
+
+      document.getElementById('buttonErrorMutation').addEventListener('click', () => {
+        document.getElementById('buttonErrorMutation').innerText = 'Test error happened!';
+
+        throw new Error('test error happened');
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/browser-integration-tests/suites/replay/slowClick/error/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/error/test.ts
@@ -0,0 +1,140 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import {
+  getCustomRecordingEvents,
+  getReplayEventFromRequest,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../../utils/replayHelpers';
+
+sentryTest('slow click that triggers error is captured', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipReplayTest()) {
+    sentryTest.skip();
+  }
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.goto(url);
+
+  const [req0] = await Promise.all([
+    waitForReplayRequest(page, (_event, res) => {
+      const { breadcrumbs } = getCustomRecordingEvents(res);
+
+      return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected');
+    }),
+    page.click('#buttonError'),
+  ]);
+
+  const { breadcrumbs } = getCustomRecordingEvents(req0);
+
+  const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.slowClickDetected');
+
+  expect(slowClickBreadcrumbs).toEqual([
+    {
+      category: 'ui.slowClickDetected',
+      type: 'default',
+      data: {
+        endReason: 'timeout',
+        clickCount: 1,
+        node: {
+          attributes: {
+            id: 'buttonError',
+          },
+          id: expect.any(Number),
+          tagName: 'button',
+          textContent: '******* *****',
+        },
+        nodeId: expect.any(Number),
+        timeAfterClickMs: 3500,
+        url: 'http://sentry-test.io/index.html',
+      },
+      message: 'body > button#buttonError',
+      timestamp: expect.any(Number),
+    },
+  ]);
+});
+
+sentryTest(
+  'click that triggers error & mutation is not captured',
+  async ({ getLocalTestUrl, page, forceFlushReplay }) => {
+    if (shouldSkipReplayTest()) {
+      sentryTest.skip();
+    }
+
+    await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ id: 'test-id' }),
+      });
+    });
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    await page.goto(url);
+
+    let slowClickCount = 0;
+
+    page.on('response', res => {
+      const req = res.request();
+
+      const event = getReplayEventFromRequest(req);
+
+      if (!event) {
+        return;
+      }
+
+      const { breadcrumbs } = getCustomRecordingEvents(res);
+
+      const slowClicks = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.slowClickDetected');
+      slowClickCount += slowClicks.length;
+    });
+
+    const [req1] = await Promise.all([
+      waitForReplayRequest(page, (_event, res) => {
+        const { breadcrumbs } = getCustomRecordingEvents(res);
+
+        return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click');
+      }),
+      page.click('#buttonErrorMutation'),
+    ]);
+
+    const { breadcrumbs } = getCustomRecordingEvents(req1);
+
+    expect(breadcrumbs).toEqual([
+      {
+        category: 'ui.click',
+        data: {
+          node: {
+            attributes: {
+              id: 'buttonErrorMutation',
+            },
+            id: expect.any(Number),
+            tagName: 'button',
+            textContent: '******* *****',
+          },
+          nodeId: expect.any(Number),
+        },
+        message: 'body > button#buttonErrorMutation',
+        timestamp: expect.any(Number),
+        type: 'default',
+      },
+    ]);
+
+    // Ensure we wait for timeout, to make sure no slow click is created
+    // Waiting for 3500 + 1s rounding room
+    await new Promise(resolve => setTimeout(resolve, 4500));
+    await forceFlushReplay();
+
+    expect(slowClickCount).toBe(0);
+  },
+);
diff --git a/packages/browser-integration-tests/suites/replay/slowClick/mutation/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/mutation/test.ts
@@ -141,8 +141,17 @@ sentryTest('immediate mutation does not trigger slow click', async ({ forceFlush
   await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]);
   await forceFlushReplay();
 
+  let slowClickCount = 0;
+
+  page.on('response', res => {
+    const { breadcrumbs } = getCustomRecordingEvents(res);
+
+    const slowClicks = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.slowClickDetected');
+    slowClickCount += slowClicks.length;
+  });
+
   const [req1] = await Promise.all([
-    waitForReplayRequest(page, (event, res) => {
+    waitForReplayRequest(page, (_event, res) => {
       const { breadcrumbs } = getCustomRecordingEvents(res);
 
       return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click');
@@ -171,6 +180,13 @@ sentryTest('immediate mutation does not trigger slow click', async ({ forceFlush
       type: 'default',
     },
   ]);
+
+  // Ensure we wait for timeout, to make sure no slow click is created
+  // Waiting for 3500 + 1s rounding room
+  await new Promise(resolve => setTimeout(resolve, 4500));
+  await forceFlushReplay();
+
+  expect(slowClickCount).toBe(0);
 });
 
 sentryTest('inline click handler does not trigger slow click', async ({ forceFlushReplay, getLocalTestUrl, page }) => {

diff --git a/packages/replay/src/coreHandlers/handleClick.ts b/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 { 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,50 @@ 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 {
+    // note: We only consider incremental snapshots here
+    // This means that any full snapshot is ignored for mutation detection - the reason is that we simply cannot know if a mutation happened here.
+    // E.g. think that we are buffering, an error happens and we take a full snapshot because we switched to session mode -
+    // in this scenario, we would not know if a dead click happened because of the error, which is a key dead click scenario.
+    // Instead, by ignoring full snapshots, we have the risk that we generate a false positive
+    // (if a mutation _did_ happen but was "swallowed" by the full snapshot)
+    // But this should be more unlikely as we'd generally capture the incremental snapshot right away
+
+    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;
+}