test(e2e): Group collectStreamedSpans by trace

dev-packages/test-utils/src/event-proxy-server.ts

@@ -607,34 +607,56 @@ export function waitForStreamedSpans(
 }
 
 /**
- * Accumulate streamed Span V2 spans across multiple envelopes until `isDone` returns true.
+ * Accumulate streamed Span V2 spans across envelopes, grouped by trace, and resolve with the spans
+ * of the first trace that satisfies `isDone`.
  *
- * Unlike {@link waitForStreamedSpans}, which resolves with the spans of a single envelope, this
- * collects spans from every Span V2 envelope as they arrive and resolves with the full set once
- * `isDone` is satisfied. Streamed spans are flushed in multiple envelopes as they end (a child span
- * can be sent before its root segment span), so any assertion that needs the whole trace must
- * accumulate rather than snapshot a single envelope.
+ * A trace reaches the proxy in more than one envelope: the span buffer flushes on a timer, so a
+ * segment that is still open when its children flush arrives separately, and standalone spans (web
+ * vitals, INP) bypass the buffer entirely. Anything asserting on a whole trace therefore has to
+ * accumulate rather than snapshot a single envelope, which is what {@link waitForStreamedSpans}
+ * gives you.
  *
- * `isDone` receives all spans collected so far. A common predicate is "the segment/root span has
- * arrived", since the root ends last and therefore flushes after its children:
+ * `isDone` receives one trace's spans at a time, never a mixture, so a leftover trace from an
+ * earlier page load cannot satisfy the predicate on behalf of the trace under test. Note that it
+ * can still satisfy the predicate in its own right: when several tests exercise the same route,
+ * the predicate has to name something unique to the request under test.
  *
  * @example
  * ```ts
- * const spans = await collectStreamedSpans(PROXY_SERVER_NAME, allSpans =>
- *   allSpans.some(span => span.name === 'GET /nested-layout' && span.is_segment),
+ * const spans = await collectStreamedSpans(PROXY_SERVER_NAME, spansOfTrace =>
+ *   spansOfTrace.some(span => span.name === 'GET /nested-layout' && span.is_segment),
  * );
  * expect(spans.map(span => span.name)).toContainEqual('build component tree');
  * ```
  */
 export function collectStreamedSpans(
   proxyServerName: string,
-  isDone: (spans: SerializedStreamedSpan[]) => boolean,
+  isDone: (spansOfTrace: SerializedStreamedSpan[]) => boolean,
 ): Promise<SerializedStreamedSpan[]> {
-  const collected: SerializedStreamedSpan[] = [];
+  const spansByTrace = new Map<string, SerializedStreamedSpan[]>();
+  let matched: SerializedStreamedSpan[] | undefined;
+
   return waitForStreamedSpans(proxyServerName, spans => {
-    collected.push(...spans);
-    return isDone(collected);
-  }).then(() => collected);
+    for (const span of spans) {
+      const spansOfTrace = spansByTrace.get(span.trace_id);
+      if (spansOfTrace) {
+        spansOfTrace.push(span);
+      } else {
+        spansByTrace.set(span.trace_id, [span]);
+      }
+    }
+
+    // Every trace is a candidate, so a trace that never satisfies `isDone` cannot hold up the one
+    // that does. Insertion order means the earliest-arriving trace wins a tie.
+    for (const spansOfTrace of spansByTrace.values()) {
+      if (isDone(spansOfTrace)) {
+        matched = spansOfTrace;
+        return true;
+      }
+    }
+
+    return false;
+  }).then(() => matched ?? []);
 }
 
 /**

dev-packages/test-utils/src/index.ts

@@ -14,6 +14,7 @@ export {
   collectStreamedSpans,
   getSpanOp,
 } from './event-proxy-server';
+export type { SerializedStreamedSpan } from '@sentry/core';
 
 export {
   findAbsolutePathImports,