fix(trace): track data quality from frontend (#69907)

Afaik we dont have tracking about the actual data quality that our users
experience in its final state. This PR adds such tracking via amplitude
and Sentry metrics

Author: JonasBa

static/app/utils/analytics/tracingEventMap.tsx

@@ -1,4 +1,7 @@
 export type TracingEventParameters = {
+  'trace.shape': {
+    shape: string;
+  };
   'trace.trace_layout.change': {
     layout: string;
   };
@@ -21,6 +24,7 @@ export type TracingEventParameters = {
 export type TracingEventKey = keyof TracingEventParameters;
 
 export const tracingEventMap: Record<TracingEventKey, string | null> = {
+  'trace.shape': 'Trace Shape',
   'trace.trace_layout.change': 'Changed Trace Layout',
   'trace.trace_layout.drawer_minimize': 'Minimized Trace Drawer',
   'trace.trace_layout.show_in_view': 'Clicked Show in View Action',

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

@@ -55,6 +55,7 @@ import {
   loadTraceViewPreferences,
   storeTraceViewPreferences,
 } from 'sentry/views/performance/newTraceDetails/traceState/tracePreferences';
+import {TraceType} from 'sentry/views/performance/traceDetails/newTraceDetailsContent';
 
 import {useTrace} from './traceApi/useTrace';
 import {useTraceMeta} from './traceApi/useTraceMeta';
@@ -71,6 +72,22 @@ import {TraceReducer, type TraceReducerState} from './traceState';
 import {TraceUXChangeAlert} from './traceUXChangeBanner';
 import {useTraceQueryParamStateSync} from './useTraceQueryParamStateSync';
 
+function logTraceType(type: TraceType, organization: Organization) {
+  switch (type) {
+    case TraceType.BROKEN_SUBTRACES:
+    case TraceType.EMPTY_TRACE:
+    case TraceType.MULTIPLE_ROOTS:
+    case TraceType.ONE_ROOT:
+    case TraceType.NO_ROOT:
+    case TraceType.ONLY_ERRORS:
+      traceAnalytics.trackTraceShape(type, organization);
+      break;
+    default: {
+      Sentry.captureMessage('Unknown trace type');
+    }
+  }
+}
+
 export function TraceView() {
   const params = useParams<{traceSlug?: string}>();
   const organization = useOrganization();
@@ -719,6 +736,17 @@ function TraceViewContent(props: TraceViewContentProps) {
 
   const [traceGridRef, setTraceGridRef] = useState<HTMLElement | null>(null);
 
+  // Memoized because it requires tree traversal
+  const shape = useMemo(() => tree.shape, [tree]);
+
+  useEffect(() => {
+    if (tree.type !== 'trace') {
+      return;
+    }
+
+    logTraceType(shape, organization);
+  }, [tree, shape, organization]);
+
   return (
     <TraceExternalLayout>
       <TraceUXChangeAlert />
@@ -772,6 +800,7 @@ function TraceViewContent(props: TraceViewContentProps) {
           ) : null}
 
           <TraceDrawer
+            traceType={shape}
             trace={tree}
             traceGridRef={traceGridRef}
             traces={props.trace}
@@ -934,6 +963,11 @@ function TraceLoading() {
 function TraceError() {
   const linkref = useRef<HTMLAnchorElement>(null);
   const feedback = useFeedbackWidget({buttonRef: linkref});
+
+  useEffect(() => {
+    traceAnalytics.trackFailedToFetchTraceState();
+  }, []);
+
   return (
     <LoadingContainer animate error>
       <div>{t('Ughhhhh, we failed to load your trace...')}</div>
@@ -956,6 +990,11 @@ function TraceError() {
 function TraceEmpty() {
   const linkref = useRef<HTMLAnchorElement>(null);
   const feedback = useFeedbackWidget({buttonRef: linkref});
+
+  useEffect(() => {
+    traceAnalytics.trackEmptyTraceState();
+  }, []);
+
   return (
     <LoadingContainer animate>
       <div>{t('This trace does not contain any data?!')}</div>

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

@@ -1,7 +1,22 @@
+import * as Sentry from '@sentry/react';
+
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import type {TraceType} from 'sentry/views/performance/traceDetails/newTraceDetailsContent';
 
+const trackTraceShape = (shape: TraceType, organization: Organization) => {
+  Sentry.metrics.increment(`trace.trace_shape.${shape}`);
+  trackAnalytics('trace.shape', {
+    shape,
+    organization,
+  });
+};
+
+const trackFailedToFetchTraceState = () =>
+  Sentry.metrics.increment('trace.failed_to_fetch_trace');
+
+const trackEmptyTraceState = () => Sentry.metrics.increment('trace.empty_trace');
+
 const trackLayoutChange = (layout: string, organization: Organization) =>
   trackAnalytics('trace.trace_layout.change', {
     layout,
@@ -61,6 +76,10 @@ const trackTraceWarningType = (type: TraceType, organization: Organization) =>
   });
 
 const traceAnalytics = {
+  // Trace shape
+  trackTraceShape,
+  trackEmptyTraceState,
+  trackFailedToFetchTraceState,
   // Drawer actions
   trackShowInView,
   trackViewEventDetails,

static/app/views/performance/newTraceDetails/traceDrawer/tabs/trace.tsx

@@ -15,6 +15,7 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import Tags from 'sentry/views/discover/tags';
 import {TraceWarnings} from 'sentry/views/performance/newTraceDetails/traceWarnings';
+import type {TraceType} from 'sentry/views/performance/traceDetails/newTraceDetailsContent';
 
 import {isTraceNode} from '../../guards';
 import type {TraceTree, TraceTreeNode} from '../../traceModels/traceTree';
@@ -25,6 +26,7 @@ type TraceDetailsProps = {
   rootEventResults: UseApiQueryResult<EventTransaction, RequestError>;
   tagsQueryResults: UseApiQueryResult<Tag[], RequestError>;
   traceEventView: EventView;
+  traceType: TraceType;
   traces: TraceSplitResults<TraceFullDetailed> | null;
   tree: TraceTree;
 };
@@ -52,7 +54,7 @@ export function TraceDetails(props: TraceDetailsProps) {
 
   return (
     <Fragment>
-      {props.tree.type === 'trace' ? <TraceWarnings type={props.tree.shape} /> : null}
+      {props.tree.type === 'trace' ? <TraceWarnings type={props.traceType} /> : null}
       <IssueList issues={issues} node={props.node} organization={organization} />
       {rootEvent ? (
         <Tags

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

@@ -42,6 +42,7 @@ import {
   getTraceTabTitle,
   type TraceTabsReducerState,
 } from 'sentry/views/performance/newTraceDetails/traceState/traceTabs';
+import type {TraceType} from 'sentry/views/performance/traceDetails/newTraceDetailsContent';
 
 import {
   makeTraceNodeBarColor,
@@ -62,6 +63,7 @@ type TraceDrawerProps = {
   trace: TraceTree;
   traceEventView: EventView;
   traceGridRef: HTMLElement | null;
+  traceType: TraceType;
   trace_dispatch: React.Dispatch<TraceReducerAction>;
   trace_state: TraceReducerState;
   traces: TraceSplitResults<TraceFullDetailed> | null;
@@ -433,6 +435,7 @@ export function TraceDrawer(props: TraceDrawerProps) {
             {props.trace_state.tabs.current_tab ? (
               props.trace_state.tabs.current_tab.node === 'trace' ? (
                 <TraceDetails
+                  traceType={props.traceType}
                   tree={props.trace}
                   node={props.trace.root.children[0]}
                   rootEventResults={props.rootEventResults}