fix(trace-eap-waterfall-replay): Unable to load span details (#93899)

- We have multiple traces associated to a replay, and in the replay
trace tab we load one trace, and append the rest in batches of three, in
to one waterfall.

- The error below was happening because, we were using the trace_id of
the first trace fetched, to fetch the attributes of all the spans in the
waterfall using `/trace-item/..../?trace_id={slug}`. Leading to a 404
for spans that are not part of the first trace.
- Instead of concatenating the fetched results from the batch and
appending as one tree, we take the results and individually append them
to the tree, hence collecting and passing on the correct traceslugs that
the drawer uses to fetch eap span attrs.
<img width="1431" alt="Screenshot 2025-06-19 at 1 08 00 AM"
src="https://github.com/user-attachments/assets/271f4fc8-56db-4c3f-97f8-80703984784b"
/>


- Also fixed the order of traces processed.

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

Author: Abdkhan14

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

@@ -383,7 +383,7 @@ function EAPSpanNodeDetails({
   } = useTraceItemDetails({
     traceItemId: node.value.event_id,
     projectId: node.value.project_id.toString(),
-    traceId,
+    traceId: node.metadata.replayTraceSlug ?? traceId,
     traceItemType: TraceItemDataset.SPANS,
     referrer: 'api.explore.log-item-details', // TODO: change to span details
     enabled: true,

static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx

@@ -265,6 +265,11 @@ export declare namespace TraceTree {
   type Metadata = {
     event_id: string | undefined;
     project_slug: string | undefined;
+    // This is used to track the traceslug associated with a trace in a replay.
+    // This is necessary because a replay has multiple traces and the current ui requires
+    // us to merge them into one trace. We still need to keep track of the original traceSlug
+    // to be able to fetch the correct trace-item details from EAP, in the trace drawer.
+    replayTraceSlug?: string;
     spans?: number;
   };
 
@@ -386,6 +391,11 @@ export class TraceTree extends TraceTreeEventDispatcher {
       meta: TraceMetaQueryResults['data'] | null;
       replay: ReplayRecord | null;
       preferences?: Pick<TracePreferencesState, 'autogroup' | 'missing_instrumentation'>;
+      // This is used to track the traceslug associated with a trace in a replay.
+      // This is necessary because a replay has multiple traces and the current ui requires
+      // us to merge them into one trace. We still need to keep track of the original traceSlug
+      // to be able to fetch the correct trace-item details from EAP, in the trace drawer.
+      replayTraceSlug?: string;
     }
   ): TraceTree {
     const tree = new TraceTree();
@@ -423,6 +433,7 @@ export class TraceTree extends TraceTreeEventDispatcher {
         spans: options.meta?.transaction_child_count_map[value.event_id] ?? 0,
         project_slug: value && 'project_slug' in value ? value.project_slug : undefined,
         event_id: value && 'event_id' in value ? value.event_id : undefined,
+        replayTraceSlug: options.replayTraceSlug,
       });
 
       if (isTransactionNode(node) || isEAPTransactionNode(node)) {
@@ -2202,47 +2213,21 @@ export class TraceTree extends TraceTreeEventDispatcher {
           return;
         }
 
-        const accumulator: TraceSplitResults<TraceTree.Transaction> | TraceTree.EAPTrace =
-          options.type === 'eap'
-            ? []
-            : {
-                transactions: [],
-                orphan_errors: [],
-              };
-
-        const updatedData = results.reduce((acc, result) => {
+        results.forEach((result, index) => {
+          const traceSlug = batch[index]?.traceSlug;
           // Ignoring the error case for now
           if (result.status === 'fulfilled') {
-            if (
-              isTraceSplitResult<
-                TraceSplitResults<TraceTree.Transaction>,
-                TraceTree.EAPTrace
-              >(result.value) &&
-              isTraceSplitResult<
-                TraceSplitResults<TraceTree.Transaction>,
-                TraceTree.EAPTrace
-              >(acc)
-            ) {
-              const {transactions, orphan_errors} = result.value;
-              acc.transactions.push(...transactions);
-              acc.orphan_errors.push(...orphan_errors);
-            } else if (Array.isArray(acc) && Array.isArray(result.value)) {
-              // accumulate eap trace
-              acc.push(...result.value);
-            }
+            this.appendTree(
+              TraceTree.FromTrace(result.value, {
+                meta: options.meta?.data,
+                replay: null,
+                preferences: options.preferences,
+                replayTraceSlug: traceSlug,
+              })
+            );
+            rerender();
           }
-
-          return acc;
-        }, accumulator);
-
-        this.appendTree(
-          TraceTree.FromTrace(updatedData, {
-            meta: options.meta?.data,
-            replay: null,
-            preferences: options.preferences,
-          })
-        );
-        rerender();
+        });
       }
 
       root.fetchStatus = 'idle';

static/app/views/replays/detail/trace/useReplayTraces.tsx

@@ -53,7 +53,7 @@ export function useReplayTraces({
     return EventView.fromSavedQuery({
       id: undefined,
       name: `Traces in replay ${replayId}`,
-      fields: ['trace', 'count(trace)', 'min(timestamp)'],
+      fields: ['trace', 'min(timestamp)', 'max(transaction.duration)'],
       orderby: 'min_timestamp',
       query: `replayId:${replayId}`,
       projects: [Number(projectId)],
@@ -89,7 +89,7 @@ export function useReplayTraces({
           end,
           limit: 10,
         } as unknown as Location),
-        sort: ['min_timestamp', 'trace'],
+        sort: ['min_timestamp'],
         cursor: cursor.cursor,
       };
 
@@ -102,6 +102,28 @@ export function useReplayTraces({
 
         const parsedData = data
           .filter(row => row.trace) // Filter out items where trace is not truthy
+          .sort((a, b) => {
+            const aDuration = a['max(transaction.duration)'];
+            const bDuration = b['max(transaction.duration)'];
+            const aMinTimestamp = getTimeStampFromTableDateField(a['min(timestamp)']);
+            const bMinTimestamp = getTimeStampFromTableDateField(b['min(timestamp)']);
+
+            if (
+              !aMinTimestamp ||
+              !bMinTimestamp ||
+              typeof aDuration !== 'number' ||
+              typeof bDuration !== 'number'
+            ) {
+              return 0;
+            }
+
+            // We don't have a way to get the min start time of a trace, so we'll use the min timestamp and subtract the max duration
+            // of a transaction in that trace, to make the best guess.
+            const aMinStart = aMinTimestamp - aDuration / 1000;
+            const bMinStart = bMinTimestamp - bDuration / 1000;
+
+            return aMinStart - bMinStart;
+          })
           .map(row => ({
             traceSlug: row.trace!.toString(),
             timestamp: getTimeStampFromTableDateField(row['min(timestamp)']),