feat(perf): Add analytics events for vital detail and trace view (#35649)

static/app/utils/analytics/performanceAnalyticsEvents.tsx

@@ -65,6 +65,11 @@ export type PerformanceEventParameters = {
   'performance_views.tour.advance': PerformanceTourParams;
   'performance_views.tour.close': PerformanceTourParams;
   'performance_views.tour.start': {};
+  'performance_views.trace_view.open_in_discover': {};
+  'performance_views.trace_view.open_transaction_details': {
+    operation: string;
+    transaction: string;
+  };
   'performance_views.trace_view.view': {};
   'performance_views.transaction_summary.change_chart_display': {
     from_chart: string;
@@ -84,6 +89,10 @@ export type PerformanceEventParameters = {
     direction: string;
     widget_type: string;
   };
+  'performance_views.vital_detail.switch_vital': {
+    from_vital: string;
+    to_vital: string;
+  };
   'performance_views.vital_detail.view': {};
 };
 
@@ -115,7 +124,13 @@ export const performanceEventMap: Record<PerformanceEventKey, string | null> = {
   'performance_views.overview.view': 'Performance Views: Transaction overview view',
   'performance_views.overview.search': 'Performance Views: Transaction overview search',
   'performance_views.vital_detail.view': 'Performance Views: Vital Detail viewed',
+  'performance_views.vital_detail.switch_vital':
+    'Performance Views: Vital Detail vital type switched',
   'performance_views.trace_view.view': 'Performance Views: Trace View viewed',
+  'performance_views.trace_view.open_in_discover':
+    'Performance Views: Trace View open in Discover button clicked',
+  'performance_views.trace_view.open_transaction_details':
+    'Performance Views: Trace View transaction details opened',
   'performance_views.transaction_summary.change_chart_display':
     'Performance Views: Transaction Summary chart display changed',
   'performance_views.transaction_summary.status_breakdown_click':

static/app/views/performance/traceDetails/content.tsx

@@ -13,6 +13,7 @@ import TimeSince from 'sentry/components/timeSince';
 import {t, tct, tn} from 'sentry/locale';
 import {Organization} from 'sentry/types';
 import {defined} from 'sentry/utils';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import EventView from 'sentry/utils/discover/eventView';
 import {QueryError} from 'sentry/utils/discover/genericDiscoverQuery';
 import {getDuration} from 'sentry/utils/formatters';
@@ -333,6 +334,14 @@ class TraceDetailsContent extends Component<Props, State> {
             <ButtonBar gap={1}>
               <DiscoverButton
                 to={traceEventView.getResultsViewUrlTarget(organization.slug)}
+                onClick={() => {
+                  trackAdvancedAnalyticsEvent(
+                    'performance_views.trace_view.open_in_discover',
+                    {
+                      organization,
+                    }
+                  );
+                }}
               >
                 {t('Open in Discover')}
               </DiscoverButton>

static/app/views/performance/traceDetails/transactionDetail.tsx

@@ -21,6 +21,7 @@ import {IconAnchor} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {generateEventSlug} from 'sentry/utils/discover/urls';
 import getDynamicText from 'sentry/utils/getDynamicText';
 import {TraceFullDetailed} from 'sentry/utils/performance/quickTrace/types';
@@ -39,6 +40,16 @@ type Props = {
 };
 
 class TransactionDetail extends Component<Props> {
+  componentDidMount() {
+    const {organization, transaction} = this.props;
+
+    trackAdvancedAnalyticsEvent('performance_views.trace_view.open_transaction_details', {
+      organization,
+      operation: transaction['transaction.op'],
+      transaction: transaction.transaction,
+    });
+  }
+
   renderTransactionErrors() {
     const {organization, transaction} = this.props;
     const {errors} = transaction;

static/app/views/performance/vitalDetail/vitalDetailContent.tsx

@@ -26,6 +26,7 @@ import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization, Project} from 'sentry/types';
 import {generateQueryWithTag} from 'sentry/utils';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {getUtcToLocalDateObject} from 'sentry/utils/dates';
 import EventView from 'sentry/utils/discover/eventView';
 import {WebVital} from 'sentry/utils/discover/fields';
@@ -137,7 +138,7 @@ class VitalDetailContent extends Component<Props, State> {
   }
 
   renderVitalSwitcher() {
-    const {vitalName, location} = this.props;
+    const {vitalName, location, organization} = this.props;
 
     const position = FRONTEND_VITALS.indexOf(vitalName);
 
@@ -159,6 +160,12 @@ class VitalDetailContent extends Component<Props, State> {
                 cursor: undefined,
               },
             });
+
+            trackAdvancedAnalyticsEvent('performance_views.vital_detail.switch_vital', {
+              organization,
+              from_vital: vitalAbbreviations[vitalName] ?? 'undefined',
+              to_vital: vitalAbbreviations[newVitalName] ?? 'undefined',
+            });
           },
         };