From 673084a7c60b6331d8854b8ec7c71e416faabb19 Mon Sep 17 00:00:00 2001
From: Roman Zavarnitsyn <rom4ek93@gmail.com>
Date: Tue, 28 Jan 2025 00:48:14 +0100
Subject: [PATCH] feat(replays): add scroll breadcrumb

---
 static/app/utils/replays/getFrameDetails.tsx             | 8 ++++++++
 static/app/utils/replays/replayReader.tsx                | 4 +++-
 static/app/utils/replays/types.tsx                       | 9 +++++++++
 .../replays/detail/breadcrumbs/useBreadcrumbFilters.tsx  | 2 ++
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/static/app/utils/replays/getFrameDetails.tsx b/static/app/utils/replays/getFrameDetails.tsx
index adc9c0fe1e3e36..31898a29a5b496 100644
--- a/static/app/utils/replays/getFrameDetails.tsx
+++ b/static/app/utils/replays/getFrameDetails.tsx
@@ -42,6 +42,7 @@ import type {
   NavFrame,
   RawBreadcrumbFrame,
   ReplayFrame,
+  ScrollFrame,
   SlowClickFrame,
   SwipeFrame,
   TapFrame,
@@ -211,6 +212,13 @@ const MAPPER_FOR_FRAME: Record<string, (frame: any) => Details> = {
     title: 'User Swipe',
     icon: <IconTap size="xs" />,
   }),
+  'ui.scroll': (frame: ScrollFrame) => ({
+    color: 'blue400',
+    description: frame.data,
+    tabKey: TabKey.BREADCRUMBS,
+    title: 'User Scroll',
+    icon: <IconTap size="xs" />,
+  }),
   'ui.tap': (frame: TapFrame) => ({
     color: 'purple400',
     description: frame.message,
diff --git a/static/app/utils/replays/replayReader.tsx b/static/app/utils/replays/replayReader.tsx
index 99a3d4f0e86f65..526bc0b522e0c9 100644
--- a/static/app/utils/replays/replayReader.tsx
+++ b/static/app/utils/replays/replayReader.tsx
@@ -669,7 +669,9 @@ export default class ReplayReader {
     const crumbs = removeDuplicateClicks(
       this._sortedBreadcrumbFrames.filter(
         frame =>
-          ['navigation', 'ui.click', 'ui.tap', 'ui.swipe'].includes(frame.category) ||
+          ['navigation', 'ui.click', 'ui.tap', 'ui.swipe', 'ui.scroll'].includes(
+            frame.category
+          ) ||
           (frame.category === 'ui.slowClickDetected' &&
             (isDeadClick(frame as SlowClickFrame) ||
               isDeadRageClick(frame as SlowClickFrame)))
diff --git a/static/app/utils/replays/types.tsx b/static/app/utils/replays/types.tsx
index 60507161d139db..6b1cb1c3105899 100644
--- a/static/app/utils/replays/types.tsx
+++ b/static/app/utils/replays/types.tsx
@@ -82,6 +82,13 @@ type MobileBreadcrumbTypes =
       type: string;
       message?: string;
     }
+  | {
+      category: 'ui.scroll';
+      data: any;
+      timestamp: number;
+      type: string;
+      message?: string;
+    }
   | {
       category: 'device.battery';
       data: {charging: boolean; level: number};
@@ -366,6 +373,7 @@ export type BlurFrame = HydratedBreadcrumb<'ui.blur'>;
 export type ClickFrame = HydratedBreadcrumb<'ui.click'>;
 export type TapFrame = HydratedBreadcrumb<'ui.tap'>;
 export type SwipeFrame = HydratedBreadcrumb<'ui.swipe'>;
+export type ScrollFrame = HydratedBreadcrumb<'ui.scroll'>;
 export type ConsoleFrame = HydratedBreadcrumb<'console'>;
 export type FocusFrame = HydratedBreadcrumb<'ui.focus'>;
 export type InputFrame = HydratedBreadcrumb<'ui.input'>;
@@ -403,6 +411,7 @@ export const BreadcrumbCategories = [
   'ui.click',
   'ui.tap',
   'ui.swipe',
+  'ui.scroll',
   'ui.focus',
   'ui.input',
   'ui.keyDown',
diff --git a/static/app/views/replays/detail/breadcrumbs/useBreadcrumbFilters.tsx b/static/app/views/replays/detail/breadcrumbs/useBreadcrumbFilters.tsx
index 34339d66850f5f..7ab1495d70f577 100644
--- a/static/app/views/replays/detail/breadcrumbs/useBreadcrumbFilters.tsx
+++ b/static/app/views/replays/detail/breadcrumbs/useBreadcrumbFilters.tsx
@@ -51,6 +51,7 @@ const TYPE_TO_LABEL: Record<string, string> = {
   input: 'Input',
   tap: 'User Tap',
   swipe: 'User Swipe',
+  scroll: 'User Scroll',
   device: 'Device',
   app: 'App',
   custom: 'Custom',
@@ -77,6 +78,7 @@ const OPORCATEGORY_TO_TYPE: Record<string, keyof typeof TYPE_TO_LABEL> = {
   'ui.click': 'click',
   'ui.tap': 'tap',
   'ui.swipe': 'swipe',
+  'ui.scroll': 'scroll',
   'ui.keyDown': 'keydown',
   'ui.input': 'input',
   feedback: 'feedback',