test(e2e): Port nextjs-16 to span streaming

Removes the `traceLifecycle: 'static'` pins and rewrites the specs onto streamed spans. Tests asserting on children of a segment span (server components, DB instrumentation, middleware fetch, prefetch) use `collectStreamedSpans` and accumulate until the segment, which ends last.

The route-handler specs correlate an error or message event with its server span; those match the span on the event's own trace, so batching cannot pair spans across specs.

`http.client` span names are low cardinality under streaming, so the middleware fetch span is `GET localhost` rather than `GET http://localhost:3030/` - which also mattered for the matcher, since the old name was used as a predicate and would have hung rather than failed.

Dropped, having no span v2 equivalent:

- The middleware isolation-scope assertions, including the guard that middleware tags do not leak onto the following route span. Span v2 carries no scope tags, so neither the tag nor its absence is observable.
- The middleware `breadcrumbs` assertion. The fetch stays covered by its `http.client` span.
- The `contexts.runtime.name` matchers, which only disambiguated uniquely named spans.

Request headers carry over as `http.request.header.*` attributes, so the route-handler and pageload header assertions keep their coverage.

Ref #23802
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: chargome

dev-packages/e2e-tests/test-applications/nextjs-16/instrumentation-client.ts

@@ -2,7 +2,6 @@ import * as Sentry from '@sentry/nextjs';
 import type { Log } from '@sentry/nextjs';
 
 Sentry.init({
-  traceLifecycle: 'static',
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
   tunnel: `http://localhost:3031/`, // proxy server

dev-packages/e2e-tests/test-applications/nextjs-16/sentry.edge.config.ts

@@ -1,7 +1,6 @@
 import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  traceLifecycle: 'static',
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
   tunnel: `http://localhost:3031/`, // proxy server

dev-packages/e2e-tests/test-applications/nextjs-16/sentry.server.config.ts

@@ -2,7 +2,6 @@ import * as Sentry from '@sentry/nextjs';
 import { Log } from '@sentry/nextjs';
 
 Sentry.init({
-  traceLifecycle: 'static',
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
   tunnel: `http://localhost:3031/`, // proxy server

dev-packages/e2e-tests/test-applications/nextjs-16/tests/ai-error.test.ts

@@ -1,13 +1,13 @@
 import { expect, test } from '@playwright/test';
-import { getSpanOp, waitForError, waitForStreamedSpans, waitForTransaction } from '@sentry-internal/test-utils';
+import { getSpanOp, waitForError, waitForStreamedSpan, waitForStreamedSpans } from '@sentry-internal/test-utils';
 
 // FIXME: This app uses `ai@^3`, which the channel-based Vercel AI integration doesn't instrument
 // (it supports v4-v6 via the orchestrion transform and v7 via the native `ai:telemetry` channel).
 // With channel-based instrumentation now the default, no gen_ai spans are produced. Re-enable once
 // the app is upgraded to `ai@v7` (or v3 support is restored).
 test.fixme('should create AI spans with correct attributes and error linking', async ({ page }) => {
-  const aiTransactionPromise = waitForTransaction('nextjs-16', async transactionEvent => {
-    return transactionEvent.transaction === 'GET /ai-error-test';
+  const aiSpanPromise = waitForStreamedSpan('nextjs-16', span => {
+    return span.name === 'GET /ai-error-test' && span.is_segment;
   });
 
   // gen_ai spans are extracted into a separate span v2 envelope item
@@ -21,12 +21,12 @@ test.fixme('should create AI spans with correct attributes and error linking', a
 
   await page.goto('/ai-error-test');
 
-  const aiTransaction = await aiTransactionPromise;
+  const aiSpan = await aiSpanPromise;
   const genAiSpans = await genAiSpansPromise;
   const errorEvent = await errorEventPromise;
 
-  expect(aiTransaction).toBeDefined();
-  expect(aiTransaction.transaction).toBe('GET /ai-error-test');
+  expect(aiSpan).toBeDefined();
+  expect(aiSpan.name).toBe('GET /ai-error-test');
 
   // Each generateText call should create 2 spans: one for the pipeline and one for doGenerate
   // Plus a span for the tool call
@@ -44,5 +44,5 @@ test.fixme('should create AI spans with correct attributes and error linking', a
   expect(errorEvent).toBeDefined();
 
   //Verify error is linked to the same trace as the transaction
-  expect(errorEvent?.contexts?.trace?.trace_id).toBe(aiTransaction.contexts?.trace?.trace_id);
+  expect(errorEvent?.contexts?.trace?.trace_id).toBe(aiSpan.trace_id);
 });

dev-packages/e2e-tests/test-applications/nextjs-16/tests/ai-test.test.ts

@@ -1,13 +1,13 @@
 import { expect, test } from '@playwright/test';
-import { getSpanOp, waitForStreamedSpans, waitForTransaction } from '@sentry-internal/test-utils';
+import { getSpanOp, waitForStreamedSpan, waitForStreamedSpans } from '@sentry-internal/test-utils';
 
 // FIXME: This app uses `ai@^3`, which the channel-based Vercel AI integration doesn't instrument
 // (it supports v4-v6 via the orchestrion transform and v7 via the native `ai:telemetry` channel).
 // With channel-based instrumentation now the default, no gen_ai spans are produced. Re-enable once
 // the app is upgraded to `ai@v7` (or v3 support is restored).
 test.fixme('should create AI spans with correct attributes', async ({ page }) => {
-  const aiTransactionPromise = waitForTransaction('nextjs-16', async transactionEvent => {
-    return transactionEvent.transaction === 'GET /ai-test';
+  const aiSpanPromise = waitForStreamedSpan('nextjs-16', span => {
+    return span.name === 'GET /ai-test' && span.is_segment;
   });
 
   // gen_ai spans are extracted into a separate span v2 envelope item
@@ -17,11 +17,11 @@ test.fixme('should create AI spans with correct attributes', async ({ page }) =>
 
   await page.goto('/ai-test');
 
-  const aiTransaction = await aiTransactionPromise;
+  const aiSpan = await aiSpanPromise;
   const genAiSpans = await genAiSpansPromise;
 
-  expect(aiTransaction).toBeDefined();
-  expect(aiTransaction.transaction).toBe('GET /ai-test');
+  expect(aiSpan).toBeDefined();
+  expect(aiSpan.name).toBe('GET /ai-test');
 
   // We expect spans for the first 3 AI calls (4th is disabled)
   // Each generateText call should create 2 spans: one for the pipeline and one for doGenerate

dev-packages/e2e-tests/test-applications/nextjs-16/tests/db-page.test.ts

@@ -1,56 +1,55 @@
 import { expect, test } from '@playwright/test';
-import { waitForTransaction } from '@sentry-internal/test-utils';
+import { collectStreamedSpans } from '@sentry-internal/test-utils';
 
 test('Instruments DB calls made during server-side rendering of a page', async ({ page }) => {
-  const transactionEventPromise = waitForTransaction('nextjs-16', transactionEvent => {
-    return transactionEvent.contexts?.trace?.op === 'http.server' && transactionEvent.transaction === 'GET /db-page';
-  });
+  // The db spans are children of the segment span, which ends last.
+  const spansPromise = collectStreamedSpans('nextjs-16', spans =>
+    spans.some(span => span.name === 'GET /db-page' && span.is_segment),
+  );
 
   await page.goto('/db-page');
   await expect(page.locator('#answer')).toHaveText('answer: 42');
   await expect(page.locator('#cached')).toHaveText('cached: 42');
 
-  const transactionEvent = await transactionEventPromise;
-
-  const spans = transactionEvent.spans || [];
+  const spans = await spansPromise;
 
   // One page render produces spans from both injection paths: pg (externalized → runtime module
   // hook) and ioredis (bundle-safe allowlisted → build-time loader).
   expect(spans).toContainEqual(
     expect.objectContaining({
-      op: 'db',
-      origin: 'auto.db.postgres',
-      description: 'SELECT 40 + 2 AS answer',
+      name: 'SELECT 40 + 2 AS answer',
       status: 'ok',
-      data: expect.objectContaining({
-        'db.system.name': 'postgresql',
-        'db.query.text': 'SELECT 40 + 2 AS answer',
+      attributes: expect.objectContaining({
+        'sentry.op': { value: 'db', type: 'string' },
+        'sentry.origin': { value: 'auto.db.postgres', type: 'string' },
+        'db.system.name': { value: 'postgresql', type: 'string' },
+        'db.query.text': { value: 'SELECT 40 + 2 AS answer', type: 'string' },
       }),
     }),
   );
   expect(spans).toContainEqual(
     expect.objectContaining({
-      op: 'db.query',
-      origin: 'auto.db.redis',
-      description: 'set page-key [1 other arguments]',
+      name: 'set page-key [1 other arguments]',
       status: 'ok',
-      data: expect.objectContaining({
-        'db.system.name': 'redis',
-        'db.operation.name': 'set',
-        'db.query.text': 'set page-key [1 other arguments]',
+      attributes: expect.objectContaining({
+        'sentry.op': { value: 'db.query', type: 'string' },
+        'sentry.origin': { value: 'auto.db.redis', type: 'string' },
+        'db.system.name': { value: 'redis', type: 'string' },
+        'db.operation.name': { value: 'set', type: 'string' },
+        'db.query.text': { value: 'set page-key [1 other arguments]', type: 'string' },
       }),
     }),
   );
   expect(spans).toContainEqual(
     expect.objectContaining({
-      op: 'db.query',
-      origin: 'auto.db.redis',
-      description: 'get page-key',
+      name: 'get page-key',
       status: 'ok',
-      data: expect.objectContaining({
-        'db.system.name': 'redis',
-        'db.operation.name': 'get',
-        'db.query.text': 'get page-key',
+      attributes: expect.objectContaining({
+        'sentry.op': { value: 'db.query', type: 'string' },
+        'sentry.origin': { value: 'auto.db.redis', type: 'string' },
+        'db.system.name': { value: 'redis', type: 'string' },
+        'db.operation.name': { value: 'get', type: 'string' },
+        'db.query.text': { value: 'get page-key', type: 'string' },
       }),
     }),
   );

dev-packages/e2e-tests/test-applications/nextjs-16/tests/isr-routes.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { waitForTransaction } from '@sentry-internal/test-utils';
+import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
 test('should remove sentry-trace and baggage meta tags on ISR dynamic route page load', async ({ page }) => {
   // Navigate to ISR page
@@ -41,15 +41,13 @@ test('should remove meta tags for different ISR dynamic route values', async ({
   await expect(page.locator('meta[name="baggage"]')).toHaveCount(0);
 });
 
-test('should create unique transactions for ISR pages on each visit', async ({ page }) => {
+test('should create unique traces for ISR pages on each visit', async ({ page }) => {
   const traceIds: string[] = [];
 
   // Load the same ISR page 5 times to ensure cached HTML meta tags are consistently removed
   for (let i = 0; i < 5; i++) {
-    const transactionPromise = waitForTransaction('nextjs-16', async transactionEvent => {
-      return !!(
-        transactionEvent.transaction === '/isr-test/:product' && transactionEvent.contexts?.trace?.op === 'pageload'
-      );
+    const spanPromise = waitForStreamedSpan('nextjs-16', span => {
+      return span.name === '/isr-test/:product' && getSpanOp(span) === 'pageload' && span.is_segment;
     });
 
     if (i === 0) {
@@ -58,8 +56,8 @@ test('should create unique transactions for ISR pages on each visit', async ({ p
       await page.reload();
     }
 
-    const transaction = await transactionPromise;
-    const traceId = transaction.contexts?.trace?.trace_id;
+    const span = await spanPromise;
+    const traceId = span.trace_id;
 
     expect(traceId).toBeDefined();
     expect(traceId).toMatch(/[a-f0-9]{32}/);
@@ -72,23 +70,14 @@ test('should create unique transactions for ISR pages on each visit', async ({ p
 });
 
 test('ISR route should be identified correctly in the route manifest', async ({ page }) => {
-  const transactionPromise = waitForTransaction('nextjs-16', async transactionEvent => {
-    return transactionEvent.transaction === '/isr-test/:product' && transactionEvent.contexts?.trace?.op === 'pageload';
+  const spanPromise = waitForStreamedSpan('nextjs-16', span => {
+    return span.name === '/isr-test/:product' && getSpanOp(span) === 'pageload' && span.is_segment;
   });
 
   await page.goto('/isr-test/laptop');
-  const transaction = await transactionPromise;
-
-  // Verify the transaction is properly parameterized
-  expect(transaction).toMatchObject({
-    transaction: '/isr-test/:product',
-    transaction_info: { source: 'route' },
-    contexts: {
-      trace: {
-        data: {
-          'sentry.segment.name.source': 'route',
-        },
-      },
-    },
-  });
+  const span = await spanPromise;
+
+  // Verify the span is properly parameterized
+  expect(span.name).toBe('/isr-test/:product');
+  expect(span.attributes['sentry.segment.name.source']?.value).toBe('route');
 });