test(e2e): Migrate nuxt-3-top-level-import to span streaming (#23948)

Reference #23804

One change beyond the mechanical port: the server error test read scope
tags off the transaction event. Streamed spans do not serialize scope
tags, so those assertions are gone. The error event's tags still cover
the request-isolation scenario the test cares about.

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: s1gr1d

dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/sentry.client.config.ts

@@ -2,7 +2,6 @@ import * as Sentry from '@sentry/nuxt';
 import { useRuntimeConfig } from '#imports';
 
 Sentry.init({
-  traceLifecycle: 'static',
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: useRuntimeConfig().public.sentry.dsn,
   tunnel: `http://localhost:3031/`, // proxy server

dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/sentry.server.config.ts

@@ -1,7 +1,6 @@
 import * as Sentry from '@sentry/nuxt';
 
 Sentry.init({
-  traceLifecycle: 'static',
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
   environment: 'qa', // dynamic sampling bias to keep transactions
   tracesSampleRate: 1.0, //  Capture 100% of the transactions

dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/errors.server.test.ts

@@ -1,10 +1,16 @@
 import { expect, test } from '@playwright/test';
-import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
+import { getSpanOp, waitForError, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
 test.describe('server-side errors', async () => {
   test('captures api fetch error (fetched on click)', async ({ page }) => {
-    const transactionEventPromise = waitForTransaction('nuxt-3-top-level-import', async transactionEvent => {
-      return transactionEvent?.transaction === 'GET /api/server-error';
+    // The exact-match API route is not parametrized, so the segment keeps a method-only name and
+    // has to be selected via its `url.path` attribute.
+    const serverSpanPromise = waitForStreamedSpan('nuxt-3-top-level-import', span => {
+      return (
+        span.is_segment &&
+        getSpanOp(span) === 'http.server' &&
+        span.attributes['url.path']?.value === '/api/server-error'
+      );
     });
 
     const errorPromise = waitForError('nuxt-3-top-level-import', async errorEvent => {
@@ -14,7 +20,7 @@ test.describe('server-side errors', async () => {
     await page.goto(`/fetch-server-error`);
     await page.getByText('Fetch Server API Error', { exact: true }).click();
 
-    const transactionEvent = await transactionEventPromise;
+    const serverSpan = await serverSpanPromise;
     const error = await errorPromise;
 
     expect(error.transaction).toEqual('GET /api/server-error');
@@ -40,15 +46,19 @@ test.describe('server-side errors', async () => {
       exception_id: 0,
     });
 
+    // Streamed spans carry no scope tags, so isolation is asserted on the error event only
+    expect(serverSpan.name).toBe('GET');
     expect(error.tags?.['my-isolated-tag']).toBe(true);
     expect(error.tags?.['my-global-scope-isolated-tag']).not.toBeDefined();
-    expect(transactionEvent.tags?.['my-isolated-tag']).toBe(true);
-    expect(transactionEvent.tags?.['my-global-scope-isolated-tag']).not.toBeDefined();
   });
 
   test('isolates requests', async ({ page }) => {
-    const transactionEventPromise = waitForTransaction('nuxt-3-top-level-import', async transactionEvent => {
-      return transactionEvent?.transaction === 'GET /api/server-error';
+    const serverSpanPromise = waitForStreamedSpan('nuxt-3-top-level-import', span => {
+      return (
+        span.is_segment &&
+        getSpanOp(span) === 'http.server' &&
+        span.attributes['url.path']?.value === '/api/server-error'
+      );
     });
 
     const errorPromise = waitForError('nuxt-3-top-level-import', async errorEvent => {
@@ -58,13 +68,12 @@ test.describe('server-side errors', async () => {
     await page.goto(`/fetch-server-error`);
     await page.getByText('Fetch Server API Error', { exact: true }).click();
 
-    const transactionEvent = await transactionEventPromise;
+    await serverSpanPromise;
     const error = await errorPromise;
 
+    // Streamed spans carry no scope tags, so isolation is asserted on the error event only
     expect(error.tags?.['my-isolated-tag']).toBe(true);
     expect(error.tags?.['my-global-scope-isolated-tag']).not.toBeDefined();
-    expect(transactionEvent.tags?.['my-isolated-tag']).toBe(true);
-    expect(transactionEvent.tags?.['my-global-scope-isolated-tag']).not.toBeDefined();
   });
 
   test('captures api fetch error (fetched on click) with parametrized route', async ({ page }) => {

dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/tracing.client.test.ts

@@ -1,60 +1,49 @@
 import { expect, test } from '@playwright/test';
-import { waitForTransaction } from '@sentry-internal/test-utils';
-import type { Span } from '@sentry/nuxt';
+import { collectStreamedSpans, getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
 test('sends a pageload root span with a parameterized URL', async ({ page }) => {
-  const transactionPromise = waitForTransaction('nuxt-3-top-level-import', async transactionEvent => {
-    return transactionEvent.transaction === '/test-param/:param()';
+  const pageloadSpanPromise = waitForStreamedSpan('nuxt-3-top-level-import', span => {
+    return getSpanOp(span) === 'pageload' && span.is_segment;
   });
 
   await page.goto(`/test-param/1234`);
 
-  const rootSpan = await transactionPromise;
-
-  expect(rootSpan).toMatchObject({
-    contexts: {
-      trace: {
-        data: {
-          'sentry.segment.name.source': 'route',
-          'sentry.origin': 'auto.pageload.vue',
-          'sentry.op': 'pageload',
-          'params.param': '1234',
-          'url.template': '/test-param/:param()',
-          'url.path': '/test-param/1234',
-          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/test-param\/1234$/),
-        },
-        op: 'pageload',
-        origin: 'auto.pageload.vue',
-      },
-    },
-    transaction: '/test-param/:param()',
-    transaction_info: {
-      source: 'route',
-    },
+  const pageloadSpan = await pageloadSpanPromise;
+
+  expect(pageloadSpan.name).toBe('/test-param/:param()');
+  expect(pageloadSpan.status).toBe('ok');
+  expect(pageloadSpan.attributes).toMatchObject({
+    'sentry.segment.name.source': { type: 'string', value: 'route' },
+    'sentry.origin': { type: 'string', value: 'auto.pageload.vue' },
+    'sentry.op': { type: 'string', value: 'pageload' },
+    'params.param': { type: 'string', value: '1234' },
+    'url.template': { type: 'string', value: '/test-param/:param()' },
+    'url.path': { type: 'string', value: '/test-param/1234' },
+    'url.full': { type: 'string', value: expect.stringMatching(/^https?:\/\/localhost:\d+\/test-param\/1234$/) },
   });
 });
 
 test('sends component tracking spans when `trackComponents` is enabled', async ({ page }) => {
-  const transactionPromise = waitForTransaction('nuxt-3-top-level-import', async transactionEvent => {
-    return transactionEvent.transaction === '/client-error';
-  });
+  const spansPromise = collectStreamedSpans('nuxt-3-top-level-import', spans =>
+    spans.some(span => span.name === '/client-error' && span.is_segment && getSpanOp(span) === 'pageload'),
+  );
 
   await page.goto(`/client-error`);
 
-  const rootSpan = await transactionPromise;
-  const errorButtonSpan = rootSpan.spans.find((span: Span) => span.description === 'Vue <ErrorButton>');
+  const spans = await spansPromise;
+  const errorButtonSpan = spans.find(span => span.name === 'Vue <ErrorButton>');
 
-  const expected = {
-    data: { 'sentry.origin': 'auto.ui.vue', 'sentry.op': 'ui.mount' },
-    description: 'Vue <ErrorButton>',
-    op: 'ui.mount',
+  expect(errorButtonSpan).toMatchObject({
+    name: 'Vue <ErrorButton>',
+    is_segment: false,
     parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
     span_id: expect.stringMatching(/[a-f0-9]{16}/),
-    start_timestamp: expect.any(Number),
-    timestamp: expect.any(Number),
     trace_id: expect.stringMatching(/[a-f0-9]{32}/),
-    origin: 'auto.ui.vue',
-  };
-
-  expect(errorButtonSpan).toMatchObject(expected);
+    start_timestamp: expect.any(Number),
+    end_timestamp: expect.any(Number),
+    attributes: expect.objectContaining({
+      'sentry.op': { type: 'string', value: 'ui.mount' },
+      'sentry.origin': { type: 'string', value: 'auto.ui.vue' },
+    }),
+  });
 });

dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/tracing.server.test.ts

@@ -1,45 +1,39 @@
 import { expect, test } from '@playwright/test';
-import { waitForTransaction } from '@sentry-internal/test-utils';
-import { SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN } from '@sentry/nuxt';
+import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
-test('sends a server action transaction on pageload', async ({ page }) => {
-  const transactionPromise = waitForTransaction('nuxt-3-top-level-import', transactionEvent => {
-    return transactionEvent.transaction.includes('GET /test-param/');
+test('sends a server root span on pageload', async ({ page }) => {
+  const serverSpanPromise = waitForStreamedSpan('nuxt-3-top-level-import', span => {
+    return span.is_segment && span.name.includes('GET /test-param/');
   });
 
   await page.goto('/test-param/1234');
 
-  const transaction = await transactionPromise;
+  const serverSpan = await serverSpanPromise;
 
-  expect(transaction.contexts.trace).toEqual(
-    expect.objectContaining({
-      data: expect.objectContaining({
-        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'http.server',
-        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.http_server',
-      }),
-    }),
-  );
+  expect(getSpanOp(serverSpan)).toBe('http.server');
+  expect(serverSpan.attributes['sentry.origin']?.value).toBe('auto.http.http_server');
 });
 
-test('does not send transactions for build asset folder "_nuxt"', async ({ page }) => {
+test('does not send spans for build asset folder "_nuxt"', async ({ page }) => {
   let buildAssetFolderOccurred = false;
 
-  waitForTransaction('nuxt-3-top-level-import', transactionEvent => {
-    if (transactionEvent.transaction?.match(/^GET \/_nuxt\//)) {
+  waitForStreamedSpan('nuxt-3-top-level-import', span => {
+    if (span.is_segment && /^GET \/_nuxt\//.test(span.name)) {
       buildAssetFolderOccurred = true;
     }
     return false; // expects to return a boolean (but not relevant here)
   });
 
-  const transactionEventPromise = waitForTransaction('nuxt-3-top-level-import', transactionEvent => {
-    return transactionEvent.transaction.includes('GET /test-param/');
+  const serverSpanPromise = waitForStreamedSpan('nuxt-3-top-level-import', span => {
+    return span.is_segment && span.name.includes('GET /test-param/');
   });
 
   await page.goto('/test-param/1234');
 
-  const transactionEvent = await transactionEventPromise;
+  const serverSpan = await serverSpanPromise;
 
   expect(buildAssetFolderOccurred).toBe(false);
 
-  expect(transactionEvent.transaction).toBe('GET /test-param/:param()');
+  expect(serverSpan.name).toBe('GET /test-param/:param()');
+  expect(serverSpan.attributes['sentry.segment.name.source']?.value).toBe('route');
 });