feat(new-trace): Added pageload analytics (#68361)

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

static/app/utils/analytics/performanceAnalyticsEvents.tsx

@@ -171,6 +171,12 @@ export type PerformanceEventParameters = {
     transaction: string;
   };
   'performance_views.trace_view.view': {};
+  'performance_views.trace_view_v1_page_load': {
+    organization: Organization;
+  };
+  'performance_views.trace_view_v1_view_event_details': {
+    organization: Organization;
+  };
   'performance_views.transactionEvents.cellaction': {
     action: string;
   };
@@ -242,6 +248,10 @@ export const performanceEventMap: Record<PerformanceEventKey, string | null> = {
     'Performance Views: Landing Widget Interaction',
   'performance_views.landingv3.widget.switch':
     'Performance Views: Landing Widget Switched',
+  'performance_views.trace_view_v1_page_load':
+    'Performance Views: Trace View v1 Page Load',
+  'performance_views.trace_view_v1_view_event_details':
+    'Performance Views: Trace View v1 View Event Details Click',
   'performance_views.landingv3.batch_queries':
     'Performance Views: Landing Query Batching',
   'performance_views.landingv3.display_change': 'Performance Views: Switch Landing Tabs',

static/app/views/performance/newTraceDetails/index.tsx

@@ -1,5 +1,13 @@
 import type React from 'react';
-import {useCallback, useLayoutEffect, useMemo, useReducer, useRef, useState} from 'react';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
 import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
@@ -15,6 +23,7 @@ import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import EventView from 'sentry/utils/discover/eventView';
 import type {
   TraceFullDetailed,
@@ -78,6 +87,12 @@ export function TraceView() {
     return slug;
   }, [params.traceSlug]);
 
+  useEffect(() => {
+    trackAnalytics('performance_views.trace_view_v1_page_load', {
+      organization,
+    });
+  }, [organization]);
+
   const queryParams = useMemo(() => {
     const normalizedParams = normalizeDateTimeParams(qs.parse(location.search), {
       allowAbsolutePageDatetime: true,

static/app/views/performance/newTraceDetails/traceDrawer/details/error.tsx

@@ -82,7 +82,10 @@ export function ErrorNodeDetails({
           <Button size="xs" onClick={_e => onTabScrollToNode(node)}>
             {t('Show in view')}
           </Button>
-          <TraceDrawerComponents.EventDetailsLink node={node} />
+          <TraceDrawerComponents.EventDetailsLink
+            node={node}
+            organization={organization}
+          />
           <Button size="xs" to={generateIssueEventTarget(node.value, organization)}>
             {t('Go to Issue')}
           </Button>

static/app/views/performance/newTraceDetails/traceDrawer/details/span.tsx

@@ -59,7 +59,10 @@ export function SpanNodeDetails({
           <Button size="xs" onClick={_e => onTabScrollToNode(node)}>
             {t('Show in view')}
           </Button>
-          <TraceDrawerComponents.EventDetailsLink node={node} />
+          <TraceDrawerComponents.EventDetailsLink
+            node={node}
+            organization={organization}
+          />
         </TraceDrawerComponents.Actions>
       </TraceDrawerComponents.HeaderContainer>
       {event.projectSlug ? (

static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx

@@ -7,6 +7,8 @@ import {DataSection} from 'sentry/components/events/styles';
 import {Tooltip} from 'sentry/components/tooltip';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import type {Organization} from 'sentry/types';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {getDuration} from 'sentry/utils/formatters';
 import type {ColorOrAlias} from 'sentry/utils/theme';
 import {
@@ -107,6 +109,7 @@ const HeaderContainer = styled(Title)`
 
 interface EventDetailsLinkProps {
   node: TraceTreeNode<TraceTree.NodeValue>;
+  organization: Organization;
 }
 
 function EventDetailsLink(props: EventDetailsLinkProps) {
@@ -154,6 +157,11 @@ function EventDetailsLink(props: EventDetailsLinkProps) {
       }
       size="xs"
       to={locationDescriptor}
+      onClick={() => {
+        trackAnalytics('performance_views.trace_details.view_event_details', {
+          organization: props.organization,
+        });
+      }}
     >
       {t('View Event Details')}
     </LinkButton>

static/app/views/performance/newTraceDetails/traceDrawer/details/transaction.tsx

@@ -323,7 +323,10 @@ export function TransactionNodeDetails({
           <Button size="xs" onClick={_e => onTabScrollToNode(node)}>
             {t('Show in view')}
           </Button>
-          <TraceDrawerComponents.EventDetailsLink node={node} />
+          <TraceDrawerComponents.EventDetailsLink
+            node={node}
+            organization={organization}
+          />
           <Button
             size="xs"
             icon={<IconOpen />}