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

dev-packages/e2e-tests/test-applications/nextjs-16-bun/instrumentation-client.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-bun/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-bun/sentry.server.config.ts

@@ -3,7 +3,6 @@ import * as Sentry from '@sentry/nextjs';
 import { bunServerIntegration, fetchIntegration } from '@sentry/bun';
 
 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-bun/tests/middleware.test.ts

@@ -1,22 +1,17 @@
 import { expect, test } from '@playwright/test';
-import { waitForTransaction } from '@sentry-internal/test-utils';
+import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
-test('Should create a transaction for middleware', async ({ request }) => {
-  const middlewareTransactionPromise = waitForTransaction('nextjs-16-bun', async transactionEvent => {
-    return transactionEvent?.transaction === 'middleware GET';
+test('Should create a span for middleware', async ({ request }) => {
+  const middlewareSpanPromise = waitForStreamedSpan('nextjs-16-bun', 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('node');
-  expect(middlewareTransaction.transaction_info?.source).toBe('route');
-
-  // Assert that isolation scope works properly
-  expect(middlewareTransaction.tags?.['my-isolated-tag']).toBe(true);
-  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');
 });

dev-packages/e2e-tests/test-applications/nextjs-16-bun/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';
 
 test('Should capture errors from nested server components when `Sentry.captureRequestError` is added to the `onRequestError` hook', async ({
   page,
@@ -8,16 +8,21 @@ test('Should capture errors from nested server components when `Sentry.captureRe
     return !!errorEvent?.exception?.values?.some(value => value.value === 'I am technically uncatchable');
   });
 
-  const serverTransactionPromise = waitForTransaction('nextjs-16-bun', 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-bun', 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-bun/tests/pageload-tracing.test.ts

@@ -1,26 +1,21 @@
 import { expect, test } from '@playwright/test';
-import { waitForTransaction } from '@sentry-internal/test-utils';
+import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
-test('App router transactions should be attached to the pageload request span', async ({ page }) => {
-  const serverTransactionPromise = waitForTransaction('nextjs-16-bun', async transactionEvent => {
-    return transactionEvent?.transaction === 'GET /pageload-tracing';
+test('App router spans should be attached to the pageload request span', async ({ page }) => {
+  const serverSpanPromise = waitForStreamedSpan('nextjs-16-bun', span => {
+    return span.name === 'GET /pageload-tracing' && span.is_segment;
   });
 
-  const pageloadTransactionPromise = waitForTransaction('nextjs-16-bun', async transactionEvent => {
-    return transactionEvent?.transaction === '/pageload-tracing';
+  const pageloadSpanPromise = waitForStreamedSpan('nextjs-16-bun', 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);
 });
 
 // Bun runtime does not populate HTTP request headers as span attributes

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

@@ -1,160 +1,83 @@
 import { expect, test } from '@playwright/test';
-import { waitForTransaction } from '@sentry-internal/test-utils';
+import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
-test('should create a parameterized transaction when the `app` directory is used', async ({ page }) => {
-  const transactionPromise = waitForTransaction('nextjs-16-bun', async transactionEvent => {
-    return (
-      transactionEvent.transaction === '/parameterized/:one' && transactionEvent.contexts?.trace?.op === 'pageload'
-    );
+test('should create a parameterized pageload span when the `app` directory is used', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('nextjs-16-bun', span => {
+    return span.name === '/parameterized/:one' && getSpanOp(span) === 'pageload' && span.is_segment;
   });
 
   await page.goto(`/parameterized/cappuccino`);
 
-  const transaction = await transactionPromise;
-
-  expect(transaction).toMatchObject({
-    contexts: {
-      react: { version: expect.any(String) },
-      trace: {
-        data: {
-          'sentry.op': 'pageload',
-          'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
-          'sentry.segment.name.source': 'route',
-        },
-        op: 'pageload',
-        origin: 'auto.pageload.nextjs.app_router_instrumentation',
-        span_id: expect.stringMatching(/[a-f0-9]{16}/),
-        trace_id: expect.stringMatching(/[a-f0-9]{32}/),
-      },
-    },
-    environment: 'qa',
-    request: {
-      headers: expect.any(Object),
-      url: expect.stringMatching(/\/parameterized\/cappuccino$/),
-    },
-    start_timestamp: expect.any(Number),
-    timestamp: expect.any(Number),
-    transaction: '/parameterized/:one',
-    transaction_info: { source: 'route' },
-    type: 'transaction',
+  const span = await spanPromise;
+
+  expect(span.span_id).toEqual(expect.stringMatching(/[a-f0-9]{16}/));
+  expect(span.trace_id).toEqual(expect.stringMatching(/[a-f0-9]{32}/));
+  expect(span.attributes).toMatchObject({
+    'sentry.op': { value: 'pageload', type: 'string' },
+    'sentry.origin': { value: 'auto.pageload.nextjs.app_router_instrumentation', type: 'string' },
+    'sentry.segment.name.source': { value: 'route', type: 'string' },
+    'sentry.environment': { value: 'qa', type: 'string' },
+    'react.version': { value: expect.any(String), type: 'string' },
   });
 });
 
-test('should create a transaction named after the static route when the `app` directory is used', async ({ page }) => {
-  const transactionPromise = waitForTransaction('nextjs-16-bun', async transactionEvent => {
-    return (
-      transactionEvent.transaction === '/parameterized/static' && transactionEvent.contexts?.trace?.op === 'pageload'
-    );
+test('should create a span named after the static route when the `app` directory is used', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('nextjs-16-bun', span => {
+    return span.name === '/parameterized/static' && getSpanOp(span) === 'pageload' && span.is_segment;
   });
 
   await page.goto(`/parameterized/static`);
 
-  const transaction = await transactionPromise;
-
-  expect(transaction).toMatchObject({
-    contexts: {
-      react: { version: expect.any(String) },
-      trace: {
-        data: {
-          'sentry.op': 'pageload',
-          'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
-          'sentry.segment.name.source': 'route',
-          'url.template': '/parameterized/static',
-        },
-        op: 'pageload',
-        origin: 'auto.pageload.nextjs.app_router_instrumentation',
-        span_id: expect.stringMatching(/[a-f0-9]{16}/),
-        trace_id: expect.stringMatching(/[a-f0-9]{32}/),
-      },
-    },
-    environment: 'qa',
-    request: {
-      headers: expect.any(Object),
-      url: expect.stringMatching(/\/parameterized\/static$/),
-    },
-    start_timestamp: expect.any(Number),
-    timestamp: expect.any(Number),
-    transaction: '/parameterized/static',
-    transaction_info: { source: 'route' },
-    type: 'transaction',
+  const span = await spanPromise;
+
+  expect(span.span_id).toEqual(expect.stringMatching(/[a-f0-9]{16}/));
+  expect(span.trace_id).toEqual(expect.stringMatching(/[a-f0-9]{32}/));
+  expect(span.attributes).toMatchObject({
+    'sentry.op': { value: 'pageload', type: 'string' },
+    'sentry.origin': { value: 'auto.pageload.nextjs.app_router_instrumentation', type: 'string' },
+    'sentry.segment.name.source': { value: 'route', type: 'string' },
+    'sentry.environment': { value: 'qa', type: 'string' },
+    'react.version': { value: expect.any(String), type: 'string' },
+    'url.template': { value: '/parameterized/static', type: 'string' },
   });
 });
 
-test('should create a partially parameterized transaction when the `app` directory is used', async ({ page }) => {
-  const transactionPromise = waitForTransaction('nextjs-16-bun', async transactionEvent => {
-    return (
-      transactionEvent.transaction === '/parameterized/:one/beep' && transactionEvent.contexts?.trace?.op === 'pageload'
-    );
+test('should create a partially parameterized pageload span when the `app` directory is used', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('nextjs-16-bun', span => {
+    return span.name === '/parameterized/:one/beep' && getSpanOp(span) === 'pageload' && span.is_segment;
   });
 
   await page.goto(`/parameterized/cappuccino/beep`);
 
-  const transaction = await transactionPromise;
-
-  expect(transaction).toMatchObject({
-    contexts: {
-      react: { version: expect.any(String) },
-      trace: {
-        data: {
-          'sentry.op': 'pageload',
-          'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
-          'sentry.segment.name.source': 'route',
-        },
-        op: 'pageload',
-        origin: 'auto.pageload.nextjs.app_router_instrumentation',
-        span_id: expect.stringMatching(/[a-f0-9]{16}/),
-        trace_id: expect.stringMatching(/[a-f0-9]{32}/),
-      },
-    },
-    environment: 'qa',
-    request: {
-      headers: expect.any(Object),
-      url: expect.stringMatching(/\/parameterized\/cappuccino\/beep$/),
-    },
-    start_timestamp: expect.any(Number),
-    timestamp: expect.any(Number),
-    transaction: '/parameterized/:one/beep',
-    transaction_info: { source: 'route' },
-    type: 'transaction',
+  const span = await spanPromise;
+
+  expect(span.span_id).toEqual(expect.stringMatching(/[a-f0-9]{16}/));
+  expect(span.trace_id).toEqual(expect.stringMatching(/[a-f0-9]{32}/));
+  expect(span.attributes).toMatchObject({
+    'sentry.op': { value: 'pageload', type: 'string' },
+    'sentry.origin': { value: 'auto.pageload.nextjs.app_router_instrumentation', type: 'string' },
+    'sentry.segment.name.source': { value: 'route', type: 'string' },
+    'sentry.environment': { value: 'qa', type: 'string' },
+    'react.version': { value: expect.any(String), type: 'string' },
   });
 });
 
-test('should create a nested parameterized transaction when the `app` directory is used.', async ({ page }) => {
-  const transactionPromise = waitForTransaction('nextjs-16-bun', async transactionEvent => {
-    return (
-      transactionEvent.transaction === '/parameterized/:one/beep/:two' &&
-      transactionEvent.contexts?.trace?.op === 'pageload'
-    );
+test('should create a nested parameterized pageload span when the `app` directory is used', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('nextjs-16-bun', span => {
+    return span.name === '/parameterized/:one/beep/:two' && getSpanOp(span) === 'pageload' && span.is_segment;
   });
 
   await page.goto(`/parameterized/cappuccino/beep/espresso`);
 
-  const transaction = await transactionPromise;
-
-  expect(transaction).toMatchObject({
-    contexts: {
-      react: { version: expect.any(String) },
-      trace: {
-        data: {
-          'sentry.op': 'pageload',
-          'sentry.origin': 'auto.pageload.nextjs.app_router_instrumentation',
-          'sentry.segment.name.source': 'route',
-        },
-        op: 'pageload',
-        origin: 'auto.pageload.nextjs.app_router_instrumentation',
-        span_id: expect.stringMatching(/[a-f0-9]{16}/),
-        trace_id: expect.stringMatching(/[a-f0-9]{32}/),
-      },
-    },
-    environment: 'qa',
-    request: {
-      headers: expect.any(Object),
-      url: expect.stringMatching(/\/parameterized\/cappuccino\/beep\/espresso$/),
-    },
-    start_timestamp: expect.any(Number),
-    timestamp: expect.any(Number),
-    transaction: '/parameterized/:one/beep/:two',
-    transaction_info: { source: 'route' },
-    type: 'transaction',
+  const span = await spanPromise;
+
+  expect(span.span_id).toEqual(expect.stringMatching(/[a-f0-9]{16}/));
+  expect(span.trace_id).toEqual(expect.stringMatching(/[a-f0-9]{32}/));
+  expect(span.attributes).toMatchObject({
+    'sentry.op': { value: 'pageload', type: 'string' },
+    'sentry.origin': { value: 'auto.pageload.nextjs.app_router_instrumentation', type: 'string' },
+    'sentry.segment.name.source': { value: 'route', type: 'string' },
+    'sentry.environment': { value: 'qa', type: 'string' },
+    'react.version': { value: expect.any(String), type: 'string' },
   });
 });