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

dev-packages/e2e-tests/test-applications/nextjs-16-cf-workers/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-cf-workers/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-cf-workers/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-cf-workers/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-cf-workers', async transactionEvent => {
-      return !!(
-        transactionEvent.transaction === '/isr-test/:product' && transactionEvent.contexts?.trace?.op === 'pageload'
-      );
+    const spanPromise = waitForStreamedSpan('nextjs-16-cf-workers', 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-cf-workers', async transactionEvent => {
-    return transactionEvent.transaction === '/isr-test/:product' && transactionEvent.contexts?.trace?.op === 'pageload';
+  const spanPromise = waitForStreamedSpan('nextjs-16-cf-workers', 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');
 });

dev-packages/e2e-tests/test-applications/nextjs-16-cf-workers/tests/middleware.test.ts

@@ -1,92 +1,77 @@
 import { expect, test } from '@playwright/test';
-import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
+import { collectStreamedSpans, getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
 import { isDevMode } from './isDevMode';
 
-// TODO: Skipped until the Cloudflare Workers edge middleware setup emits middleware transactions reliably.
+// TODO: Skipped until the Cloudflare Workers edge middleware setup emits middleware spans reliably.
 test.skip('tracesSampler receives normalizedRequest for edge middleware', async ({ request }) => {
-  const middlewareTransactionPromise = waitForTransaction('nextjs-16-cf-workers', async transactionEvent => {
-    return transactionEvent?.transaction === 'middleware GET';
+  const middlewareSpanPromise = waitForStreamedSpan('nextjs-16-cf-workers', span => {
+    return span.name === 'middleware GET' && span.is_segment;
   });
 
   await request.get('/api/endpoint-behind-middleware');
 
-  const middlewareTransaction = await middlewareTransactionPromise;
+  const middlewareSpan = await middlewareSpanPromise;
 
-  expect(middlewareTransaction.contexts?.runtime?.name).toBe('cloudflare');
-  expect(middlewareTransaction.request?.url).toContain('/api/endpoint-behind-middleware');
-  expect(middlewareTransaction.request?.method).toBe('GET');
+  expect(String(middlewareSpan.attributes['http.target']?.value)).toContain('/api/endpoint-behind-middleware');
+  expect(middlewareSpan.attributes['http.request.method']?.value).toBe('GET');
 });
 
 // TODO: Middleware tests need SDK adjustments for Cloudflare Workers edge runtime
-test.skip('Should create a transaction for middleware', async ({ request }) => {
-  const middlewareTransactionPromise = waitForTransaction('nextjs-16-cf-workers', async transactionEvent => {
-    return transactionEvent?.transaction === 'middleware GET';
+test.skip('Should create a span for middleware', async ({ request }) => {
+  const middlewareSpanPromise = waitForStreamedSpan('nextjs-16-cf-workers', span => {
+    return span.name === 'middleware GET' && span.is_segment;
   });
 
   const response = await request.get('/api/endpoint-behind-middleware');
   expect(await response.json()).toStrictEqual({ name: 'John Doe' });
 
-  const middlewareTransaction = await middlewareTransactionPromise;
+  const middlewareSpan = await middlewareSpanPromise;
 
-  expect(middlewareTransaction.contexts?.trace?.status).toBe('ok');
-  expect(middlewareTransaction.contexts?.trace?.op).toBe('middleware');
-  expect(middlewareTransaction.contexts?.runtime?.name).toBe('vercel-edge');
-  expect(middlewareTransaction.transaction_info?.source).toBe('route');
-
-  // Assert that isolation scope works properly
-  expect(middlewareTransaction.tags?.['my-isolated-tag']).toBe(true);
-  // TODO: Isolation scope is not working properly yet
-  // expect(middlewareTransaction.tags?.['my-global-scope-isolated-tag']).not.toBeDefined();
+  expect(middlewareSpan.status).toBe('ok');
+  expect(getSpanOp(middlewareSpan)).toBe('middleware');
+  expect(middlewareSpan.attributes['sentry.segment.name.source']?.value).toBe('route');
 });
 
 // TODO: Middleware tests need SDK adjustments for Cloudflare Workers edge runtime
 test.skip('Faulty middlewares', async ({ request }) => {
   test.skip(isDevMode, 'Throwing crashes the dev server atm'); // https://github.com/vercel/next.js/issues/85261
-  const middlewareTransactionPromise = waitForTransaction('nextjs-16-cf-workers', async transactionEvent => {
-    return transactionEvent?.transaction === 'middleware GET';
-  });
-
-  const errorEventPromise = waitForError('nextjs-16-cf-workers', errorEvent => {
-    return errorEvent?.exception?.values?.[0]?.value === 'Middleware Error';
+  const middlewareSpanPromise = waitForStreamedSpan('nextjs-16-cf-workers', span => {
+    return span.name === 'middleware GET' && span.is_segment;
   });
 
   request.get('/api/endpoint-behind-middleware', { headers: { 'x-should-throw': '1' } }).catch(() => {
     // Noop
   });
 
-  await test.step('should record transactions', async () => {
-    const middlewareTransaction = await middlewareTransactionPromise;
-    expect(middlewareTransaction.contexts?.trace?.status).toBe('internal_error');
-    expect(middlewareTransaction.contexts?.trace?.op).toBe('middleware');
-    expect(middlewareTransaction.contexts?.runtime?.name).toBe('vercel-edge');
-    expect(middlewareTransaction.transaction_info?.source).toBe('route');
+  await test.step('should record spans', async () => {
+    const middlewareSpan = await middlewareSpanPromise;
+    expect(middlewareSpan.status).toBe('error');
+    expect(getSpanOp(middlewareSpan)).toBe('middleware');
+    expect(middlewareSpan.attributes['sentry.segment.name.source']?.value).toBe('route');
   });
 });
 
 // TODO: Middleware tests need SDK adjustments for Cloudflare Workers edge runtime
-test.skip('Should trace outgoing fetch requests inside middleware and create breadcrumbs for it', async ({
-  request,
-}) => {
+test.skip('Should trace outgoing fetch requests inside middleware', async ({ request }) => {
   test.skip(isDevMode, 'The fetch requests ends up in a separate tx in dev atm');
-  const middlewareTransactionPromise = waitForTransaction('nextjs-16-cf-workers', async transactionEvent => {
-    return transactionEvent?.transaction === 'middleware GET';
-  });
+
+  // `http.client` span names are low cardinality under span streaming, hence `GET localhost` rather
+  // than the full URL.
+  const spansPromise = collectStreamedSpans('nextjs-16-cf-workers', spans =>
+    spans.some(span => getSpanOp(span) === 'http.client' && span.name === 'GET localhost'),
+  );
 
   request.get('/api/endpoint-behind-middleware', { headers: { 'x-should-make-request': '1' } }).catch(() => {
     // Noop
   });
 
-  const middlewareTransaction = await middlewareTransactionPromise;
-
-  // Breadcrumbs should always be created for the fetch request
-  expect(middlewareTransaction.breadcrumbs).toEqual(
-    expect.arrayContaining([
-      {
-        category: 'http',
-        data: { 'http.request.method': 'GET', status_code: 200, url: 'http://localhost:3030/' },
-        timestamp: expect.any(Number),
-        type: 'http',
-      },
-    ]),
-  );
+  const spans = await spansPromise;
+  const fetchSpan = spans.find(span => getSpanOp(span) === 'http.client' && span.name === 'GET localhost')!;
+
+  expect(fetchSpan.status).toBe('ok');
+  expect(fetchSpan.attributes).toMatchObject({
+    'http.request.method': { value: 'GET', type: 'string' },
+    'http.response.status_code': { value: 200, type: 'integer' },
+    'url.full': { value: 'http://localhost:3030/', type: 'string' },
+  });
 });

dev-packages/e2e-tests/test-applications/nextjs-16-cf-workers/tests/nested-rsc-error.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
+import { waitForError, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
 // TODO: Flakey on CI
 test.skip('Should capture errors from nested server components when `Sentry.captureRequestError` is added to the `onRequestError` hook', async ({
@@ -9,16 +9,21 @@ test.skip('Should capture errors from nested server components when `Sentry.capt
     return !!errorEvent?.exception?.values?.some(value => value.value === 'I am technically uncatchable');
   });
 
-  const serverTransactionPromise = waitForTransaction('nextjs-16-cf-workers', async transactionEvent => {
-    return transactionEvent?.transaction === 'GET /nested-rsc-error/[param]';
+  // Matched on the error's own trace so a span from an earlier spec cannot satisfy the correlation.
+  const serverSpanPromise = waitForStreamedSpan('nextjs-16-cf-workers', async span => {
+    return (
+      span.name === 'GET /nested-rsc-error/[param]' &&
+      span.is_segment &&
+      (await errorEventPromise).contexts?.trace?.trace_id === span.trace_id
+    );
   });
 
   await page.goto(`/nested-rsc-error/123`);
   const errorEvent = await errorEventPromise;
-  const serverTransactionEvent = await serverTransactionPromise;
+  const serverSpan = await serverSpanPromise;
 
-  // error event is part of the transaction
-  expect(errorEvent.contexts?.trace?.trace_id).toBe(serverTransactionEvent.contexts?.trace?.trace_id);
+  // error event is part of the same trace as the server span
+  expect(errorEvent.contexts?.trace?.trace_id).toBe(serverSpan.trace_id);
 
   expect(errorEvent.request).toMatchObject({
     headers: expect.any(Object),

dev-packages/e2e-tests/test-applications/nextjs-16-cf-workers/tests/pageload-tracing.test.ts

@@ -1,33 +1,32 @@
 import { expect, test } from '@playwright/test';
-import { waitForTransaction } from '@sentry-internal/test-utils';
+import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
 // TODO: Flakey on CI
-test.skip('App router transactions should be attached to the pageload request span', async ({ page }) => {
-  const serverTransactionPromise = waitForTransaction('nextjs-16-cf-workers', async transactionEvent => {
-    return transactionEvent?.transaction === 'GET /pageload-tracing';
+test.skip('App router spans should be attached to the pageload request span', async ({ page }) => {
+  const serverSpanPromise = waitForStreamedSpan('nextjs-16-cf-workers', span => {
+    return span.name === 'GET /pageload-tracing' && span.is_segment;
   });
 
-  const pageloadTransactionPromise = waitForTransaction('nextjs-16-cf-workers', async transactionEvent => {
-    return transactionEvent?.transaction === '/pageload-tracing';
+  const pageloadSpanPromise = waitForStreamedSpan('nextjs-16-cf-workers', span => {
+    return span.name === '/pageload-tracing' && getSpanOp(span) === 'pageload' && span.is_segment;
   });
 
   await page.goto(`/pageload-tracing`);
 
-  const [serverTransaction, pageloadTransaction] = await Promise.all([
-    serverTransactionPromise,
-    pageloadTransactionPromise,
-  ]);
+  const [serverSpan, pageloadSpan] = await Promise.all([serverSpanPromise, pageloadSpanPromise]);
 
-  const pageloadTraceId = pageloadTransaction.contexts?.trace?.trace_id;
-
-  expect(pageloadTraceId).toBeTruthy();
-  expect(serverTransaction.contexts?.trace?.trace_id).toBe(pageloadTraceId);
+  expect(pageloadSpan.trace_id).toBeTruthy();
+  expect(serverSpan.trace_id).toBe(pageloadSpan.trace_id);
 });
 
 // TODO: HTTP request headers are not extracted as span attributes on Cloudflare Workers
 test.skip('extracts HTTP request headers as span attributes', async ({ baseURL }) => {
-  const serverTransactionPromise = waitForTransaction('nextjs-16-cf-workers', async transactionEvent => {
-    return transactionEvent?.transaction === 'GET /pageload-tracing';
+  const serverSpanPromise = waitForStreamedSpan('nextjs-16-cf-workers', span => {
+    return (
+      span.name === 'GET /pageload-tracing' &&
+      span.is_segment &&
+      span.attributes['http.request.header.x_request_id']?.value === 'nextjs-789'
+    );
   });
 
   await fetch(`${baseURL}/pageload-tracing`, {
@@ -41,16 +40,14 @@ test.skip('extracts HTTP request headers as span attributes', async ({ baseURL }
     },
   });
 
-  const serverTransaction = await serverTransactionPromise;
-
-  expect(serverTransaction.contexts?.trace?.data).toEqual(
-    expect.objectContaining({
-      'http.request.header.user_agent': 'Custom-NextJS-Agent/15.0',
-      'http.request.header.content_type': 'text/html',
-      'http.request.header.x_nextjs_test': 'nextjs-header-value',
-      'http.request.header.accept': 'text/html, application/xhtml+xml',
-      'http.request.header.x_framework': 'Next.js',
-      'http.request.header.x_request_id': 'nextjs-789',
-    }),
-  );
+  const serverSpan = await serverSpanPromise;
+
+  expect(serverSpan.attributes).toMatchObject({
+    'http.request.header.user_agent': { value: 'Custom-NextJS-Agent/15.0', type: 'string' },
+    'http.request.header.content_type': { value: 'text/html', type: 'string' },
+    'http.request.header.x_nextjs_test': { value: 'nextjs-header-value', type: 'string' },
+    'http.request.header.accept': { value: 'text/html, application/xhtml+xml', type: 'string' },
+    'http.request.header.x_framework': { value: 'Next.js', type: 'string' },
+    'http.request.header.x_request_id': { value: 'nextjs-789', type: 'string' },
+  });
 });