feat(replay): Add analytics to timeline zoom buttons (#93910)

Also fixed `replay.view_html` -> `replay.view-html`

---------

Co-authored-by: Michelle Zhang <[email protected]>

Author: billyvg

static/app/components/replays/breadcrumbs/breadcrumbItem.tsx

@@ -111,7 +111,7 @@ function BreadcrumbItem({
       onShowSnippet();
       e.preventDefault();
       e.stopPropagation();
-      trackAnalytics('replay.view_html', {
+      trackAnalytics('replay.view-html', {
         organization,
         breadcrumb_type: 'category' in frame ? frame.category : 'unknown',
       });

static/app/components/replays/timeAndScrubberGrid.tsx

@@ -1,4 +1,4 @@
-import {useRef} from 'react';
+import {useCallback, useRef} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -14,10 +14,12 @@ import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {IconAdd, IconSubtract} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import useTimelineScale, {
   TimelineScaleContextProvider,
 } from 'sentry/utils/replays/hooks/useTimelineScale';
 import {useReplayPrefs} from 'sentry/utils/replays/playback/providers/replayPreferencesContext';
+import useOrganization from 'sentry/utils/useOrganization';
 
 type TimeAndScrubberGridProps = {
   isCompact?: boolean;
@@ -27,18 +29,35 @@ type TimeAndScrubberGridProps = {
 
 function TimelineSizeBar({isLoading}: {isLoading?: boolean}) {
   const {replay} = useReplayContext();
+  const organization = useOrganization();
   const [timelineScale, setTimelineScale] = useTimelineScale();
   const durationMs = replay?.getDurationMs();
   const maxScale = durationMs ? Math.ceil(durationMs / 60000) : 10;
 
+  const handleZoomOut = useCallback(() => {
+    const newScale = Math.max(timelineScale - 1, 1);
+    setTimelineScale(newScale);
+    trackAnalytics('replay.timeline.zoom-out', {
+      organization,
+    });
+  }, [timelineScale, setTimelineScale, organization]);
+
+  const handleZoomIn = useCallback(() => {
+    const newScale = Math.min(timelineScale + 1, maxScale);
+    setTimelineScale(newScale);
+    trackAnalytics('replay.timeline.zoom-in', {
+      organization,
+    });
+  }, [timelineScale, maxScale, setTimelineScale, organization]);
+
   return (
     <ButtonBar gap={0.5}>
       <Button
         size="xs"
         title={t('Zoom out')}
         icon={<IconSubtract />}
         borderless
-        onClick={() => setTimelineScale(Math.max(timelineScale - 1, 1))}
+        onClick={handleZoomOut}
         aria-label={t('Zoom out')}
         disabled={timelineScale === 1 || isLoading}
       />
@@ -51,7 +70,7 @@ function TimelineSizeBar({isLoading}: {isLoading?: boolean}) {
         title={t('Zoom in')}
         icon={<IconAdd />}
         borderless
-        onClick={() => setTimelineScale(Math.min(timelineScale + 1, maxScale))}
+        onClick={handleZoomIn}
         aria-label={t('Zoom in')}
         disabled={timelineScale === maxScale || isLoading}
       />

static/app/utils/analytics/replayAnalyticsEvents.tsx

@@ -113,6 +113,8 @@ export type ReplayEventParameters = {
   'replay.search': {
     search_keys: string;
   };
+  'replay.timeline.zoom-in': Record<string, unknown>;
+  'replay.timeline.zoom-out': Record<string, unknown>;
   'replay.toggle-fullscreen': {
     context: string;
     fullscreen: boolean;
@@ -153,6 +155,8 @@ export const replayEventMap: Record<ReplayEventKey, string | null> = {
   'replay.render-issues-group-list': 'Render Issues Detail Replay List',
   'replay.render-missing-replay-alert': 'Render Missing Replay Alert',
   'replay.search': 'Searched Replay',
+  'replay.timeline.zoom-in': 'Zoomed In Replay Timeline',
+  'replay.timeline.zoom-out': 'Zoomed Out Replay Timeline',
   'replay.toggle-fullscreen': 'Toggled Replay Fullscreen',
   'replay.view-html': 'Clicked "View HTML" in Replay Breadcrumb',
 };