chore(trace): Don't call old trace endpoint from event details (#70161)

- As far as I can tell we don't use quickTrace at all in event details,
and its 2 fairly expensive queries, removing them entirely

static/app/utils/performance/quickTrace/quickTraceQuery.tsx

@@ -18,9 +18,16 @@ import {
 type QueryProps = Omit<DiscoverQueryProps, 'api' | 'eventView'> & {
   children: (props: QuickTraceQueryChildrenProps) => React.ReactNode;
   event: Event | undefined;
+  skipLight?: boolean;
+  type?: 'detailed' | 'spans';
 };
 
-export default function QuickTraceQuery({children, event, ...props}: QueryProps) {
+export default function QuickTraceQuery({
+  children,
+  event,
+  skipLight,
+  ...props
+}: QueryProps) {
   const renderEmpty = () => (
     <Fragment>
       {children({
@@ -44,6 +51,83 @@ export default function QuickTraceQuery({children, event, ...props}: QueryProps)
   }
 
   const {start, end} = getTraceTimeRangeFromEvent(event);
+  if (skipLight) {
+    return (
+      <TraceFullQuery
+        eventId={event.id}
+        traceId={traceId}
+        start={start}
+        end={end}
+        {...props}
+      >
+        {traceFullResults => {
+          const scope = new Sentry.Scope();
+          const traceErrorMsg =
+            'Updated: Trace endpoints returning non-array in response';
+          scope.setFingerprint([traceErrorMsg]);
+
+          if (
+            !traceFullResults.isLoading &&
+            traceFullResults.error === null &&
+            traceFullResults.traces !== null
+          ) {
+            const orphanError = traceFullResults.traces.orphan_errors?.find(
+              e => e.event_id === event.id
+            );
+            if (orphanError) {
+              return children({
+                ...traceFullResults,
+                trace: [],
+                orphanErrors: [orphanError],
+                currentEvent: orphanError,
+              });
+            }
+
+            const traceTransactions = traceFullResults.traces.transactions;
+
+            try {
+              for (const subtrace of traceTransactions) {
+                try {
+                  const trace = flattenRelevantPaths(event, subtrace);
+                  return children({
+                    ...traceFullResults,
+                    trace,
+                    currentEvent: trace.find(e => isCurrentEvent(e, event)) ?? null,
+                  });
+                } catch {
+                  // let this fall through and check the next subtrace
+                  // or use the trace lite results
+                }
+              }
+            } catch {
+              // capture exception and let this fall through to
+              // use the /events-trace-lite/ response below
+              scope.setExtras({
+                traceTransactions,
+                traceFullResults,
+              });
+              Sentry.captureException(new Error(traceErrorMsg), scope);
+            }
+          }
+
+          return children({
+            // only use the light results loading state if it didn't error
+            // if it did, we should rely on the full results
+            isLoading: traceFullResults.isLoading,
+            // swallow any errors from the light results because we
+            // should rely on the full results in this situations
+            error: traceFullResults.error,
+            trace: traceFullResults.traces?.transactions ?? [],
+            // if we reach this point but there were some traces in the full results,
+            // that means there were other transactions in the trace, but the current
+            // event could not be found
+            type: traceFullResults.traces?.transactions?.length ? 'missing' : 'empty',
+            currentEvent: null,
+          });
+        }}
+      </TraceFullQuery>
+    );
+  }
 
   return (
     <TraceLiteQuery

static/app/views/discover/eventDetails/content.tsx

@@ -311,6 +311,7 @@ function EventDetailsContent(props: Props) {
                 event={event}
                 location={location}
                 orgSlug={organization.slug}
+                skipLight={false}
               >
                 {results => render(results, metaResults)}
               </QuickTraceQuery>

static/app/views/issueDetails/groupEventDetails/groupEventDetails.tsx

@@ -24,8 +24,6 @@ import type {Event} from 'sentry/types/event';
 import {defined} from 'sentry/utils';
 import {browserHistory} from 'sentry/utils/browserHistory';
 import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
-import {QuickTraceContext} from 'sentry/utils/performance/quickTrace/quickTraceContext';
-import QuickTraceQuery from 'sentry/utils/performance/quickTrace/quickTraceQuery';
 import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import usePrevious from 'sentry/utils/usePrevious';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
@@ -184,33 +182,18 @@ function GroupEventDetails(props: GroupEventDetailsProps) {
             />
           ) : (
             <Fragment>
-              <QuickTraceQuery
-                event={eventWithMeta}
-                location={location}
-                orgSlug={organization.slug}
-              >
-                {results => {
-                  return (
-                    <StyledLayoutMain>
-                      {renderGroupStatusBanner()}
-                      <EscalatingIssuesFeedback
-                        organization={organization}
-                        group={group}
-                      />
-                      <QuickTraceContext.Provider value={results}>
-                        {eventWithMeta && issueTypeConfig.stats.enabled && (
-                          <GroupEventHeader
-                            group={group}
-                            event={eventWithMeta}
-                            project={project}
-                          />
-                        )}
-                        {renderContent()}
-                      </QuickTraceContext.Provider>
-                    </StyledLayoutMain>
-                  );
-                }}
-              </QuickTraceQuery>
+              <StyledLayoutMain>
+                {renderGroupStatusBanner()}
+                <EscalatingIssuesFeedback organization={organization} group={group} />
+                {eventWithMeta && issueTypeConfig.stats.enabled && (
+                  <GroupEventHeader
+                    group={group}
+                    event={eventWithMeta}
+                    project={project}
+                  />
+                )}
+                {renderContent()}
+              </StyledLayoutMain>
               <StyledLayoutSide>
                 <GroupSidebar
                   organization={organization}

static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx

@@ -51,7 +51,10 @@ import {
 import type {EventTransaction} from 'sentry/types/event';
 import {EntryType} from 'sentry/types/event';
 import {shouldShowCustomErrorResourceConfig} from 'sentry/utils/issueTypeConfig';
+import {QuickTraceContext} from 'sentry/utils/performance/quickTrace/quickTraceContext';
+import QuickTraceQuery from 'sentry/utils/performance/quickTrace/quickTraceQuery';
 import {getReplayIdFromEvent} from 'sentry/utils/replays/getReplayIdFromEvent';
+import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {ResourcesAndMaybeSolutions} from 'sentry/views/issueDetails/resourcesAndMaybeSolutions';
 
@@ -97,6 +100,7 @@ function DefaultGroupEventDetailsContent({
 }: Required<GroupEventDetailsContentProps>) {
   const organization = useOrganization();
   const hasNewTagsUI = useHasNewTagsUI();
+  const location = useLocation();
   const tagsRef = useRef<HTMLDivElement>(null);
 
   const projectSlug = project.slug;
@@ -188,7 +192,21 @@ function DefaultGroupEventDetailsContent({
       <GroupEventEntry entryType={EntryType.STACKTRACE} {...eventEntryProps} />
       <GroupEventEntry entryType={EntryType.THREADS} {...eventEntryProps} />
       {hasAnrImprovementsFeature && isANR && (
-        <AnrRootCause event={event} organization={organization} />
+        <QuickTraceQuery
+          event={event}
+          location={location}
+          orgSlug={organization.slug}
+          type={'spans'}
+          skipLight
+        >
+          {results => {
+            return (
+              <QuickTraceContext.Provider value={results}>
+                <AnrRootCause event={event} organization={organization} />
+              </QuickTraceContext.Provider>
+            );
+          }}
+        </QuickTraceQuery>
       )}
       {group.issueCategory === IssueCategory.PERFORMANCE && (
         <SpanEvidenceSection

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

@@ -477,6 +477,7 @@ function NewTraceDetailsTransactionBar(props: Props) {
           event={embeddedChildren}
           location={location}
           orgSlug={organization.slug}
+          skipLight={false}
         >
           {results => (
             <ProfilesProvider

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

@@ -136,6 +136,7 @@ function EventDetailsContent(props: Props) {
             event={transaction}
             location={location}
             orgSlug={organization.slug}
+            skipLight={false}
           >
             {results => (
               <TransactionProfileIdProvider