ref(replays): track analytics on chapter and regen click (#95758)

Author: aliu39

static/app/utils/analytics/replayAnalyticsEvents.tsx

@@ -2,6 +2,10 @@ import type {LayoutKey} from 'sentry/utils/replays/hooks/useReplayLayout';
 import type {Output} from 'sentry/views/replays/detail/network/details/getOutputType';
 
 export type ReplayEventParameters = {
+  'replay.ai-summary.chapter-clicked': {
+    chapter_type?: 'error' | 'feedback';
+  };
+  'replay.ai-summary.regenerate-requested': Record<string, unknown>;
   'replay.canvas-detected-banner-clicked': {
     sdk_needs_update?: boolean;
   };
@@ -130,6 +134,8 @@ export type ReplayEventParameters = {
 type ReplayEventKey = keyof ReplayEventParameters;
 
 export const replayEventMap: Record<ReplayEventKey, string | null> = {
+  'replay.ai-summary.chapter-clicked': 'Clicked Replay AI Summary Chapter',
+  'replay.ai-summary.regenerate-requested': 'Requested to Regenerate Replay AI Summary',
   'replay.canvas-detected-banner-clicked': 'Clicked Canvas Detected in Replay Banner',
   'replay.details-data-loaded': 'Replay Details Data Loaded',
   'replay.details-has-hydration-error': 'Replay Details Has Hydration Error',

static/app/views/replays/detail/ai/ai.tsx

@@ -10,6 +10,7 @@ import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {IconSeer, IconSync, IconThumb} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjectFromId from 'sentry/utils/useProjectFromId';
@@ -147,7 +148,12 @@ function AiContent() {
               priority="default"
               type="button"
               size="xs"
-              onClick={() => refetch()}
+              onClick={() => {
+                refetch();
+                trackAnalytics('replay.ai-summary.regenerate-requested', {
+                  organization,
+                });
+              }}
               icon={<IconSync size="xs" />}
             >
               {t('Regenerate')}

static/app/views/replays/detail/ai/chapterList.tsx

@@ -8,9 +8,11 @@ import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {IconChevron, IconFire, IconMegaphone} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
 import useCurrentHoverTime from 'sentry/utils/replays/playback/providers/useCurrentHoverTime';
 import type {ReplayFrame} from 'sentry/utils/replays/types';
+import useOrganization from 'sentry/utils/useOrganization';
 import BreadcrumbRow from 'sentry/views/replays/detail/breadcrumbs/breadcrumbRow';
 import TimestampButton from 'sentry/views/replays/detail/timestampButton';
 
@@ -107,6 +109,8 @@ function ChapterRow({
   const hasOccurred = currentTime >= startOffset;
   const isBeforeHover = currentHoverTime === undefined || currentHoverTime >= startOffset;
 
+  const organization = useOrganization();
+
   return (
     <ChapterWrapper
       className={classNames(className, {
@@ -119,7 +123,16 @@ function ChapterRow({
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <Chapter error={error} feedback={feedback}>
+      <Chapter
+        error={error}
+        feedback={feedback}
+        onClick={() =>
+          trackAnalytics('replay.ai-summary.chapter-clicked', {
+            chapter_type: error ? 'error' : feedback ? 'feedback' : undefined,
+            organization,
+          })
+        }
+      >
         <ChapterIconWrapper>
           {error ? (
             isHovered ? (