test(react-router): Test v8 middleware (#17783)

Author: chargome

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/context.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react-router';
+
+export type User = {
+  id: string;
+  name: string;
+};
+
+export const userContext = createContext<User | null>(null);

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes.ts

@@ -17,5 +17,6 @@ export default [
     route('static', 'routes/performance/static.tsx'),
     route('server-loader', 'routes/performance/server-loader.tsx'),
     route('server-action', 'routes/performance/server-action.tsx'),
+    route('with-middleware', 'routes/performance/with-middleware.tsx'),
   ]),
 ] satisfies RouteConfig;

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/with-middleware.tsx

@@ -0,0 +1,38 @@
+import type { Route } from './+types/with-middleware';
+import type { User } from '../../context';
+import { userContext } from '../../context';
+import * as Sentry from '@sentry/react-router';
+
+async function getUser() {
+  await new Promise(resolve => setTimeout(resolve, 500));
+  return {
+    id: '1',
+    name: 'Carlos Gomez',
+  };
+}
+
+const authMiddleware: Route.MiddlewareFunction = async ({ request, context }, next) => {
+  Sentry.startSpan({ name: 'authMiddleware', op: 'middleware.auth' }, async () => {
+    const user: User = await getUser();
+    context.set(userContext, user);
+    await next();
+  });
+};
+
+export const middleware: Route.MiddlewareFunction[] = [authMiddleware];
+
+export const loader = async ({ context }: Route.LoaderArgs) => {
+  const user = context.get(userContext);
+  return { user };
+};
+
+export default function WithMiddlewarePage({ loaderData }: Route.ComponentProps) {
+  const { user } = loaderData;
+
+  return (
+    <div>
+      <h1>With Middleware Page</h1>
+      <p>User: {user?.name}</p>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/package.json

@@ -24,6 +24,7 @@
   },
   "scripts": {
     "build": "react-router build",
+    "test:build-latest": "pnpm install && pnpm add react-router@latest && pnpm add @react-router/node@latest && pnpm add @react-router/serve@latest && pnpm build",
     "dev": "NODE_OPTIONS='--import ./instrument.mjs' react-router dev",
     "start": "NODE_OPTIONS='--import ./instrument.mjs' react-router-serve ./build/server/index.js",
     "proxy": "node start-event-proxy.mjs",
@@ -54,5 +55,13 @@
   },
   "volta": {
     "extends": "../../package.json"
+  },
+  "sentryTest": {
+    "variants": [
+      {
+        "build-command": "pnpm test:build-latest",
+        "label": "react-router-7-framework (latest)"
+      }
+    ]
   }
 }

dev-packages/e2e-tests/test-applications/react-router-7-framework/react-router.config.ts

@@ -3,4 +3,7 @@ import type { Config } from '@react-router/dev/config';
 export default {
   ssr: true,
   prerender: ['/performance/static'],
+  future: {
+    v8_middleware: true,
+  },
 } satisfies Config;

dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/middleware.server.test.ts

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+import { APP_NAME } from '../constants';
+
+test.describe('server - middleware', () => {
+  test('should send middleware transaction on pageload', async ({ page }) => {
+    const serverTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === 'GET /performance/with-middleware';
+    });
+
+    const pageloadTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === '/performance/with-middleware';
+    });
+
+    const customMiddlewareTxPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === 'authMiddleware';
+    });
+
+    await page.goto(`/performance/with-middleware`);
+
+    const serverTx = await serverTxPromise;
+    const pageloadTx = await pageloadTxPromise;
+    const customMiddlewareTx = await customMiddlewareTxPromise;
+
+    const traceIds = {
+      server: serverTx?.contexts?.trace?.trace_id,
+      pageload: pageloadTx?.contexts?.trace?.trace_id,
+      customMiddleware: customMiddlewareTx?.contexts?.trace?.trace_id,
+    };
+
+    expect(pageloadTx).toBeDefined();
+    expect(customMiddlewareTx).toBeDefined();
+
+    // Assert that all transactions belong to the same trace
+    expect(traceIds.server).toBe(traceIds.pageload);
+    expect(traceIds.server).toBe(traceIds.customMiddleware);
+  });
+});