feat(react-router): Capture server build in dev mode for middleware names

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

@@ -31,9 +31,10 @@
     "typecheck": "react-router typegen && tsc",
     "clean": "npx rimraf node_modules pnpm-lock.yaml",
     "test:build": "pnpm install && pnpm build",
-    "test:assert": "pnpm test:ts && pnpm test:playwright",
+    "test:assert": "pnpm test:ts && pnpm test:prod && pnpm test:dev",
     "test:ts": "pnpm typecheck",
-    "test:playwright": "playwright test"
+    "test:prod": "TEST_ENV=production playwright test",
+    "test:dev": "TEST_ENV=development playwright test"
   },
   "eslintConfig": {
     "extends": [

dev-packages/e2e-tests/test-applications/react-router-7-framework-instrumentation/playwright.config.mjs

@@ -1,9 +1,15 @@
 import { getPlaywrightConfig } from '@sentry-internal/test-utils';
 import { fileURLToPath } from 'url';
 
+// Run the same tests against both the production server (`react-router-serve`) and the dev server
+// (`react-router dev`), selected via TEST_ENV. This ensures server build capture (used for middleware
+// name resolution) works in both modes. `react-router dev` runs the Vite dev server, which ignores
+// PORT, so the port is passed on the command instead.
+const startCommand = process.env.TEST_ENV === 'development' ? `pnpm dev --port 3030` : `PORT=3030 pnpm start`;
+
 const config = getPlaywrightConfig(
   {
-    startCommand: `PORT=3030 pnpm start`,
+    startCommand,
     port: 3030,
   },
   // Boot Redis before the tests run, outside the webServer startup-timeout window.

dev-packages/e2e-tests/test-applications/react-router-7-framework-instrumentation/tests/errors/errors.server.test.ts

@@ -91,7 +91,13 @@ test.describe('server - instrumentation API error capture', () => {
     expect(error.contexts?.trace?.trace_id).toBe(transaction.contexts?.trace?.trace_id);
   });
 
+  // Skipped in dev: the action error is sometimes captured via the client instrumentation path
+  // (mechanism `react_router.client_action`, client-side transaction name) rather than the server
+  // `react_router.action` / `POST ...` asserted here, making this flaky in dev. Server-mechanism
+  // error capture in dev is still covered by the loader/middleware error tests above.
   test('should capture action errors with instrumentation API mechanism', async ({ page }) => {
+    test.skip(process.env.TEST_ENV === 'development', 'Action error capture races the client path in dev');
+
     const errorPromise = waitForError(APP_NAME, async errorEvent => {
       return errorEvent.exception?.values?.[0]?.value === 'Action error for testing';
     });

dev-packages/e2e-tests/test-applications/react-router-7-framework-instrumentation/tests/performance/navigation.client.test.ts

@@ -219,9 +219,10 @@ test.describe('client - hybrid navigation (instrumentation API span + legacy par
             'sentry.origin': 'auto.navigation.react_router.instrumentation_api',
             'navigation.type': 'router.back',
             'url.template': '/performance',
-            // react-router-serve 301-redirects the bare index route to a trailing slash
-            'url.path': '/performance/',
-            'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/performance\/$/),
+            // react-router-serve 301-redirects the bare index route to a trailing slash in prod, while
+            // the dev server serves it without - accept both.
+            'url.path': expect.stringMatching(/^\/performance\/?$/),
+            'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/performance\/?$/),
           },
         },
       },

dev-packages/e2e-tests/test-applications/react-router-7-framework-instrumentation/tests/performance/pageload.client.test.ts

@@ -20,9 +20,10 @@ test.describe('client - instrumentation API pageload', () => {
           op: 'pageload',
           data: {
             'url.template': '/performance',
-            // react-router-serve 301-redirects the bare index route to a trailing slash
-            'url.path': '/performance/',
-            'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/performance\/$/),
+            // react-router-serve 301-redirects the bare index route to a trailing slash in prod, while
+            // the dev server serves it without - accept both.
+            'url.path': expect.stringMatching(/^\/performance\/?$/),
+            'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/performance\/?$/),
           },
         },
       },

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

@@ -152,7 +152,14 @@ test.describe('server - instrumentation API performance', () => {
     });
   });
 
+  // Prod-only: the dev server (Vite) serves source modules (`/@vite/client`, `/app/*`) as separate
+  // requests, each producing its own http.server transaction, so "exactly one" only holds in prod.
   test('sends exactly one http.server transaction per request (no double-instrumentation)', async ({ page }) => {
+    test.skip(
+      process.env.TEST_ENV === 'development',
+      'Dev server emits extra http.server transactions for module requests',
+    );
+
     const httpServerTransactions: Array<string | undefined> = [];
     void waitForTransaction(APP_NAME, async transactionEvent => {
       if (transactionEvent.contexts?.trace?.op === 'http.server') {

packages/react-router/src/vite/makeServerBuildCapturePlugin.ts

@@ -7,21 +7,15 @@ const SERVER_BUILD_MODULE_ID = 'virtual:react-router/server-build';
  * A Sentry plugin for React Router to capture the server build for middleware name resolution.
  */
 export function makeServerBuildCapturePlugin(): Plugin {
-  let isSsrBuild = false;
-
   return {
     name: 'sentry-react-router-server-build-capture',
     enforce: 'post',
 
-    configResolved(config) {
-      isSsrBuild = !!config.build.ssr;
-    },
-
-    transform(code, id) {
-      // TODO: This only captures the server build for production SSR builds. Dev mode
-      // (`react-router dev`) is not covered yet, so middleware names may be missing there - this
-      // should be handled for dev too.
-      if (!isSsrBuild) {
+    transform(code, id, options) {
+      // Only inject into the server build module when transforming for the SSR environment.
+      // `options.ssr` is set for the SSR module in both dev (`react-router dev`) and production
+      // builds, so this covers both - unlike `config.build.ssr`, which is only true during a build.
+      if (!options?.ssr) {
         return null;
       }
 

packages/react-router/test/vite/makeServerBuildCapturePlugin.test.ts

@@ -11,9 +11,16 @@ describe('makeServerBuildCapturePlugin', () => {
     expect(plugin.enforce).toBe('post');
   });
 
-  it('should return null for non-SSR builds', () => {
+  it('should return null for non-SSR transforms', () => {
+    const plugin = makeServerBuildCapturePlugin();
+
+    const result = (plugin as any).transform(SERVER_BUILD_CODE, SERVER_BUILD_MODULE_ID, { ssr: false });
+
+    expect(result).toBeNull();
+  });
+
+  it('should return null when no options are passed', () => {
     const plugin = makeServerBuildCapturePlugin();
-    (plugin as any).configResolved({ build: { ssr: false } });
 
     const result = (plugin as any).transform(SERVER_BUILD_CODE, SERVER_BUILD_MODULE_ID);
 
@@ -22,18 +29,18 @@ describe('makeServerBuildCapturePlugin', () => {
 
   it('should return null for non-server-build modules in SSR mode', () => {
     const plugin = makeServerBuildCapturePlugin();
-    (plugin as any).configResolved({ build: { ssr: true } });
 
-    const result = (plugin as any).transform('export function helper() {}', 'src/utils.ts');
+    const result = (plugin as any).transform('export function helper() {}', 'src/utils.ts', { ssr: true });
 
     expect(result).toBeNull();
   });
 
-  it('should inject capture snippet into the server build module in SSR mode', () => {
+  // `options.ssr` is true for the SSR module in both dev (`react-router dev`) and production builds,
+  // so a single assertion covers both cases - the plugin cannot (and need not) distinguish them.
+  it('should inject capture snippet into the server build module for SSR transforms', () => {
     const plugin = makeServerBuildCapturePlugin();
-    (plugin as any).configResolved({ build: { ssr: true } });
 
-    const result = (plugin as any).transform(SERVER_BUILD_CODE, SERVER_BUILD_MODULE_ID);
+    const result = (plugin as any).transform(SERVER_BUILD_CODE, SERVER_BUILD_MODULE_ID, { ssr: true });
 
     expect(result).not.toBeNull();
     expect(result.code).toContain(SERVER_BUILD_CODE);