test(e2e): Port the create-remix-app-express E2E app to span streaming

dev-packages/e2e-tests/test-applications/create-remix-app-express/app/entry.client.tsx

@@ -14,7 +14,6 @@ declare global {
 }
 
 Sentry.init({
-  traceLifecycle: 'static',
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: window.ENV.SENTRY_DSN,
   integrations: [

dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/scope-bleed.$id.tsx

@@ -4,7 +4,7 @@ import * as Sentry from '@sentry/remix';
 export const loader: LoaderFunction = async ({ params: { id } }) => {
   const timeTil = parseInt(id || '', 10) * 1000;
   await new Promise(resolve => setTimeout(resolve, 3000 - timeTil));
-  Sentry.setTag(`tag${id}`, id);
+  Sentry.setAttribute(`tag${id}`, id);
   return json({ test: 'test' });
 };
 

dev-packages/e2e-tests/test-applications/create-remix-app-express/instrument.mjs

@@ -2,7 +2,6 @@ import * as Sentry from '@sentry/remix';
 import process from 'process';
 
 Sentry.init({
-  traceLifecycle: 'static',
   tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.E2E_TEST_DSN,

dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/client-transactions.test.ts

@@ -1,48 +1,42 @@
 import { expect, test } from '@playwright/test';
-import { waitForTransaction } from '@sentry-internal/test-utils';
+import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
-test('Sends a pageload transaction to Sentry', async ({ page }) => {
-  const transactionPromise = waitForTransaction('create-remix-app-express', transactionEvent => {
-    return transactionEvent.contexts?.trace?.op === 'pageload' && transactionEvent.transaction === '/';
+test('Sends a pageload span to Sentry', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('create-remix-app-express', span => {
+    return getSpanOp(span) === 'pageload' && span.is_segment && span.name === '/';
   });
 
   await page.goto('/');
 
-  const transactionEvent = await transactionPromise;
-
-  expect(transactionEvent).toBeDefined();
-  expect(transactionEvent.contexts?.trace?.data).toEqual(
-    expect.objectContaining({
-      'sentry.origin': 'auto.pageload.remix',
-      'sentry.segment.name.source': 'route',
-      'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/$/),
-      'url.path': '/',
-      'url.template': '/',
-    }),
-  );
+  const span = await spanPromise;
+
+  expect(span.attributes).toMatchObject({
+    'sentry.origin': { value: 'auto.pageload.remix', type: 'string' },
+    'sentry.segment.name.source': { value: 'route', type: 'string' },
+    'url.full': { value: expect.stringMatching(/^https?:\/\/localhost:\d+\/$/), type: 'string' },
+    'url.path': { value: '/', type: 'string' },
+    'url.template': { value: '/', type: 'string' },
+  });
 });
 
-test('Sends a navigation transaction to Sentry', async ({ page }) => {
-  const transactionPromise = waitForTransaction('create-remix-app-express', transactionEvent => {
-    return transactionEvent.contexts?.trace?.op === 'navigation' && transactionEvent.transaction === '/user/:id';
+test('Sends a navigation span to Sentry', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('create-remix-app-express', span => {
+    return getSpanOp(span) === 'navigation' && span.is_segment && span.name === '/user/:id';
   });
 
   await page.goto('/');
 
   const linkElement = page.locator('id=navigation');
   await linkElement.click();
 
-  const transactionEvent = await transactionPromise;
-
-  expect(transactionEvent).toBeDefined();
-  expect(transactionEvent.contexts?.trace?.data).toEqual(
-    expect.objectContaining({
-      'sentry.segment.name.source': 'route',
-      'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/user\/5$/),
-      'url.path': '/user/5',
-      'url.template': '/user/:id',
-    }),
-  );
+  const span = await spanPromise;
+
+  expect(span.attributes).toMatchObject({
+    'sentry.segment.name.source': { value: 'route', type: 'string' },
+    'url.full': { value: expect.stringMatching(/^https?:\/\/localhost:\d+\/user\/5$/), type: 'string' },
+    'url.path': { value: '/user/5', type: 'string' },
+    'url.template': { value: '/user/:id', type: 'string' },
+  });
 });
 
 test('Renders `sentry-trace` and `baggage` meta tags for the root route', async ({ page }) => {
@@ -133,78 +127,66 @@ test('Does not inject sentry-trace and baggage when throwing an external redirec
   expect(baggage).toBeFalsy();
 });
 
-test('Pageload transaction is parameterized for a dynamic route', async ({ page }) => {
-  const transactionPromise = waitForTransaction('create-remix-app-express', transactionEvent => {
-    return (
-      transactionEvent.contexts?.trace?.op === 'pageload' &&
-      transactionEvent.transaction === '/error-boundary-capture/:id'
-    );
+test('Pageload span is parameterized for a dynamic route', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('create-remix-app-express', span => {
+    return getSpanOp(span) === 'pageload' && span.is_segment && span.name === '/error-boundary-capture/:id';
   });
 
   await page.goto('/error-boundary-capture/123');
 
-  const transactionEvent = await transactionPromise;
+  const span = await spanPromise;
 
-  expect(transactionEvent.contexts?.trace?.data?.['sentry.segment.name.source']).toBe('route');
+  expect(span.attributes['sentry.segment.name.source']?.value).toBe('route');
 });
 
-test('Pageload transaction is parameterized for a 2-level nested route', async ({ page }) => {
-  const transactionPromise = waitForTransaction('create-remix-app-express', transactionEvent => {
-    return (
-      transactionEvent.contexts?.trace?.op === 'pageload' &&
-      transactionEvent.transaction === '/users/:userId/posts/:postId'
-    );
+test('Pageload span is parameterized for a 2-level nested route', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('create-remix-app-express', span => {
+    return getSpanOp(span) === 'pageload' && span.is_segment && span.name === '/users/:userId/posts/:postId';
   });
 
   await page.goto('/users/user123/posts/post456');
 
-  const transactionEvent = await transactionPromise;
+  const span = await spanPromise;
 
-  expect(transactionEvent.contexts?.trace?.data?.['sentry.segment.name.source']).toBe('route');
+  expect(span.attributes['sentry.segment.name.source']?.value).toBe('route');
 });
 
-test('Pageload transaction is parameterized for a deeply nested route', async ({ page }) => {
-  const transactionPromise = waitForTransaction('create-remix-app-express', transactionEvent => {
-    return (
-      transactionEvent.contexts?.trace?.op === 'pageload' &&
-      transactionEvent.transaction === '/deeply/:nested/:structure/:id'
-    );
+test('Pageload span is parameterized for a deeply nested route', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('create-remix-app-express', span => {
+    return getSpanOp(span) === 'pageload' && span.is_segment && span.name === '/deeply/:nested/:structure/:id';
   });
 
   await page.goto('/deeply/level1/level2/level3');
 
-  const transactionEvent = await transactionPromise;
+  const span = await spanPromise;
 
-  expect(transactionEvent.contexts?.trace?.data?.['sentry.segment.name.source']).toBe('route');
+  expect(span.attributes['sentry.segment.name.source']?.value).toBe('route');
 });
 
-test('Pageload transaction is parameterized for a flat dot-notation route', async ({ page }) => {
-  const transactionPromise = waitForTransaction('create-remix-app-express', transactionEvent => {
-    return (
-      transactionEvent.contexts?.trace?.op === 'pageload' &&
-      transactionEvent.transaction === '/products/:productId/reviews/:reviewId'
-    );
+test('Pageload span is parameterized for a flat dot-notation route', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('create-remix-app-express', span => {
+    return getSpanOp(span) === 'pageload' && span.is_segment && span.name === '/products/:productId/reviews/:reviewId';
   });
 
   await page.goto('/products/prod789/reviews/rev101');
 
-  const transactionEvent = await transactionPromise;
+  const span = await spanPromise;
 
-  expect(transactionEvent.contexts?.trace?.data?.['sentry.segment.name.source']).toBe('route');
+  expect(span.attributes['sentry.segment.name.source']?.value).toBe('route');
 });
 
-test('Reports a manually created transaction', async ({ page }) => {
-  const transactionPromise = waitForTransaction('create-remix-app-express', transactionEvent => {
-    return transactionEvent.transaction === 'test_transaction_1';
+test('Reports a manually created span', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan('create-remix-app-express', span => {
+    return span.name === 'test_transaction_1';
   });
 
   await page.goto('/manual-tracing/0');
 
-  const transactionEvent = await transactionPromise;
+  const span = await spanPromise;
 
-  expect(transactionEvent.sdk?.name).toBe('sentry.javascript.remix');
-  expect(transactionEvent.start_timestamp).toBeDefined();
-  expect(transactionEvent.timestamp).toBeDefined();
+  expect(span.attributes['sentry.sdk.name']?.value).toBe('sentry.javascript.remix');
+  expect(span.start_timestamp).toBeDefined();
+  expect(span.end_timestamp).toBeDefined();
 });
 
 test('Renders data from a deferred loader response', async ({ page }) => {

dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-errors.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
+import { getSpanOp, waitForError, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
 test('Sends a loader error to Sentry', async ({ page }) => {
   const loaderErrorPromise = waitForError('create-remix-app-express', errorEvent => {
@@ -14,8 +14,8 @@ test('Sends a loader error to Sentry', async ({ page }) => {
 });
 
 test('Reports an error thrown from a loader with handleError mechanism', async ({ page }) => {
-  const transactionPromise = waitForTransaction('create-remix-app-express', txn => {
-    return txn.transaction === 'GET loader-json-response/:id' && txn.contexts?.trace?.status === 'internal_error';
+  const spanPromise = waitForStreamedSpan('create-remix-app-express', span => {
+    return getSpanOp(span) === 'http.server' && span.name === 'GET loader-json-response/:id' && span.status === 'error';
   });
   const errorPromise = waitForError('create-remix-app-express', errorEvent => {
     return (
@@ -26,10 +26,10 @@ test('Reports an error thrown from a loader with handleError mechanism', async (
 
   await page.goto('/loader-json-response/-2').catch(() => {});
 
-  const transaction = await transactionPromise;
+  const span = await spanPromise;
   const errorEvent = await errorPromise;
 
-  expect(transaction.contexts?.trace?.data?.['http.response.status_code']).toBe(500);
+  expect(span.attributes['http.response.status_code']?.value).toBe(500);
   expect(errorEvent.exception?.values?.[0]?.mechanism).toMatchObject({
     handled: false,
     type: 'auto.function.remix.server',
@@ -76,8 +76,10 @@ test('Reports an error in the redirection target loader', async ({ page }) => {
 });
 
 test('Reports an error thrown from an action', async ({ request }) => {
-  const transactionPromise = waitForTransaction('create-remix-app-express', txn => {
-    return txn.transaction === 'POST action-json-response/:id' && txn.contexts?.trace?.status === 'internal_error';
+  const spanPromise = waitForStreamedSpan('create-remix-app-express', span => {
+    return (
+      getSpanOp(span) === 'http.server' && span.name === 'POST action-json-response/:id' && span.status === 'error'
+    );
   });
   const errorPromise = waitForError('create-remix-app-express', errorEvent => {
     return (
@@ -90,10 +92,10 @@ test('Reports an error thrown from an action', async ({ request }) => {
 
   await request.post('/action-json-response/-1').catch(() => {});
 
-  const transaction = await transactionPromise;
+  const span = await spanPromise;
   const errorEvent = await errorPromise;
 
-  expect(transaction.contexts?.trace?.data?.['http.response.status_code']).toBe(500);
+  expect(span.attributes['http.response.status_code']?.value).toBe(500);
   expect(errorEvent.exception?.values?.[0]?.mechanism).toMatchObject({
     handled: false,
     type: 'auto.function.remix.server',
@@ -177,23 +179,21 @@ test('Reports a thrown plain object from an action', async ({ request }) => {
 });
 
 test('Reports an SSR error and applies tags from wrapHandleErrorWithSentry', async ({ page }) => {
-  const transactionPromise = waitForTransaction('create-remix-app-express', txn => {
-    return (
-      txn.transaction === 'GET ssr-error' &&
-      txn.contexts?.trace?.status === 'internal_error' &&
-      txn.tags?.['remix-test-tag'] === 'remix-test-value'
-    );
+  const spanPromise = waitForStreamedSpan('create-remix-app-express', span => {
+    return getSpanOp(span) === 'http.server' && span.name === 'GET ssr-error' && span.status === 'error';
   });
   const errorPromise = waitForError('create-remix-app-express', errorEvent => {
     return errorEvent.exception?.values?.[0]?.value === 'Sentry SSR Test Error';
   });
 
   await page.goto('/ssr-error').catch(() => {});
 
-  const transaction = await transactionPromise;
+  const span = await spanPromise;
   const errorEvent = await errorPromise;
 
-  expect(transaction.contexts?.trace?.data?.['http.response.status_code']).toBe(500);
+  expect(span.attributes['http.response.status_code']?.value).toBe(500);
+  // `wrapHandleErrorWithSentry` sets the tag on the scope, which only events carry.
+  expect(errorEvent.tags?.['remix-test-tag']).toBe('remix-test-value');
   expect(errorEvent.exception?.values?.[0]?.mechanism).toMatchObject({
     handled: false,
     type: 'auto.function.remix.server',