Browse Source

fix(replays): remove slow click surfacing on DOM events tab (#54113)

We want to hide slow clicks on the UI, specifically in the DOM events
tab.

Before:
<img width="633" alt="SCR-20230803-jwfu"
src="https://github.com/getsentry/sentry/assets/56095982/a9f72401-918a-4cde-af1e-8626ef6c8b0d">

After:
<img width="618" alt="SCR-20230803-jwex"
src="https://github.com/getsentry/sentry/assets/56095982/f22992d2-3306-4211-b695-b6a9a5a6a5be">


Also closes https://github.com/getsentry/sentry/issues/54068.
Michelle Zhang 1 year ago
parent
commit
7ff917239e

+ 2 - 2
static/app/utils/replays/getFrameDetails.tsx

@@ -63,7 +63,7 @@ const MAPPER_FOR_FRAME: Record<string, (frame) => Details> = {
           'Click on [selector] did not cause a visible effect within [timeout] ms',
           {
             selector: stringifyNodeAttributes(node),
-            timeout: frame.data.timeAfterClickMs,
+            timeout: Math.round(frame.data.timeAfterClickMs),
           }
         ),
         type: BreadcrumbType.ERROR,
@@ -77,7 +77,7 @@ const MAPPER_FOR_FRAME: Record<string, (frame) => Details> = {
         'Click on [selector] took [duration] ms to have a visible effect',
         {
           selector: stringifyNodeAttributes(node),
-          duration: frame.data.timeAfterClickMs,
+          duration: Math.round(frame.data.timeAfterClickMs),
         }
       ),
       type: BreadcrumbType.WARNING,

+ 10 - 2
static/app/utils/replays/replayReader.tsx

@@ -189,7 +189,16 @@ export default class ReplayReader {
   );
 
   getDOMFrames = memoize(() => [
-    ...this._sortedBreadcrumbFrames.filter(frame => 'nodeId' in (frame.data ?? {})),
+    ...this._sortedBreadcrumbFrames
+      .filter(frame => 'nodeId' in (frame.data ?? {}))
+      .filter(
+        frame =>
+          !(
+            (frame.category === 'ui.slowClickDetected' &&
+              !isDeadClick(frame as SlowClickFrame)) ||
+            frame.category === 'ui.multiClick'
+          )
+      ),
     ...this._sortedSpanFrames.filter(frame => 'nodeId' in (frame.data ?? {})),
   ]);
 
@@ -215,7 +224,6 @@ export default class ReplayReader {
           (frame.category === 'ui.slowClickDetected' &&
             (isDeadClick(frame as SlowClickFrame) ||
               isDeadRageClick(frame as SlowClickFrame)))
-        // Hiding all ui.multiClick (multi or rage clicks)
       ),
       ...this._sortedSpanFrames.filter(frame =>
         ['navigation.navigate', 'navigation.reload', 'navigation.back_forward'].includes(