Browse Source

feat(replay): fire analytics event on issue details replay tab (#48929)

## Summary
Fires an analytics event when we render an issues group replay list.
Elias Hussary 1 year ago
parent
commit
5a164b606d

+ 5 - 0
static/app/utils/analytics/replayAnalyticsEvents.tsx

@@ -65,6 +65,10 @@ export type ReplayEventParameters = {
     platform: string;
     project_id: string;
   };
+  'replay.render-issues-group-list': {
+    platform: string | undefined;
+    project_id: string | undefined;
+  };
   'replay.render-player': {
     aspect_ratio: 'portrait' | 'landscape';
     /*
@@ -103,6 +107,7 @@ export const replayEventMap: Record<ReplayEventKey, string | null> = {
   'replay.list-view-setup-sidebar': 'Views Set Up Replays Sidebar',
   'replay.play-pause': 'Played/Paused Replay',
   'replay.render-issues-detail-count': 'Render Issues Detail Replay Count',
+  'replay.render-issues-group-list': 'Render Issues Detail Replay List',
   'replay.render-player': 'Rendered ReplayPlayer',
   'replay.search': 'Searched Replay',
   'replay.toggle-fullscreen': 'Toggled Replay Fullscreen',

+ 12 - 1
static/app/views/issueDetails/groupReplays/groupReplays.tsx

@@ -1,9 +1,10 @@
-import {useMemo} from 'react';
+import {useEffect, useMemo} from 'react';
 import styled from '@emotion/styled';
 import {Location} from 'history';
 
 import * as Layout from 'sentry/components/layouts/thirds';
 import type {Group, Organization} from 'sentry/types';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import EventView from 'sentry/utils/discover/eventView';
 import useReplayList from 'sentry/utils/replays/hooks/useReplayList';
 import {useLocation} from 'sentry/utils/useLocation';
@@ -36,6 +37,16 @@ function GroupReplays({group}: Props) {
     organization,
   });
 
+  useEffect(() => {
+    trackAnalytics('replay.render-issues-group-list', {
+      project_id: group.project.id,
+      platform: group.project.platform,
+      organization,
+    });
+    // we only want to fire this event once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   if (!eventView) {
     return (
       <StyledLayoutPage withPadding>