feat(replay): Rework slow click & rage click detection

Author: mydea

packages/browser-integration-tests/suites/replay/slowClick/clickTargets/test.ts

@@ -67,6 +67,7 @@ import { getCustomRecordingEvents, shouldSkipReplayTest, waitForReplayRequest }
           category: 'ui.slowClickDetected',
           data: {
             endReason: 'timeout',
+            clickCount: 1,
             node: {
               attributes: expect.objectContaining({
                 id,

packages/browser-integration-tests/suites/replay/slowClick/mutation/test.ts

@@ -29,19 +29,81 @@ sentryTest('mutation after threshold results in slow click', async ({ getLocalTe
     return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected');
   });
 
-  // Trigger this twice, sometimes this was flaky otherwise...
+  await page.click('#mutationButton');
+
+  const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+
+  const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.slowClickDetected');
+
+  expect(slowClickBreadcrumbs).toEqual([
+    {
+      category: 'ui.slowClickDetected',
+      data: {
+        endReason: 'mutation',
+        clickCount: 1,
+        node: {
+          attributes: {
+            id: 'mutationButton',
+          },
+          id: expect.any(Number),
+          tagName: 'button',
+          textContent: '******* ********',
+        },
+        nodeId: expect.any(Number),
+        timeAfterClickMs: expect.any(Number),
+        url: 'http://sentry-test.io/index.html',
+      },
+      message: 'body > button#mutationButton',
+      timestamp: expect.any(Number),
+    },
+  ]);
+
+  expect(slowClickBreadcrumbs[0]?.data?.timeAfterClickMs).toBeGreaterThan(3000);
+  expect(slowClickBreadcrumbs[0]?.data?.timeAfterClickMs).toBeLessThan(3100);
+});
+
+sentryTest('multiple clicks are counted', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipReplayTest()) {
+    sentryTest.skip();
+  }
+
+  const reqPromise0 = waitForReplayRequest(page, 0);
+
+  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);
+  await reqPromise0;
+
+  const reqPromise1 = waitForReplayRequest(page, (event, res) => {
+    const { breadcrumbs } = getCustomRecordingEvents(res);
+
+    return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected');
+  });
+
+  await page.click('#mutationButton');
+  await page.click('#mutationButton');
   await page.click('#mutationButton');
   await page.click('#mutationButton');
 
   const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
 
   const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.slowClickDetected');
+  const rageClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.rageClickDetected');
 
   expect(slowClickBreadcrumbs).toEqual([
     {
       category: 'ui.slowClickDetected',
       data: {
         endReason: 'mutation',
+        clickCount: 4,
         node: {
           attributes: {
             id: 'mutationButton',
@@ -58,6 +120,7 @@ sentryTest('mutation after threshold results in slow click', async ({ getLocalTe
       timestamp: expect.any(Number),
     },
   ]);
+  expect(rageClickBreadcrumbs.length).toEqual(0);
 
   expect(slowClickBreadcrumbs[0]?.data?.timeAfterClickMs).toBeGreaterThan(3000);
   expect(slowClickBreadcrumbs[0]?.data?.timeAfterClickMs).toBeLessThan(3100);
@@ -165,3 +228,55 @@ sentryTest('inline click handler does not trigger slow click', async ({ getLocal
     },
   ]);
 });
+
+sentryTest('mouseDown events are considered', async ({ browserName, getLocalTestUrl, page }) => {
+  // This test seems to only be flakey on firefox
+  if (shouldSkipReplayTest() || ['firefox'].includes(browserName)) {
+    sentryTest.skip();
+  }
+
+  const reqPromise0 = waitForReplayRequest(page, 0);
+
+  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);
+  await reqPromise0;
+
+  const reqPromise1 = waitForReplayRequest(page, (event, res) => {
+    const { breadcrumbs } = getCustomRecordingEvents(res);
+
+    return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click');
+  });
+
+  await page.click('#mouseDownButton');
+
+  const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+
+  expect(breadcrumbs).toEqual([
+    {
+      category: 'ui.click',
+      data: {
+        node: {
+          attributes: {
+            id: 'mouseDownButton',
+          },
+          id: expect.any(Number),
+          tagName: 'button',
+          textContent: '******* ******** ** ***** ****',
+        },
+        nodeId: expect.any(Number),
+      },
+      message: 'body > button#mouseDownButton',
+      timestamp: expect.any(Number),
+      type: 'default',
+    },
+  ]);
+});

packages/browser-integration-tests/suites/replay/slowClick/rageClick/test.ts

@@ -0,0 +1,62 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getCustomRecordingEvents, shouldSkipReplayTest, waitForReplayRequest } from '../../../../utils/replayHelpers';
+
+sentryTest('captures rage click when not detecting slow click', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipReplayTest()) {
+    sentryTest.skip();
+  }
+
+  const reqPromise0 = waitForReplayRequest(page, 0);
+
+  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);
+  await reqPromise0;
+
+  const reqPromise1 = waitForReplayRequest(page, (event, res) => {
+    const { breadcrumbs } = getCustomRecordingEvents(res);
+
+    return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.rageClickDetected');
+  });
+
+  await page.click('#mutationButtonImmediately');
+  await page.click('#mutationButtonImmediately');
+  await page.click('#mutationButtonImmediately');
+  await page.click('#mutationButtonImmediately');
+
+  const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+
+  const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.rageClickDetected');
+
+  expect(slowClickBreadcrumbs).toEqual([
+    {
+      category: 'ui.rageClickDetected',
+      data: {
+        clickCount: 4,
+        metric: true,
+        node: {
+          attributes: {
+            id: 'mutationButtonImmediately',
+          },
+          id: expect.any(Number),
+          tagName: 'button',
+          textContent: '******* ******** ***********',
+        },
+        nodeId: expect.any(Number),
+        url: 'http://sentry-test.io/index.html',
+      },
+      message: 'body > button#mutationButtonImmediately',
+      timestamp: expect.any(Number),
+    },
+  ]);
+});

packages/browser-integration-tests/suites/replay/slowClick/scroll/test.ts

@@ -91,6 +91,7 @@ sentryTest('late scroll triggers slow click', async ({ getLocalTestUrl, page })
       category: 'ui.slowClickDetected',
       data: {
         endReason: 'timeout',
+        clickCount: 1,
         node: {
           attributes: {
             id: 'scrollLateButton',

packages/browser-integration-tests/suites/replay/slowClick/template.html

@@ -18,6 +18,7 @@
     <button id="scrollButton">Trigger scroll</button>
     <button id="scrollLateButton">Trigger scroll late</button>
     <button id="mutationIgnoreButton" class="ignore-class">Trigger scroll late</button>
+    <button id="mouseDownButton">Trigger mutation on mouse down</button>
 
     <a href="#" id="link">Link</a>
     <a href="#" target="_blank" id="linkExternal">Link external</a>
@@ -69,6 +70,9 @@ <h1 id="h2">Bottom</h1>
           console.log('DONE');
         }, 3001);
       });
+      document.getElementById('mouseDownButton').addEventListener('mousedown', () => {
+        document.getElementById('out').innerHTML += 'mutationButton clicked<br>';
+      });
 
       // Do nothing on these elements
       document

packages/browser-integration-tests/suites/replay/slowClick/timeout/test.ts

@@ -40,6 +40,7 @@ sentryTest('mutation after timeout results in slow click', async ({ getLocalTest
       category: 'ui.slowClickDetected',
       data: {
         endReason: 'timeout',
+        clickCount: 1,
         node: {
           attributes: {
             id: 'mutationButtonLate',
@@ -95,6 +96,7 @@ sentryTest('console.log results in slow click', async ({ getLocalTestUrl, page }
       category: 'ui.slowClickDetected',
       data: {
         endReason: 'timeout',
+        clickCount: 1,
         node: {
           attributes: {
             id: 'consoleLogButton',

packages/replay/src/constants.ts

@@ -42,3 +42,5 @@ export const CONSOLE_ARG_MAX_SIZE = 5_000;
 export const SLOW_CLICK_THRESHOLD = 3_000;
 /* For scroll actions after a click, we only look for a very short time period to detect programmatic scrolling. */
 export const SLOW_CLICK_SCROLL_TIMEOUT = 300;
+/* Clicks in this time period are considered e.g. double/triple clicks. */
+export const MULTI_CLICK_TIMEOUT = 1_000;