test(e2e): Fix leftover / pairing and the custom-tunnel first-request leak

Co-Authored-By: Cursor Grok 4.6 <cursoragent@cursor.com>

Author: RulaKhaled

dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/trace-propagation.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
+import { collectStreamedSpans, getSpanOp } from '@sentry-internal/test-utils';
 
 const usesManagedTunnelRoute =
   (process.env.E2E_TEST_TUNNEL_ROUTE_MODE ?? 'off') !== 'off' || process.env.E2E_TEST_CUSTOM_TUNNEL_ROUTE === '1';
@@ -23,19 +23,30 @@ test.describe('Trace propagation', () => {
   });
 
   test('should have trace connection between server and client', async ({ page }) => {
-    const serverSpanPromise = waitForStreamedSpan('tanstackstart-react', span => {
-      return span.is_segment && getSpanOp(span) === 'http.server' && span.attributes['url.path']?.value === '/';
-    });
-
-    const clientSpanPromise = waitForStreamedSpan('tanstackstart-react', span => {
-      return span.is_segment && getSpanOp(span) === 'pageload' && span.name === '/';
+    const spansPromise = collectStreamedSpans('tanstackstart-react', spans => {
+      return (
+        spans.some(
+          span => span.is_segment && getSpanOp(span) === 'http.server' && span.attributes['url.path']?.value === '/',
+        ) &&
+        spans.some(
+          span =>
+            span.is_segment &&
+            getSpanOp(span) === 'pageload' &&
+            (span.name === '/' || span.attributes['url.path']?.value === '/'),
+        )
+      );
     });
 
     await page.goto('/');
 
-    const serverSpan = await serverSpanPromise;
-    const clientSpan = await clientSpanPromise;
+    const spans = await spansPromise;
+    const serverSpan = spans.find(
+      span => span.is_segment && getSpanOp(span) === 'http.server' && span.attributes['url.path']?.value === '/',
+    );
+    const clientSpan = spans.find(span => span.is_segment && getSpanOp(span) === 'pageload');
 
-    expect(clientSpan.trace_id).toBe(serverSpan.trace_id);
+    expect(serverSpan).toBeDefined();
+    expect(clientSpan).toBeDefined();
+    expect(clientSpan?.trace_id).toBe(serverSpan?.trace_id);
   });
 });

dev-packages/e2e-tests/test-applications/tanstackstart-react/tests/tunnel.test.ts

@@ -67,13 +67,30 @@ function pathnameMatchesTunnelRoute(pathname: string): boolean {
     : expectedTunnelPathMatcher.test(pathname);
 }
 
-function waitForServerHttpSpan(matchesPathname: (pathname: string) => boolean): Promise<unknown> {
-  return waitForStreamedSpan('tanstackstart-react', span => {
-    return getSpanOp(span) === 'http.server' && matchesPathname(String(span.attributes['url.path']?.value ?? ''));
-  });
+function waitForServerHttpSpan(
+  matchesPathname: (pathname: string) => boolean,
+  since?: number,
+): Promise<unknown> {
+  return waitForStreamedSpan(
+    'tanstackstart-react',
+    span => {
+      return getSpanOp(span) === 'http.server' && matchesPathname(String(span.attributes['url.path']?.value ?? ''));
+    },
+    since,
+  );
 }
 
 test('Does not create a server transaction for the tunnel route', async ({ page }) => {
+  // Custom routes self-register `ignoreSpans` on the first POST; that first streamed
+  // span still leaks (see `createSentryTunnelRoute`). The previous test already made
+  // that POST — wait it out so it cannot win the race below. Managed routes register
+  // at startup and never emit this span. The leaked span may already have arrived, so
+  // this wait looks back over everything the proxy recorded instead of only what comes
+  // in from here on.
+  if (tunnelRouteMode === 'custom') {
+    await waitForServerHttpSpan(pathnameMatchesTunnelRoute, 0);
+  }
+
   // The incoming POST to the tunnel route must not be turned into an `http.server`
   // transaction by the server SDK — tunnel traffic is plumbing, not application requests.
   const tunnelServerEventPromise = waitForServerHttpSpan(pathnameMatchesTunnelRoute);