ref(nextjs): Switch edge wrapping to OTEL (#13937)

Emit proper spans for the edge runtime, even if we don't have any
build-time instrumentation.

Author: Luca Forstner

dev-packages/e2e-tests/test-applications/nextjs-app-dir/middleware.ts

@@ -20,5 +20,5 @@ export async function middleware(request: NextRequest) {
 
 // See "Matching Paths" below to learn more
 export const config = {
-  matcher: ['/api/endpoint-behind-middleware'],
+  matcher: ['/api/endpoint-behind-middleware', '/api/endpoint-behind-faulty-middleware'],
 };

dev-packages/e2e-tests/test-applications/nextjs-app-dir/next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

dev-packages/e2e-tests/test-applications/nextjs-app-dir/pages/api/async-context-edge-endpoint.ts

@@ -7,21 +7,22 @@ export const config = {
 export default async function handler() {
   // Without a working async context strategy the two spans created by `Sentry.startSpan()` would be nested.
 
-  const outerSpanPromise = Sentry.withIsolationScope(() => {
-    return Sentry.startSpan({ name: 'outer-span' }, () => {
-      return new Promise<void>(resolve => setTimeout(resolve, 300));
-    });
+  const outerSpanPromise = Sentry.startSpan({ name: 'outer-span' }, () => {
+    return new Promise<void>(resolve => setTimeout(resolve, 300));
   });
 
-  setTimeout(() => {
-    Sentry.withIsolationScope(() => {
-      return Sentry.startSpan({ name: 'inner-span' }, () => {
+  const innerSpanPromise = new Promise<void>(resolve => {
+    setTimeout(() => {
+      Sentry.startSpan({ name: 'inner-span' }, () => {
         return new Promise<void>(resolve => setTimeout(resolve, 100));
+      }).then(() => {
+        resolve();
       });
-    });
-  }, 100);
+    }, 100);
+  });
 
   await outerSpanPromise;
+  await innerSpanPromise;
 
   return new Response('ok', { status: 200 });
 }

dev-packages/e2e-tests/test-applications/nextjs-app-dir/pages/api/endpoint-behind-faulty-middleware.ts

@@ -0,0 +1,9 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+type Data = {
+  name: string;
+};
+
+export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
+  res.status(200).json({ name: 'John Doe' });
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/async-context-edge.test.ts

@@ -3,7 +3,10 @@ import { waitForTransaction } from '@sentry-internal/test-utils';
 
 test('Should allow for async context isolation in the edge SDK', async ({ request }) => {
   const edgerouteTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
-    return transactionEvent?.transaction === 'GET /api/async-context-edge-endpoint';
+    return (
+      transactionEvent?.transaction === 'GET /api/async-context-edge-endpoint' &&
+      transactionEvent.contexts?.runtime?.name === 'vercel-edge'
+    );
   });
 
   await request.get('/api/async-context-edge-endpoint');
@@ -13,8 +16,5 @@ test('Should allow for async context isolation in the edge SDK', async ({ reques
   const outerSpan = asyncContextEdgerouteTransaction.spans?.find(span => span.description === 'outer-span');
   const innerSpan = asyncContextEdgerouteTransaction.spans?.find(span => span.description === 'inner-span');
 
-  // @ts-expect-error parent_span_id exists
-  expect(outerSpan?.parent_span_id).toStrictEqual(asyncContextEdgerouteTransaction.contexts?.trace?.span_id);
-  // @ts-expect-error parent_span_id exists
-  expect(innerSpan?.parent_span_id).toStrictEqual(asyncContextEdgerouteTransaction.contexts?.trace?.span_id);
+  expect(outerSpan?.parent_span_id).toStrictEqual(innerSpan?.parent_span_id);
 });

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/edge-route.test.ts

@@ -5,7 +5,6 @@ test('Should create a transaction for edge routes', async ({ request }) => {
   const edgerouteTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
       transactionEvent?.transaction === 'GET /api/edge-endpoint' &&
-      transactionEvent?.contexts?.trace?.status === 'ok' &&
       transactionEvent.contexts?.runtime?.name === 'vercel-edge'
     );
   });
@@ -24,31 +23,11 @@ test('Should create a transaction for edge routes', async ({ request }) => {
   expect(edgerouteTransaction.request?.headers?.['x-yeet']).toBe('test-value');
 });
 
-test('Should create a transaction with error status for faulty edge routes', async ({ request }) => {
+test('Faulty edge routes', async ({ request }) => {
   const edgerouteTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
-    return (
-      transactionEvent?.transaction === 'GET /api/error-edge-endpoint' &&
-      transactionEvent?.contexts?.trace?.status === 'unknown_error'
-    );
+    return transactionEvent?.transaction === 'GET /api/error-edge-endpoint';
   });
 
-  request.get('/api/error-edge-endpoint').catch(() => {
-    // Noop
-  });
-
-  const edgerouteTransaction = await edgerouteTransactionPromise;
-
-  expect(edgerouteTransaction.contexts?.trace?.status).toBe('unknown_error');
-  expect(edgerouteTransaction.contexts?.trace?.op).toBe('http.server');
-  expect(edgerouteTransaction.contexts?.runtime?.name).toBe('vercel-edge');
-
-  // Assert that isolation scope works properly
-  expect(edgerouteTransaction.tags?.['my-isolated-tag']).toBe(true);
-  expect(edgerouteTransaction.tags?.['my-global-scope-isolated-tag']).not.toBeDefined();
-});
-
-// TODO(lforst): This cannot make it into production - Make sure to fix this test
-test.skip('Should record exceptions for faulty edge routes', async ({ request }) => {
   const errorEventPromise = waitForError('nextjs-app-dir', errorEvent => {
     return errorEvent?.exception?.values?.[0]?.value === 'Edge Route Error';
   });
@@ -57,11 +36,21 @@ test.skip('Should record exceptions for faulty edge routes', async ({ request })
     // Noop
   });
 
-  const errorEvent = await errorEventPromise;
+  const [edgerouteTransaction, errorEvent] = await Promise.all([
+    test.step('should create a transaction', () => edgerouteTransactionPromise),
+    test.step('should create an error event', () => errorEventPromise),
+  ]);
 
-  // Assert that isolation scope works properly
-  expect(errorEvent.tags?.['my-isolated-tag']).toBe(true);
-  expect(errorEvent.tags?.['my-global-scope-isolated-tag']).not.toBeDefined();
+  test.step('should create transactions with the right fields', () => {
+    expect(edgerouteTransaction.contexts?.trace?.status).toBe('unknown_error');
+    expect(edgerouteTransaction.contexts?.trace?.op).toBe('http.server');
+    expect(edgerouteTransaction.contexts?.runtime?.name).toBe('vercel-edge');
+  });
 
-  expect(errorEvent.transaction).toBe('GET /api/error-edge-endpoint');
+  test.step('should have scope isolation', () => {
+    expect(edgerouteTransaction.tags?.['my-isolated-tag']).toBe(true);
+    expect(edgerouteTransaction.tags?.['my-global-scope-isolated-tag']).not.toBeDefined();
+    expect(errorEvent.tags?.['my-isolated-tag']).toBe(true);
+    expect(errorEvent.tags?.['my-global-scope-isolated-tag']).not.toBeDefined();
+  });
 });

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/edge.test.ts

@@ -19,17 +19,19 @@ test('Should record exceptions for faulty edge server components', async ({ page
   expect(errorEvent.transaction).toBe(`Page Server Component (/edge-server-components/error)`);
 });
 
-// TODO(lforst): This test skip cannot make it into production - make sure to fix this test before merging into develop branch
+// TODO(lforst): Fix this test
 test.skip('Should record transaction for edge server components', async ({ page }) => {
   const serverComponentTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
-    return transactionEvent?.transaction === 'GET /edge-server-components';
+    return (
+      transactionEvent?.transaction === 'GET /edge-server-components' &&
+      transactionEvent.contexts?.runtime?.name === 'vercel-edge'
+    );
   });
 
   await page.goto('/edge-server-components');
 
   const serverComponentTransaction = await serverComponentTransactionPromise;
 
-  expect(serverComponentTransaction).toBe(1);
   expect(serverComponentTransaction).toBeDefined();
   expect(serverComponentTransaction.request?.headers).toBeDefined();
 

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/middleware.test.ts

@@ -3,7 +3,7 @@ import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
 
 test('Should create a transaction for middleware', async ({ request }) => {
   const middlewareTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
-    return transactionEvent?.transaction === 'middleware' && transactionEvent?.contexts?.trace?.status === 'ok';
+    return transactionEvent?.transaction === 'middleware GET /api/endpoint-behind-middleware';
   });
 
   const response = await request.get('/api/endpoint-behind-middleware');
@@ -12,54 +12,48 @@ test('Should create a transaction for middleware', async ({ request }) => {
   const middlewareTransaction = await middlewareTransactionPromise;
 
   expect(middlewareTransaction.contexts?.trace?.status).toBe('ok');
-  expect(middlewareTransaction.contexts?.trace?.op).toBe('middleware.nextjs');
+  expect(middlewareTransaction.contexts?.trace?.op).toBe('http.server.middleware');
   expect(middlewareTransaction.contexts?.runtime?.name).toBe('vercel-edge');
 
   // Assert that isolation scope works properly
   expect(middlewareTransaction.tags?.['my-isolated-tag']).toBe(true);
   expect(middlewareTransaction.tags?.['my-global-scope-isolated-tag']).not.toBeDefined();
 });
 
-test('Should create a transaction with error status for faulty middleware', async ({ request }) => {
+test('Faulty middlewares', async ({ request }) => {
   const middlewareTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
-    return (
-      transactionEvent?.transaction === 'middleware' && transactionEvent?.contexts?.trace?.status === 'unknown_error'
-    );
+    return transactionEvent?.transaction === 'middleware GET /api/endpoint-behind-faulty-middleware';
   });
 
-  request.get('/api/endpoint-behind-middleware', { headers: { 'x-should-throw': '1' } }).catch(() => {
-    // Noop
-  });
-
-  const middlewareTransaction = await middlewareTransactionPromise;
-
-  expect(middlewareTransaction.contexts?.trace?.status).toBe('unknown_error');
-  expect(middlewareTransaction.contexts?.trace?.op).toBe('middleware.nextjs');
-  expect(middlewareTransaction.contexts?.runtime?.name).toBe('vercel-edge');
-});
-
-// TODO(lforst): This cannot make it into production - Make sure to fix this test
-test.skip('Records exceptions happening in middleware', async ({ request }) => {
   const errorEventPromise = waitForError('nextjs-app-dir', errorEvent => {
     return errorEvent?.exception?.values?.[0]?.value === 'Middleware Error';
   });
 
-  request.get('/api/endpoint-behind-middleware', { headers: { 'x-should-throw': '1' } }).catch(() => {
+  request.get('/api/endpoint-behind-faulty-middleware', { headers: { 'x-should-throw': '1' } }).catch(() => {
     // Noop
   });
 
-  const errorEvent = await errorEventPromise;
+  await test.step('should record transactions', async () => {
+    const middlewareTransaction = await middlewareTransactionPromise;
+    expect(middlewareTransaction.contexts?.trace?.status).toBe('unknown_error');
+    expect(middlewareTransaction.contexts?.trace?.op).toBe('http.server.middleware');
+    expect(middlewareTransaction.contexts?.runtime?.name).toBe('vercel-edge');
+  });
 
-  // Assert that isolation scope works properly
-  expect(errorEvent.tags?.['my-isolated-tag']).toBe(true);
-  expect(errorEvent.tags?.['my-global-scope-isolated-tag']).not.toBeDefined();
-  expect(errorEvent.transaction).toBe('middleware');
+  await test.step('should record exceptions', async () => {
+    const errorEvent = await errorEventPromise;
+
+    // Assert that isolation scope works properly
+    expect(errorEvent.tags?.['my-isolated-tag']).toBe(true);
+    expect(errorEvent.tags?.['my-global-scope-isolated-tag']).not.toBeDefined();
+    expect(errorEvent.transaction).toBe('middleware GET /api/endpoint-behind-faulty-middleware');
+  });
 });
 
 test('Should trace outgoing fetch requests inside middleware and create breadcrumbs for it', async ({ request }) => {
   const middlewareTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
-      transactionEvent?.transaction === 'middleware' &&
+      transactionEvent?.transaction === 'middleware GET /api/endpoint-behind-middleware' &&
       !!transactionEvent.spans?.find(span => span.op === 'http.client')
     );
   });