Browse Source

bug(replays): Fix dead & rage click conditions - FE matches SDK (#55562)

These three places need to agree on:
1. what qualifies for dead-clicks (it should be `<a>`, `<button>`,
`<input type=submit>` and `<input type=button>`)
2. what the thresholds are


This PR aligns which elements we care about: FE now matches the SDK 

The thresholds are already aligned on BE and FE
  - endReason is 'timeout' based on the sdk config
  - 5 clicks or more, then it's rageful

Related to https://github.com/getsentry/sentry/pull/55563
Fixes https://github.com/getsentry/team-replay/issues/152
Ryan Albrecht 1 year ago
parent
commit
c59d5c389c
2 changed files with 10 additions and 2 deletions
  1. 6 1
      fixtures/js-stubs/replay/helpers.ts
  2. 4 1
      static/app/utils/replays/types.tsx

+ 6 - 1
fixtures/js-stubs/replay/helpers.ts

@@ -1,3 +1,5 @@
+import {SlowClickFrame} from 'sentry/utils/replays/types';
+
 import * as BreadcrumbFrameData from './replayBreadcrumbFrameData';
 import * as ReplayFrameEvents from './replayFrameEvents';
 import * as ReplaySpanFrameData from './replaySpanFrameData';
@@ -37,12 +39,15 @@ export function DeadClickEvent({timestamp}: {timestamp: Date}) {
         timestamp,
         message: 'nav[aria-label="Primary Navigation"] > div > a#sidebar-item-projects',
         data: {
+          node: {
+            tagName: 'a',
+          },
           nodeId: 42,
           url: '',
           timeAfterClickMs: 7000,
           endReason: 'timeout',
         },
-      }),
+      } as SlowClickFrame),
     },
   });
 }

+ 4 - 1
static/app/utils/replays/types.tsx

@@ -98,7 +98,10 @@ export function isPaintFrame(frame: SpanFrame): frame is PaintFrame {
 }
 
 export function isDeadClick(frame: SlowClickFrame) {
-  return frame.data.endReason === 'timeout';
+  return (
+    ['a', 'button', 'input'].includes(frame.data.node?.tagName.toLowerCase() ?? '') &&
+    frame.data.endReason === 'timeout'
+  );
 }
 
 export function isDeadRageClick(frame: SlowClickFrame) {