feat(nextjs): Support Next.js proxy files (#17926)

- Supports providing a `proxy.ts` file for global middleware as
`middleware.ts` will be deprecated with Next.js 16
- Forks Isolation Scope on span start in the edge SDK as we don't wrap
middleware/proxy files anymore when using turbopack
- Adds middleware e2e tests for next-16


closes #17894

Author: chargome

dev-packages/e2e-tests/test-applications/nextjs-16/.npmrc

@@ -0,0 +1,4 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
+public-hoist-pattern[]=*import-in-the-middle*
+public-hoist-pattern[]=*require-in-the-middle*

dev-packages/e2e-tests/test-applications/nextjs-16/app/api/endpoint-behind-middleware/route.ts

@@ -0,0 +1,3 @@
+export function GET() {
+  return Response.json({ name: 'John Doe' });
+}

dev-packages/e2e-tests/test-applications/nextjs-16/package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@sentry/nextjs": "latest || *",
+    "@sentry/core": "latest || *",
     "ai": "^3.0.0",
     "import-in-the-middle": "^1",
     "next": "16.0.0-beta.0",

dev-packages/e2e-tests/test-applications/nextjs-16/proxy.ts

@@ -0,0 +1,24 @@
+import { getDefaultIsolationScope } from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function proxy(request: NextRequest) {
+  Sentry.setTag('my-isolated-tag', true);
+  Sentry.setTag('my-global-scope-isolated-tag', getDefaultIsolationScope().getScopeData().tags['my-isolated-tag']); // We set this tag to be able to assert that the previously set tag has not leaked into the global isolation scope
+
+  if (request.headers.has('x-should-throw')) {
+    throw new Error('Middleware Error');
+  }
+
+  if (request.headers.has('x-should-make-request')) {
+    await fetch('http://localhost:3030/');
+  }
+
+  return NextResponse.next();
+}
+
+// See "Matching Paths" below to learn more
+export const config = {
+  matcher: ['/api/endpoint-behind-middleware', '/api/endpoint-behind-faulty-middleware'],
+};

dev-packages/e2e-tests/test-applications/nextjs-16/sentry.edge.config.ts

@@ -6,4 +6,5 @@ Sentry.init({
   tunnel: `http://localhost:3031/`, // proxy server
   tracesSampleRate: 1.0,
   sendDefaultPii: true,
+  // debug: true,
 });

dev-packages/e2e-tests/test-applications/nextjs-16/sentry.server.config.ts

@@ -6,5 +6,6 @@ Sentry.init({
   tunnel: `http://localhost:3031/`, // proxy server
   tracesSampleRate: 1.0,
   sendDefaultPii: true,
+  // debug: true,
   integrations: [Sentry.vercelAIIntegration()],
 });

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

@@ -0,0 +1,105 @@
+import { expect, test } from '@playwright/test';
+import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
+
+test('Should create a transaction for middleware', async ({ request }) => {
+  const middlewareTransactionPromise = waitForTransaction('nextjs-16', async transactionEvent => {
+    return transactionEvent?.transaction === 'middleware GET';
+  });
+
+  const response = await request.get('/api/endpoint-behind-middleware');
+  expect(await response.json()).toStrictEqual({ name: 'John Doe' });
+
+  const middlewareTransaction = await middlewareTransactionPromise;
+
+  expect(middlewareTransaction.contexts?.trace?.status).toBe('ok');
+  expect(middlewareTransaction.contexts?.trace?.op).toBe('http.server.middleware');
+  expect(middlewareTransaction.contexts?.runtime?.name).toBe('vercel-edge');
+  expect(middlewareTransaction.transaction_info?.source).toBe('url');
+
+  // 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('Faulty middlewares', async ({ request }) => {
+  const middlewareTransactionPromise = waitForTransaction('nextjs-16', async transactionEvent => {
+    return transactionEvent?.transaction === 'middleware GET';
+  });
+
+  const errorEventPromise = waitForError('nextjs-16', errorEvent => {
+    return errorEvent?.exception?.values?.[0]?.value === 'Middleware Error';
+  });
+
+  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('unknown_error');
+    expect(middlewareTransaction.contexts?.trace?.op).toBe('http.server.middleware');
+    expect(middlewareTransaction.contexts?.runtime?.name).toBe('vercel-edge');
+    expect(middlewareTransaction.transaction_info?.source).toBe('url');
+  });
+
+  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();
+    // this differs between webpack and turbopack
+    expect(['middleware GET', '/middleware']).toContain(errorEvent.transaction);
+  });
+});
+
+test('Should trace outgoing fetch requests inside middleware and create breadcrumbs for it', async ({ request }) => {
+  const middlewareTransactionPromise = waitForTransaction('nextjs-16', async transactionEvent => {
+    return (
+      transactionEvent?.transaction === 'middleware GET' &&
+      !!transactionEvent.spans?.find(span => span.op === 'http.client')
+    );
+  });
+
+  request.get('/api/endpoint-behind-middleware', { headers: { 'x-should-make-request': '1' } }).catch(() => {
+    // Noop
+  });
+
+  const middlewareTransaction = await middlewareTransactionPromise;
+
+  expect(middlewareTransaction.spans).toEqual(
+    expect.arrayContaining([
+      {
+        data: {
+          'http.method': 'GET',
+          'http.response.status_code': 200,
+          type: 'fetch',
+          url: 'http://localhost:3030/',
+          'http.url': 'http://localhost:3030/',
+          'server.address': 'localhost:3030',
+          'sentry.op': 'http.client',
+          'sentry.origin': 'auto.http.wintercg_fetch',
+        },
+        description: 'GET http://localhost:3030/',
+        op: 'http.client',
+        origin: 'auto.http.wintercg_fetch',
+        parent_span_id: expect.stringMatching(/[a-f0-9]{16}/),
+        span_id: expect.stringMatching(/[a-f0-9]{16}/),
+        start_timestamp: expect.any(Number),
+        status: 'ok',
+        timestamp: expect.any(Number),
+        trace_id: expect.stringMatching(/[a-f0-9]{32}/),
+      },
+    ]),
+  );
+  expect(middlewareTransaction.breadcrumbs).toEqual(
+    expect.arrayContaining([
+      {
+        category: 'fetch',
+        data: { method: 'GET', status_code: 200, url: 'http://localhost:3030/' },
+        timestamp: expect.any(Number),
+        type: 'http',
+      },
+    ]),
+  );
+});

