feat(tanstackstart-react): Auto-instrument request middleware

Author: nicohrubec

packages/tanstackstart-react/src/vite/autoInstrumentMiddleware.ts

@@ -6,8 +6,9 @@ type AutoInstrumentMiddlewareOptions = {
 };
 
 /**
- * A Vite plugin that automatically instruments TanStack Start middlewares
- * by wrapping `requestMiddleware` and `functionMiddleware` arrays in `createStart()`.
+ * A Vite plugin that automatically instruments TanStack Start middlewares:
+ * - `requestMiddleware` and `functionMiddleware` arrays in `createStart()`
+ * - `middleware` arrays in `createFileRoute()` route definitions
  */
 export function makeAutoInstrumentMiddlewarePlugin(options: AutoInstrumentMiddlewareOptions = {}): Plugin {
   const { enabled = true, debug = false } = options;
@@ -26,9 +27,11 @@ export function makeAutoInstrumentMiddlewarePlugin(options: AutoInstrumentMiddle
         return null;
       }
 
-      // Only wrap requestMiddleware and functionMiddleware in createStart()
-      // createStart() should always be in a file named start.ts
-      if (!id.includes('start') || !code.includes('createStart(')) {
+      // Detect file types that should be instrumented
+      const isStartFile = id.includes('start') && code.includes('createStart(');
+      const isRouteFile = code.includes('createFileRoute(') && /middleware\s*:\s*\[/.test(code);
+
+      if (!isStartFile && !isRouteFile) {
         return null;
       }
 
@@ -41,26 +44,53 @@ export function makeAutoInstrumentMiddlewarePlugin(options: AutoInstrumentMiddle
       let needsImport = false;
       const skippedMiddlewares: string[] = [];
 
-      transformed = transformed.replace(
-        /(requestMiddleware|functionMiddleware)\s*:\s*\[([^\]]*)\]/g,
-        (match: string, key: string, contents: string) => {
-          const objContents = arrayToObjectShorthand(contents);
-          if (objContents) {
-            needsImport = true;
-            if (debug) {
-              // eslint-disable-next-line no-console
-              console.log(`[Sentry] Auto-wrapping ${key} in ${id}`);
+      // Transform global middleware arrays in createStart() files
+      if (isStartFile) {
+        transformed = transformed.replace(
+          /(requestMiddleware|functionMiddleware)\s*:\s*\[([^\]]*)\]/g,
+          (match: string, key: string, contents: string) => {
+            const objContents = arrayToObjectShorthand(contents);
+            if (objContents) {
+              needsImport = true;
+              if (debug) {
+                // eslint-disable-next-line no-console
+                console.log(`[Sentry] Auto-wrapping ${key} in ${id}`);
+              }
+              return `${key}: wrapMiddlewaresWithSentry(${objContents})`;
+            }
+            // Track middlewares that couldn't be auto-wrapped
+            // Skip if we matched whitespace only
+            if (contents.trim()) {
+              skippedMiddlewares.push(key);
             }
-            return `${key}: wrapMiddlewaresWithSentry(${objContents})`;
-          }
-          // Track middlewares that couldn't be auto-wrapped
-          // Skip if we matched whitespace only
-          if (contents.trim()) {
-            skippedMiddlewares.push(key);
-          }
-          return match;
-        },
-      );
+            return match;
+          },
+        );
+      }
+
+      // Transform route middleware arrays in createFileRoute() files
+      if (isRouteFile) {
+        transformed = transformed.replace(
+          /(\s+)(middleware)\s*:\s*\[([^\]]*)\]/g,
+          (match: string, whitespace: string, key: string, contents: string) => {
+            const objContents = arrayToObjectShorthand(contents);
+            if (objContents) {
+              needsImport = true;
+              if (debug) {
+                // eslint-disable-next-line no-console
+                console.log(`[Sentry] Auto-wrapping route ${key} in ${id}`);
+              }
+              return `${whitespace}${key}: wrapMiddlewaresWithSentry(${objContents})`;
+            }
+            // Track middlewares that couldn't be auto-wrapped
+            // Skip if we matched whitespace only
+            if (contents.trim()) {
+              skippedMiddlewares.push(`route ${key}`);
+            }
+            return match;
+          },
+        );
+      }
 
       // Warn about middlewares that couldn't be auto-wrapped
       if (skippedMiddlewares.length > 0) {

packages/tanstackstart-react/test/vite/autoInstrumentMiddleware.test.ts

@@ -193,6 +193,235 @@ createStart(() => ({
   });
 });
 
+describe('route-level middleware auto-instrumentation', () => {
+  const routeFileWithMiddleware = `
+import { createFileRoute } from '@tanstack/react-router';
+import { loggingMiddleware } from '../middleware';
+
+export const Route = createFileRoute('/api/test')({
+  server: {
+    middleware: [loggingMiddleware],
+    handlers: {
+      GET: async () => ({ message: 'test' }),
+    },
+  },
+});
+`;
+
+  it('instruments route-level middleware arrays', () => {
+    const plugin = makeAutoInstrumentMiddlewarePlugin() as PluginWithTransform;
+    const result = plugin.transform(routeFileWithMiddleware, '/app/routes/api.test.ts');
+
+    expect(result).not.toBeNull();
+    expect(result!.code).toContain("import { wrapMiddlewaresWithSentry } from '@sentry/tanstackstart-react'");
+    expect(result!.code).toContain('middleware: wrapMiddlewaresWithSentry({ loggingMiddleware })');
+  });
+
+  it('instruments multiple middlewares in route file', () => {
+    const code = `
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/foo')({
+  server: {
+    middleware: [authMiddleware, loggingMiddleware],
+    handlers: { GET: () => ({}) },
+  },
+});
+`;
+    const plugin = makeAutoInstrumentMiddlewarePlugin() as PluginWithTransform;
+    const result = plugin.transform(code, '/app/routes/foo.ts');
+
+    expect(result).not.toBeNull();
+    expect(result!.code).toContain('middleware: wrapMiddlewaresWithSentry({ authMiddleware, loggingMiddleware })');
+  });
+
+  it('does not instrument files without createFileRoute', () => {
+    const code = `
+const middleware = [someMiddleware];
+export const foo = { middleware };
+`;
+    const plugin = makeAutoInstrumentMiddlewarePlugin() as PluginWithTransform;
+    const result = plugin.transform(code, '/app/utils.ts');
+
+    expect(result).toBeNull();
+  });
+
+  it('does not instrument route files without middleware arrays', () => {
+    const code = `
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/client')({
+  component: () => '<div>Client only</div>',
+});
+`;
+    const plugin = makeAutoInstrumentMiddlewarePlugin() as PluginWithTransform;
+    const result = plugin.transform(code, '/app/routes/client.tsx');
+
+    expect(result).toBeNull();
+  });
+
+  it('does not instrument empty middleware arrays in route files', () => {
+    const code = `
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/foo')({
+  server: {
+    middleware: [],
+    handlers: { GET: () => ({}) },
+  },
+});
+`;
+    const plugin = makeAutoInstrumentMiddlewarePlugin() as PluginWithTransform;
+    const result = plugin.transform(code, '/app/routes/foo.ts');
+
+    expect(result).toBeNull();
+  });
+});
+
+describe('handler-specific middleware auto-instrumentation', () => {
+  it('instruments handler-level middleware arrays', () => {
+    const code = `
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/foo')({
+  server: {
+    handlers: ({ createHandlers }) =>
+      createHandlers({
+        GET: {
+          middleware: [loggingMiddleware],
+          handler: () => ({ data: 'test' }),
+        },
+      }),
+  },
+});
+`;
+    const plugin = makeAutoInstrumentMiddlewarePlugin() as PluginWithTransform;
+    const result = plugin.transform(code, '/app/routes/foo.ts');
+
+    expect(result).not.toBeNull();
+    expect(result!.code).toContain('middleware: wrapMiddlewaresWithSentry({ loggingMiddleware })');
+  });
+
+  it('instruments multiple handler-level middleware arrays in same file', () => {
+    const code = `
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/foo')({
+  server: {
+    handlers: ({ createHandlers }) =>
+      createHandlers({
+        GET: {
+          middleware: [readMiddleware],
+          handler: () => ({}),
+        },
+        POST: {
+          middleware: [writeMiddleware, authMiddleware],
+          handler: () => ({}),
+        },
+      }),
+  },
+});
+`;
+    const plugin = makeAutoInstrumentMiddlewarePlugin() as PluginWithTransform;
+    const result = plugin.transform(code, '/app/routes/foo.ts');
+
+    expect(result).not.toBeNull();
+    expect(result!.code).toContain('middleware: wrapMiddlewaresWithSentry({ readMiddleware })');
+    expect(result!.code).toContain('middleware: wrapMiddlewaresWithSentry({ writeMiddleware, authMiddleware })');
+  });
+});
+
+describe('route middleware edge cases', () => {
+  it('does not wrap middleware containing function calls in route files', () => {
+    const code = `
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/foo')({
+  server: {
+    middleware: [createMiddleware()],
+    handlers: { GET: () => ({}) },
+  },
+});
+`;
+    const plugin = makeAutoInstrumentMiddlewarePlugin() as PluginWithTransform;
+    const result = plugin.transform(code, '/app/routes/foo.ts');
+
+    expect(result).toBeNull();
+  });
+
+  it('warns about route middleware that cannot be auto-wrapped', () => {
+    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    const code = `
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/foo')({
+  server: {
+    middleware: [getMiddleware()],
+    handlers: { GET: () => ({}) },
+  },
+});
+`;
+    const plugin = makeAutoInstrumentMiddlewarePlugin() as PluginWithTransform;
+    plugin.transform(code, '/app/routes/foo.ts');
+
+    expect(consoleWarnSpy).toHaveBeenCalledWith(expect.stringContaining('Could not auto-instrument route middleware'));
+
+    consoleWarnSpy.mockRestore();
+  });
+
+  it('handles route files with use server directive', () => {
+    const code = `'use server';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/foo')({
+  server: {
+    middleware: [authMiddleware],
+    handlers: { GET: () => ({}) },
+  },
+});
+`;
+    const plugin = makeAutoInstrumentMiddlewarePlugin() as PluginWithTransform;
+    const result = plugin.transform(code, '/app/routes/foo.ts');
+
+    expect(result).not.toBeNull();
+    expect(result!.code).toMatch(/^'use server';\s*\nimport \{ wrapMiddlewaresWithSentry \}/);
+  });
+
+  it('does not instrument route files that already use wrapMiddlewaresWithSentry', () => {
+    const code = `
+import { createFileRoute } from '@tanstack/react-router';
+import { wrapMiddlewaresWithSentry } from '@sentry/tanstackstart-react';
+export const Route = createFileRoute('/foo')({
+  server: {
+    middleware: wrapMiddlewaresWithSentry({ authMiddleware }),
+    handlers: { GET: () => ({}) },
+  },
+});
+`;
+    const plugin = makeAutoInstrumentMiddlewarePlugin() as PluginWithTransform;
+    const result = plugin.transform(code, '/app/routes/foo.ts');
+
+    expect(result).toBeNull();
+  });
+
+  it('handles both route-level and handler-level middleware in same file', () => {
+    const code = `
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/foo')({
+  server: {
+    middleware: [routeMiddleware],
+    handlers: ({ createHandlers }) =>
+      createHandlers({
+        GET: {
+          middleware: [getMiddleware],
+          handler: () => ({}),
+        },
+      }),
+  },
+});
+`;
+    const plugin = makeAutoInstrumentMiddlewarePlugin() as PluginWithTransform;
+    const result = plugin.transform(code, '/app/routes/foo.ts');
+
+    expect(result).not.toBeNull();
+    expect(result!.code).toContain('middleware: wrapMiddlewaresWithSentry({ routeMiddleware })');
+    expect(result!.code).toContain('middleware: wrapMiddlewaresWithSentry({ getMiddleware })');
+  });
+});
+
 describe('arrayToObjectShorthand', () => {
   it('converts single identifier', () => {
     expect(arrayToObjectShorthand('foo')).toBe('{ foo }');