ref: Use ui.multiClick instead

getsentry · Jun 14, 2023 · 4e6af85 · 4e6af85
1 parent 285d82b
commit 4e6af85
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 16 deletions.
diff --git a/packages/browser-integration-tests/suites/replay/slowClick/clickTargets/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/clickTargets/test.ts
@@ -65,6 +65,7 @@ import { getCustomRecordingEvents, shouldSkipReplayTest, waitForReplayRequest }
       expect(slowClickBreadcrumbs).toEqual([
         {
           category: 'ui.slowClickDetected',
+          type: 'default',
           data: {
             endReason: 'timeout',
             clickCount: 1,

diff --git a/packages/browser-integration-tests/suites/replay/slowClick/mutation/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/mutation/test.ts
@@ -38,6 +38,7 @@ sentryTest('mutation after threshold results in slow click', async ({ getLocalTe
   expect(slowClickBreadcrumbs).toEqual([
     {
       category: 'ui.slowClickDetected',
+      type: 'default',
       data: {
         endReason: 'mutation',
         clickCount: 1,
@@ -96,11 +97,12 @@ sentryTest('multiple clicks are counted', async ({ getLocalTestUrl, page }) => {
   const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
 
   const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.slowClickDetected');
-  const rageClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.rageClickDetected');
+  const multiClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.multiClick');
 
   expect(slowClickBreadcrumbs).toEqual([
     {
       category: 'ui.slowClickDetected',
+      type: 'default',
       data: {
         endReason: 'mutation',
         clickCount: 4,
@@ -120,7 +122,7 @@ sentryTest('multiple clicks are counted', async ({ getLocalTestUrl, page }) => {
       timestamp: expect.any(Number),
     },
   ]);
-  expect(rageClickBreadcrumbs.length).toEqual(0);
+  expect(multiClickBreadcrumbs.length).toEqual(0);
 
   expect(slowClickBreadcrumbs[0]?.data?.timeAfterClickMs).toBeGreaterThan(3000);
   expect(slowClickBreadcrumbs[0]?.data?.timeAfterClickMs).toBeLessThan(3100);

diff --git a/packages/browser-integration-tests/suites/replay/slowClick/rageClick/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/rageClick/test.ts
@@ -26,7 +26,7 @@ sentryTest('captures rage click when not detecting slow click', async ({ getLoca
   const reqPromise1 = waitForReplayRequest(page, (event, res) => {
     const { breadcrumbs } = getCustomRecordingEvents(res);
 
-    return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.rageClickDetected');
+    return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.multiClick');
   });
 
   await page.click('#mutationButtonImmediately');
@@ -36,11 +36,12 @@ sentryTest('captures rage click when not detecting slow click', async ({ getLoca
 
   const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
 
-  const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.rageClickDetected');
+  const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.multiClick');
 
   expect(slowClickBreadcrumbs).toEqual([
     {
-      category: 'ui.rageClickDetected',
+      category: 'ui.multiClick',
+      type: 'default',
       data: {
         clickCount: 4,
         metric: true,

diff --git a/packages/browser-integration-tests/suites/replay/slowClick/scroll/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/scroll/test.ts
@@ -89,6 +89,7 @@ sentryTest('late scroll triggers slow click', async ({ getLocalTestUrl, page })
   expect(slowClickBreadcrumbs).toEqual([
     {
       category: 'ui.slowClickDetected',
+      type: 'default',
       data: {
         endReason: 'timeout',
         clickCount: 1,

diff --git a/packages/browser-integration-tests/suites/replay/slowClick/timeout/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/timeout/test.ts
@@ -38,6 +38,7 @@ sentryTest('mutation after timeout results in slow click', async ({ getLocalTest
   expect(slowClickBreadcrumbs).toEqual([
     {
       category: 'ui.slowClickDetected',
+      type: 'default',
       data: {
         endReason: 'timeout',
         clickCount: 1,
@@ -94,6 +95,7 @@ sentryTest('console.log results in slow click', async ({ getLocalTestUrl, page }
   expect(slowClickBreadcrumbs).toEqual([
     {
       category: 'ui.slowClickDetected',
+      type: 'default',
       data: {
         endReason: 'timeout',
         clickCount: 1,

diff --git a/packages/replay/src/coreHandlers/handleClick.ts b/packages/replay/src/coreHandlers/handleClick.ts
@@ -1,7 +1,7 @@
 import type { Breadcrumb } from '@sentry/types';
 
 import { WINDOW } from '../constants';
-import type { ReplayClickDetector, ReplayContainer, SlowClickConfig } from '../types';
+import type { MultiClickFrame, ReplayClickDetector, ReplayContainer, SlowClickConfig, SlowClickFrame } from '../types';
 import { addBreadcrumbEvent } from './util/addBreadcrumbEvent';
 import { getClickTargetNode } from './util/domUtils';
 
@@ -219,7 +219,8 @@ export class ClickDetector implements ReplayClickDetector {
       const timeAfterClickMs = Math.min(click.mutationAfter || this._timeout, this._timeout) * 1000;
       const endReason = timeAfterClickMs < this._timeout * 1000 ? 'mutation' : 'timeout';
 
-      const breadcrumb = {
+      const breadcrumb: SlowClickFrame = {
+        type: 'default',
         message: clickBreadcrumb.message,
         timestamp: clickBreadcrumb.timestamp,
         category: 'ui.slowClickDetected',
@@ -237,12 +238,13 @@ export class ClickDetector implements ReplayClickDetector {
       return;
     }
 
-    // Rage click
-    if (clickCount > 3) {
-      const breadcrumb = {
+    // Multi click
+    if (clickCount > 1) {
+      const breadcrumb: MultiClickFrame = {
+        type: 'default',
         message: clickBreadcrumb.message,
         timestamp: clickBreadcrumb.timestamp,
-        category: 'ui.rageClickDetected',
+        category: 'ui.multiClick',
         data: {
           ...clickBreadcrumb.data,
           url: WINDOW.location.href,

diff --git a/packages/replay/src/types/replayFrame.ts b/packages/replay/src/types/replayFrame.ts
@@ -88,14 +88,28 @@ interface FocusFrame extends BaseBreadcrumbFrame {
 
 interface SlowClickFrameData extends ClickFrameData {
   url: string;
-  timeAfterClickFs: number;
+  route?: string;
+  timeAfterClickMs: number;
   endReason: string;
+  clickCount: number;
 }
-interface SlowClickFrame extends BaseBreadcrumbFrame {
+export interface SlowClickFrame extends BaseBreadcrumbFrame {
   category: 'ui.slowClickDetected';
   data: SlowClickFrameData;
 }
 
+interface MultiClickFrameData extends ClickFrameData {
+  url: string;
+  route?: string;
+  clickCount: number;
+  metric: true;
+}
+
+export interface MultiClickFrame extends BaseBreadcrumbFrame {
+  category: 'ui.multiClick';
+  data: MultiClickFrameData;
+}
+
 interface OptionFrame {
   blockAllMedia: boolean;
   errorSampleRate: number;
@@ -118,6 +132,7 @@ export type BreadcrumbFrame =
   | BlurFrame
   | FocusFrame
   | SlowClickFrame
+  | MultiClickFrame
   | MutationFrame
   | BaseBreadcrumbFrame;
 

diff --git a/packages/replay/test/unit/coreHandlers/handleClick.test.ts b/packages/replay/test/unit/coreHandlers/handleClick.test.ts
@@ -55,6 +55,7 @@ describe('Unit | coreHandlers | handleClick', () => {
       expect(mockAddBreadcrumbEvent).toHaveBeenCalledTimes(1);
       expect(mockAddBreadcrumbEvent).toHaveBeenCalledWith(replay, {
         category: 'ui.slowClickDetected',
+        type: 'default',
         data: {
           clickCount: 1,
           endReason: 'timeout',
@@ -141,8 +142,10 @@ describe('Unit | coreHandlers | handleClick', () => {
       expect(mockAddBreadcrumbEvent).toHaveBeenCalledTimes(1);
       expect(mockAddBreadcrumbEvent).toHaveBeenCalledWith(replay, {
         category: 'ui.slowClickDetected',
+        type: 'default',
         data: {
-          clickCount: 3,
+          // count is not actually correct, because this is identified by a different click handler
+          clickCount: 1,
           endReason: 'timeout',
           nodeId: 1,
           route: 'test-route',
@@ -158,8 +161,10 @@ describe('Unit | coreHandlers | handleClick', () => {
       expect(mockAddBreadcrumbEvent).toHaveBeenCalledTimes(2);
       expect(mockAddBreadcrumbEvent).toHaveBeenCalledWith(replay, {
         category: 'ui.slowClickDetected',
+        type: 'default',
         data: {
-          clickCount: 2,
+          // count is not actually correct, because this is identified by a different click handler
+          clickCount: 1,
           endReason: 'timeout',
           nodeId: 1,
           route: 'test-route',
@@ -349,6 +354,7 @@ describe('Unit | coreHandlers | handleClick', () => {
         expect(mockAddBreadcrumbEvent).toHaveBeenCalledTimes(1);
         expect(mockAddBreadcrumbEvent).toHaveBeenCalledWith(replay, {
           category: 'ui.slowClickDetected',
+          type: 'default',
           data: {
             clickCount: 1,
             endReason: 'mutation',
@@ -389,9 +395,10 @@ describe('Unit | coreHandlers | handleClick', () => {
         expect(mockAddBreadcrumbEvent).toHaveBeenCalledTimes(1);
         expect(mockAddBreadcrumbEvent).toHaveBeenCalledWith(replay, {
           category: 'ui.slowClickDetected',
+          type: 'default',
           data: {
             clickCount: 1,
-            endReason: 'mutation',
+            endReason: 'timeout',
             nodeId: 1,
             route: 'test-route',
             timeAfterClickMs: 3000,
@@ -480,6 +487,7 @@ describe('Unit | coreHandlers | handleClick', () => {
         expect(mockAddBreadcrumbEvent).toHaveBeenCalledTimes(1);
         expect(mockAddBreadcrumbEvent).toHaveBeenCalledWith(replay, {
           category: 'ui.slowClickDetected',
+          type: 'default',
           data: {
             clickCount: 1,
             endReason: 'timeout',