dev-packages/e2e-tests/test-applications/nextjs-pages-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-pages-dir', async transactionEvent => {
-    return transactionEvent?.transaction === 'middleware GET /api/endpoint-behind-middleware';
+    return transactionEvent?.transaction === 'middleware GET';
   });
 
   const response = await request.get('/api/endpoint-behind-middleware');
@@ -23,7 +23,7 @@ test('Should create a transaction for middleware', async ({ request }) => {
 
 test('Faulty middlewares', async ({ request }) => {
   const middlewareTransactionPromise = waitForTransaction('nextjs-pages-dir', async transactionEvent => {
-    return transactionEvent?.transaction === 'middleware GET /api/endpoint-behind-faulty-middleware';
+    return transactionEvent?.transaction === 'middleware GET';
   });
 
   const errorEventPromise = waitForError('nextjs-pages-dir', errorEvent => {
@@ -48,14 +48,14 @@ test('Faulty middlewares', async ({ request }) => {
     // 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');
+    expect(errorEvent.transaction).toBe('middleware GET');
   });
 });
 
 test('Should trace outgoing fetch requests inside middleware and create breadcrumbs for it', async ({ request }) => {
   const middlewareTransactionPromise = waitForTransaction('nextjs-pages-dir', async transactionEvent => {
     return (
-      transactionEvent?.transaction === 'middleware GET /api/endpoint-behind-middleware' &&
+      transactionEvent?.transaction === 'middleware GET' &&
       !!transactionEvent.spans?.find(span => span.op === 'http.client')
     );
   });

packages/nextjs/src/common/wrapMiddlewareWithSentry.ts

@@ -64,7 +64,7 @@ export function wrapMiddlewareWithSentry<H extends EdgeRouteHandler>(
           isolationScope.setSDKProcessingMetadata({
             normalizedRequest: winterCGRequestToRequestData(req),
           });
-          spanName = `middleware ${req.method} ${new URL(req.url).pathname}`;
+          spanName = `middleware ${req.method}`;
           spanSource = 'url';
         } else {
           spanName = 'middleware';

packages/nextjs/src/config/templates/middlewareWrapperTemplate.ts

@@ -15,6 +15,7 @@ type NextApiModule =
       // ESM export
       default?: EdgeRouteHandler;
       middleware?: EdgeRouteHandler;
+      proxy?: EdgeRouteHandler;
     }
   // CJS export
   | EdgeRouteHandler;
@@ -29,6 +30,9 @@ let userProvidedDefaultHandler: EdgeRouteHandler | undefined = undefined;
 if ('middleware' in userApiModule && typeof userApiModule.middleware === 'function') {
   // Handle when user defines via named ESM export: `export { middleware };`
   userProvidedNamedHandler = userApiModule.middleware;
+} else if ('proxy' in userApiModule && typeof userApiModule.proxy === 'function') {
+  // Handle when user defines via named ESM export (Next.js 16): `export { proxy };`
+  userProvidedNamedHandler = userApiModule.proxy;
 } else if ('default' in userApiModule && typeof userApiModule.default === 'function') {
   // Handle when user defines via ESM export: `export default myFunction;`
   userProvidedDefaultHandler = userApiModule.default;
@@ -40,6 +44,7 @@ if ('middleware' in userApiModule && typeof userApiModule.middleware === 'functi
 export const middleware = userProvidedNamedHandler
   ? Sentry.wrapMiddlewareWithSentry(userProvidedNamedHandler)
   : undefined;
+export const proxy = userProvidedNamedHandler ? Sentry.wrapMiddlewareWithSentry(userProvidedNamedHandler) : undefined;
 export default userProvidedDefaultHandler ? Sentry.wrapMiddlewareWithSentry(userProvidedDefaultHandler) : undefined;
 
 // Re-export anything exported by the page module we're wrapping. When processing this code, Rollup is smart enough to