From 1fab57997a2ee09fa1c1c86e32bda80f2678a3d2 Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Thu, 25 Sep 2025 15:02:28 +0200 Subject: [PATCH 1/3] middleware test --- .../react-router-7-framework/app/context.ts | 8 ++++ .../react-router-7-framework/app/routes.ts | 1 + .../routes/performance/with-middleware.tsx | 38 ++++++++++++++++++ .../react-router-7-framework/package.json | 9 +++++ .../react-router.config.ts | 3 ++ .../performance/middleware.server.test.ts | 39 +++++++++++++++++++ 6 files changed, 98 insertions(+) create mode 100644 dev-packages/e2e-tests/test-applications/react-router-7-framework/app/context.ts create mode 100644 dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/with-middleware.tsx create mode 100644 dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/middleware.server.test.ts diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework/app/context.ts b/dev-packages/e2e-tests/test-applications/react-router-7-framework/app/context.ts new file mode 100644 index 000000000000..a15189e5bed8 --- /dev/null +++ b/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(null); diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes.ts b/dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes.ts index b412893def52..731081b54f52 100644 --- a/dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes.ts +++ b/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; diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/with-middleware.tsx b/dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/with-middleware.tsx new file mode 100644 index 000000000000..c86f78e17164 --- /dev/null +++ b/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 ( +
+

With Middleware Page

+

User: {user?.name}

+
+ ); +} diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework/package.json b/dev-packages/e2e-tests/test-applications/react-router-7-framework/package.json index a6bd5459ae2c..1ec3da8da47a 100644 --- a/dev-packages/e2e-tests/test-applications/react-router-7-framework/package.json +++ b/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)" + } + ] } } diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework/react-router.config.ts b/dev-packages/e2e-tests/test-applications/react-router-7-framework/react-router.config.ts index bb1f96469dd2..72f2eef3b0f5 100644 --- a/dev-packages/e2e-tests/test-applications/react-router-7-framework/react-router.config.ts +++ b/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; diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/middleware.server.test.ts b/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/middleware.server.test.ts new file mode 100644 index 000000000000..16fc51f6a446 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/middleware.server.test.ts @@ -0,0 +1,39 @@ +import { expect, test } from '@playwright/test'; +import { waitForTransaction } from '@sentry-internal/test-utils'; +import { APP_NAME } from '../constants'; + +test.describe('server - middleware', () => { + test.only('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(); + expect(pageloadTx).toBeDefined(); + + // Assert that all transactions belong to the same trace + expect(traceIds.server).toBe(traceIds.pageload); + expect(traceIds.server).toBe(traceIds.customMiddleware); + }); +}); From 09f54b17a2660f3352d9d05b7d1dc98da8d17fa0 Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Thu, 25 Sep 2025 15:16:51 +0200 Subject: [PATCH 2/3] :^) --- .../tests/performance/middleware.server.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/middleware.server.test.ts b/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/middleware.server.test.ts index 16fc51f6a446..d0b849fb248f 100644 --- a/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/middleware.server.test.ts +++ b/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/middleware.server.test.ts @@ -3,7 +3,7 @@ import { waitForTransaction } from '@sentry-internal/test-utils'; import { APP_NAME } from '../constants'; test.describe('server - middleware', () => { - test.only('should send middleware transaction on pageload', async ({ page }) => { + test('should send middleware transaction on pageload', async ({ page }) => { const serverTxPromise = waitForTransaction(APP_NAME, async transactionEvent => { return transactionEvent.transaction === 'GET /performance/with-middleware'; }); From b22f770b9c92acd40a6163e7e75828d4ea79d577 Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Thu, 25 Sep 2025 16:07:28 +0200 Subject: [PATCH 3/3] Update dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/middleware.server.test.ts Co-authored-by: Andrei <168741329+andreiborza@users.noreply.github.com> --- .../tests/performance/middleware.server.test.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/middleware.server.test.ts b/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/middleware.server.test.ts index d0b849fb248f..dbce05350ad9 100644 --- a/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/middleware.server.test.ts +++ b/dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/middleware.server.test.ts @@ -30,7 +30,6 @@ test.describe('server - middleware', () => { expect(pageloadTx).toBeDefined(); expect(customMiddlewareTx).toBeDefined(); - expect(pageloadTx).toBeDefined(); // Assert that all transactions belong to the same trace expect(traceIds.server).toBe(traceIds.pageload);