feat(issues-trace): Using trace endpoints correctly in anr root cause… (#95075)

Abdkhan14 · Abdullah Khan · web-flow · commit 8f8aa12f58bd · 2025-07-10T12:25:50.000-04:00
… section

- Assigns /events-trace/ (old) and /trace-endpoint/ (new) based on the
trace-spans-format flag.

- Without this change we default to the old events-trace endpoint, which
should only be called for `am1` right now. The flag enforces this.

---------

Co-authored-by: Abdullah Khan &lt;abdullahkhan@PG9Y57YDXQ.local&gt;
diff --git a/static/app/components/events/interfaces/performance/anrRootCause.spec.tsx b/static/app/components/events/interfaces/performance/anrRootCause.spec.tsx
@@ -5,6 +5,25 @@ import {textWithMarkupMatcher} from 'sentry-test/utils';
 import {AnrRootCause} from 'sentry/components/events/interfaces/performance/anrRootCause';
 import type {Event, Thread} from 'sentry/types/event';
 import {EntryType, EventOrGroupType, LockType} from 'sentry/types/event';
+import {DEFAULT_TRACE_VIEW_PREFERENCES} from 'sentry/views/performance/newTraceDetails/traceState/tracePreferences';
+import {TraceStateProvider} from 'sentry/views/performance/newTraceDetails/traceState/traceStateProvider';
+
+jest.mock('sentry/views/performance/newTraceDetails/traceApi/useTrace', () => {
+  return {
+    useTrace: jest.fn(() => ({
+      data: {
+        transactions: [],
+        orphan_errors: [],
+      },
+    })),
+  };
+});
+
+const wrapper = ({children}: {children: React.ReactNode}) => (
+  <TraceStateProvider initialPreferences={DEFAULT_TRACE_VIEW_PREFERENCES}>
+    {children}
+  </TraceStateProvider>
+);
 
 const makeEventWithThreads = (threads: Thread[]): Event => {
   const event: Event = {
@@ -13,6 +32,7 @@ const makeEventWithThreads = (threads: Thread[]): Event => {
     eventID: '020eb33f6ce64ed6adc60f8993535816',
     projectID: '2',
     size: 3481,
+
     entries: [
       {
         data: {
@@ -215,7 +235,7 @@ describe('anrRootCause', function () {
     ]);
     const {organization} = initializeOrg();
     const org = {...organization, features: ['anr-analyze-frames']};
-    render(<AnrRootCause event={event} organization={org} />);
+    render(<AnrRootCause event={event} organization={org} />, {wrapper});
 
     expect(
       screen.getByText(
diff --git a/static/app/components/events/interfaces/performance/anrRootCause.tsx b/static/app/components/events/interfaces/performance/anrRootCause.tsx
@@ -1,11 +1,15 @@
-import {Fragment, useContext, useEffect} from 'react';
+import {Fragment, useEffect} from 'react';
 import styled from '@emotion/styled';
 
 import {analyzeFramesForRootCause} from 'sentry/components/events/interfaces/analyzeFrames';
 import {StackTraceContent} from 'sentry/components/events/interfaces/crashContent/stackTrace';
 import NoStackTraceMessage from 'sentry/components/events/interfaces/noStackTraceMessage';
 import getThreadStacktrace from 'sentry/components/events/interfaces/threads/threadSelector/getThreadStacktrace';
-import {getThreadById, inferPlatform} from 'sentry/components/events/interfaces/utils';
+import {
+  getEventTimestampInSeconds,
+  getThreadById,
+  inferPlatform,
+} from 'sentry/components/events/interfaces/utils';
 import GlobalSelectionLink from 'sentry/components/globalSelectionLink';
 import ShortId from 'sentry/components/group/inboxBadges/shortId';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
@@ -16,10 +20,12 @@ import type {Organization} from 'sentry/types/organization';
 import {StackView} from 'sentry/types/stacktrace';
 import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import {QuickTraceContext} from 'sentry/utils/performance/quickTrace/quickTraceContext';
 import useProjects from 'sentry/utils/useProjects';
 import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
 import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
+import {useIssuesTraceTree} from 'sentry/views/performance/newTraceDetails/traceApi/useIssuesTraceTree';
+import {useTrace} from 'sentry/views/performance/newTraceDetails/traceApi/useTrace';
+import {isEAPTraceOccurrence} from 'sentry/views/performance/newTraceDetails/traceGuards';
 
 enum AnrRootCauseAllowlist {
   PERFORMANCE_FILE_IO_MAIN_THREAD_GROUP_TYPE = 1008,
@@ -32,7 +38,16 @@ interface Props {
 }
 
 export function AnrRootCause({event, organization}: Props) {
-  const quickTrace = useContext(QuickTraceContext);
+  const traceSlug = event.contexts.trace?.trace_id ?? '';
+
+  const trace = useTrace({
+    timestamp: getEventTimestampInSeconds(event),
+    traceSlug,
+    limit: 10000,
+  });
+  const tree = useIssuesTraceTree({trace, replay: null});
+  const traceNode = tree.root.children[0];
+
   const {projects} = useProjects();
 
   const anrCulprit = analyzeFramesForRootCause(event);
@@ -49,20 +64,19 @@ export function AnrRootCause({event, organization}: Props) {
     });
   }, [anrCulprit, organization, event?.groupID]);
 
-  const noPerfIssueOnTrace =
-    !quickTrace ||
-    quickTrace.error ||
-    quickTrace.trace === null ||
-    quickTrace.trace.length === 0 ||
-    quickTrace.trace[0]?.performance_issues?.length === 0;
+  if (tree.type === 'loading' || tree.type === 'error') {
+    return null;
+  }
+
+  const occurrences = Array.from(traceNode?.occurrences ?? []);
+  const noPerfIssueOnTrace = occurrences.length === 0;
 
   if (noPerfIssueOnTrace && !anrCulprit) {
     return null;
   }
 
-  const potentialAnrRootCause = quickTrace?.trace?.[0]?.performance_issues?.filter(
-    issue =>
-      Object.values(AnrRootCauseAllowlist).includes(issue.type as AnrRootCauseAllowlist)
+  const potentialAnrRootCause = occurrences.filter(issue =>
+    Object.values(AnrRootCauseAllowlist).includes(issue.type as AnrRootCauseAllowlist)
   );
 
   const helpText =
@@ -119,28 +133,34 @@ export function AnrRootCause({event, organization}: Props) {
       type={SectionKey.SUSPECT_ROOT_CAUSE}
       help={helpText}
     >
-      {potentialAnrRootCause?.map(issue => {
-        const project = projects.find(p => p.id === issue.project_id.toString());
+      {potentialAnrRootCause?.map(occurence => {
+        const project = projects.find(p => p.id === occurence.project_id.toString());
+        const title = isEAPTraceOccurrence(occurence)
+          ? occurence.description
+          : occurence.title;
+        const shortId = isEAPTraceOccurrence(occurence)
+          ? occurence.short_id
+          : occurence.issue_short_id;
         return (
-          <IssueSummary key={issue.issue_id}>
+          <IssueSummary key={occurence.issue_id}>
             <Title>
               <TitleWithLink
                 to={{
-                  pathname: `/organizations/${organization.id}/issues/${issue.issue_id}/${
-                    issue.event_id ? `events/${issue.event_id}/` : ''
+                  pathname: `/organizations/${organization.id}/issues/${occurence.issue_id}/${
+                    occurence.event_id ? `events/${occurence.event_id}/` : ''
                   }`,
                 }}
               >
-                {issue.title}
+                {title}
                 <Fragment>
                   <Spacer />
-                  <Subtitle title={issue.culprit}>{issue.culprit}</Subtitle>
+                  <Subtitle title={occurence.culprit}>{occurence.culprit}</Subtitle>
                 </Fragment>
               </TitleWithLink>
             </Title>
-            {issue.issue_short_id && (
+            {shortId && (
               <ShortId
-                shortId={issue.issue_short_id}
+                shortId={shortId}
                 avatar={
                   project && <ProjectBadge project={project} hideName avatarSize={12} />
                 }
diff --git a/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx b/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx
@@ -44,6 +44,7 @@ import {Message} from 'sentry/components/events/interfaces/message';
 import {AnrRootCause} from 'sentry/components/events/interfaces/performance/anrRootCause';
 import {EventTraceView} from 'sentry/components/events/interfaces/performance/eventTraceView';
 import {SpanEvidenceSection} from 'sentry/components/events/interfaces/performance/spanEvidence';
+import {TRACE_WATERFALL_PREFERENCES_KEY} from 'sentry/components/events/interfaces/performance/utils';
 import {Request} from 'sentry/components/events/interfaces/request';
 import {StackTrace} from 'sentry/components/events/interfaces/stackTrace';
 import {Template} from 'sentry/components/events/interfaces/template';
@@ -66,11 +67,8 @@ import {IssueType} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
 import {defined} from 'sentry/utils';
 import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
-import {QuickTraceContext} from 'sentry/utils/performance/quickTrace/quickTraceContext';
-import QuickTraceQuery from 'sentry/utils/performance/quickTrace/quickTraceQuery';
 import {isJavascriptPlatform} from 'sentry/utils/platform';
 import {getReplayIdFromEvent} from 'sentry/utils/replays/getReplayIdFromEvent';
-import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {MetricIssuesSection} from 'sentry/views/issueDetails/metricIssues/metricIssuesSection';
 import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
@@ -79,6 +77,8 @@ import {useCopyIssueDetails} from 'sentry/views/issueDetails/streamline/hooks/us
 import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
 import {TraceDataSection} from 'sentry/views/issueDetails/traceDataSection';
 import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
+import {DEFAULT_TRACE_VIEW_PREFERENCES} from 'sentry/views/performance/newTraceDetails/traceState/tracePreferences';
+import {TraceStateProvider} from 'sentry/views/performance/newTraceDetails/traceState/traceStateProvider';
 
 export interface EventDetailsContentProps {
   group: Group;
@@ -92,7 +92,6 @@ export function EventDetailsContent({
   project,
 }: Required<Pick<EventDetailsContentProps, 'group' | 'event' | 'project'>>) {
   const organization = useOrganization();
-  const location = useLocation();
   const hasStreamlinedUI = useHasStreamlinedUI();
   const tagsRef = useRef<HTMLDivElement>(null);
   const eventEntries = useMemo(() => {
@@ -278,21 +277,12 @@ export function EventDetailsContent({
         <ScreenshotDataSection event={event} projectSlug={project.slug} />
       )}
       {isANR && (
-        <QuickTraceQuery
-          event={event}
-          location={location}
-          orgSlug={organization.slug}
-          type={'spans'}
-          skipLight
+        <TraceStateProvider
+          initialPreferences={DEFAULT_TRACE_VIEW_PREFERENCES}
+          preferencesStorageKey={TRACE_WATERFALL_PREFERENCES_KEY}
         >
-          {results => {
-            return (
-              <QuickTraceContext value={results}>
-                <AnrRootCause event={event} organization={organization} />
-              </QuickTraceContext>
-            );
-          }}
-        </QuickTraceQuery>
+          <AnrRootCause event={event} organization={organization} />
+        </TraceStateProvider>
       )}
       {issueTypeConfig.spanEvidence.enabled && (
         <SpanEvidenceSection
diff --git a/static/app/views/performance/newTraceDetails/traceGuards.tsx b/static/app/views/performance/newTraceDetails/traceGuards.tsx
@@ -231,6 +231,14 @@ export function isTraceOccurence(
   return 'issue_id' in issue && issue.event_type !== 'error';
 }
 
+export function isEAPTraceOccurrence(
+  issue: TraceTree.TraceIssue
+): issue is TraceTree.EAPOccurrence {
+  return (
+    isTraceOccurence(issue) && 'event_type' in issue && issue.event_type === 'occurrence'
+  );
+}
+
 export function isEAPMeasurementValue(
   value: number | Measurement | undefined
 ): value is number {
diff --git a/static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx b/static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx
@@ -144,6 +144,8 @@ export declare namespace TraceTree {
   };
 
   type EAPOccurrence = {
+    culprit: string;
+    description: string;
     event_id: string;
     event_type: 'occurrence';
     issue_id: number;
@@ -152,7 +154,8 @@ export declare namespace TraceTree {
     project_slug: string;
     start_timestamp: number;
     transaction: string;
-    description?: string;
+    type: number;
+    short_id?: string;
   };
 
   type EAPSpan = {
diff --git a/static/app/views/performance/newTraceDetails/traceModels/traceTreeTestUtils.tsx b/static/app/views/performance/newTraceDetails/traceModels/traceTreeTestUtils.tsx
@@ -122,6 +122,9 @@ export function makeEAPOccurrence(
     event_type: 'occurrence',
     issue_id: 1,
     level: 'info',
+    culprit: 'code',
+    short_id: 'short_id',
+    type: 0,
     ...overrides,
   };
 }
