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

CHANGELOG.md

@@ -4,6 +4,22 @@
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
+- **feat(tanstackstart-react): Auto-instrument global middleware in `sentryTanstackStart` Vite plugin ([#18884](https://github.com/getsentry/sentry-javascript/pull/18844))**
+
+  The `sentryTanstackStart` Vite plugin now automatically instruments `requestMiddleware` and `functionMiddleware` arrays in `createStart()`. This captures performance data without requiring manual wrapping.
+
+  Auto-instrumentation is enabled by default. To disable it:
+
+  ```ts
+  // vite.config.ts
+  sentryTanstackStart({
+    authToken: process.env.SENTRY_AUTH_TOKEN,
+    org: 'your-org',
+    project: 'your-project',
+    autoInstrumentMiddleware: false,
+  });
+  ```
+
 ## 10.35.0
 
 ### Important Changes

dev-packages/e2e-tests/test-applications/tanstackstart-react/src/middleware.ts

@@ -2,13 +2,15 @@ import { createMiddleware } from '@tanstack/react-start';
 import { wrapMiddlewaresWithSentry } from '@sentry/tanstackstart-react';
 
 // Global request middleware - runs on every request
-const globalRequestMiddleware = createMiddleware().server(async ({ next }) => {
+// NOTE: This is exported unwrapped to test auto-instrumentation via the Vite plugin
+export const globalRequestMiddleware = createMiddleware().server(async ({ next }) => {
   console.log('Global request middleware executed');
   return next();
 });
 
 // Global function middleware - runs on every server function
-const globalFunctionMiddleware = createMiddleware({ type: 'function' }).server(async ({ next }) => {
+// NOTE: This is exported unwrapped to test auto-instrumentation via the Vite plugin
+export const globalFunctionMiddleware = createMiddleware({ type: 'function' }).server(async ({ next }) => {
   console.log('Global function middleware executed');
   return next();
 });
@@ -37,17 +39,13 @@ const errorMiddleware = createMiddleware({ type: 'function' }).server(async () =
   throw new Error('Middleware Error Test');
 });
 
-// Manually wrap middlewares with Sentry
+// Manually wrap middlewares with Sentry (for middlewares that won't be auto-instrumented)
 export const [
-  wrappedGlobalRequestMiddleware,
-  wrappedGlobalFunctionMiddleware,
   wrappedServerFnMiddleware,
   wrappedServerRouteRequestMiddleware,
   wrappedEarlyReturnMiddleware,
   wrappedErrorMiddleware,
 ] = wrapMiddlewaresWithSentry({
-  globalRequestMiddleware,
-  globalFunctionMiddleware,
   serverFnMiddleware,
   serverRouteRequestMiddleware,
   earlyReturnMiddleware,

dev-packages/e2e-tests/test-applications/tanstackstart-react/src/start.ts

@@ -1,9 +1,10 @@
 import { createStart } from '@tanstack/react-start';
-import { wrappedGlobalRequestMiddleware, wrappedGlobalFunctionMiddleware } from './middleware';
+// NOTE: These are NOT wrapped - auto-instrumentation via the Vite plugin will wrap them
+import { globalRequestMiddleware, globalFunctionMiddleware } from './middleware';
 
 export const startInstance = createStart(() => {
   return {
-    requestMiddleware: [wrappedGlobalRequestMiddleware],
-    functionMiddleware: [wrappedGlobalFunctionMiddleware],
+    requestMiddleware: [globalRequestMiddleware],
+    functionMiddleware: [globalFunctionMiddleware],
   };
 });

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

@@ -0,0 +1,117 @@
+import type { Plugin } from 'vite';
+
+type AutoInstrumentMiddlewareOptions = {
+  enabled?: boolean;
+  debug?: boolean;
+};
+
+/**
+ * A Vite plugin that automatically instruments TanStack Start middlewares
+ * by wrapping `requestMiddleware` and `functionMiddleware` arrays in `createStart()`.
+ */
+export function makeAutoInstrumentMiddlewarePlugin(options: AutoInstrumentMiddlewareOptions = {}): Plugin {
+  const { enabled = true, debug = false } = options;
+
+  return {
+    name: 'sentry-tanstack-middleware-auto-instrument',
+    enforce: 'pre',
+
+    transform(code, id) {
+      if (!enabled) {
+        return null;
+      }
+
+      // Skip if not a TS/JS file
+      if (!/\.(ts|tsx|js|jsx|mjs|mts)$/.test(id)) {
+        return null;
+      }
+
+      // Only wrap requestMiddleware and functionMiddleware in createStart()
+      if (!code.includes('createStart(')) {
+        return null;
+      }
+
+      // Skip if the user already did some manual wrapping
+      if (code.includes('wrapMiddlewaresWithSentry')) {
+        return null;
+      }
+
+      let transformed = code;
+      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}`);
+            }
+            return `${key}: wrapMiddlewaresWithSentry(${objContents})`;
+          }
+          // Track middlewares that couldn't be auto-wrapped
+          if (contents.trim()) {
+            skippedMiddlewares.push(key);
+          }
+          return match;
+        },
+      );
+
+      // Warn about middlewares that couldn't be auto-wrapped
+      if (skippedMiddlewares.length > 0) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `[Sentry] Could not auto-instrument ${skippedMiddlewares.join(' and ')} in ${id}. ` +
+            'To instrument these middlewares, use wrapMiddlewaresWithSentry() manually. ',
+        );
+      }
+
+      // We didn't wrap any middlewares, so we don't need to import the wrapMiddlewaresWithSentry function
+      if (!needsImport) {
+        return null;
+      }
+
+      const sentryImport = "import { wrapMiddlewaresWithSentry } from '@sentry/tanstackstart-react';\n";
+
+      // Check for 'use server' or 'use client' directives, these need to be before any imports
+      const directiveMatch = transformed.match(/^(['"])use (client|server)\1;?\s*\n?/);
+      if (directiveMatch) {
+        // Insert import after the directive
+        const directive = directiveMatch[0];
+        transformed = directive + sentryImport + transformed.slice(directive.length);
+      } else {
+        transformed = sentryImport + transformed;
+      }
+
+      return { code: transformed, map: null };
+    },
+  };
+}
+
+/**
+ * Convert array contents to object shorthand syntax.
+ * e.g., "foo, bar, baz" → "{ foo, bar, baz }"
+ *
+ * Returns null if contents contain non-identifier expressions (function calls, etc.)
+ * which cannot be converted to object shorthand.
+ */
+export function arrayToObjectShorthand(contents: string): string | null {
+  const items = contents
+    .split(',')
+    .map(s => s.trim())
+    .filter(Boolean);
+
+  // Only convert if all items are valid identifiers (no complex expressions)
+  const allIdentifiers = items.every(item => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(item));
+  if (!allIdentifiers || items.length === 0) {
+    return null;
+  }
+
+  // Deduplicate to avoid invalid syntax like { foo, foo }
+  const uniqueItems = [...new Set(items)];
+
+  return `{ ${uniqueItems.join(', ')} }`;
+}

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

@@ -1 +1,2 @@
 export { sentryTanstackStart } from './sentryTanstackStart';
+export type { SentryTanstackStartOptions } from './sentryTanstackStart';

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

@@ -1,7 +1,26 @@
 import type { BuildTimeOptionsBase } from '@sentry/core';
 import type { Plugin } from 'vite';
+import { makeAutoInstrumentMiddlewarePlugin } from './autoInstrumentMiddleware';
 import { makeAddSentryVitePlugin, makeEnableSourceMapsVitePlugin } from './sourceMaps';
 
+/**
+ * Build-time options for the Sentry TanStack Start SDK.
+ */
+export interface SentryTanstackStartOptions extends BuildTimeOptionsBase {
+  /**
+   * If this flag is `true`, the Sentry plugins will automatically instrument TanStack Start middlewares.
+   *
+   * This wraps global middlewares (`requestMiddleware` and `functionMiddleware`) in `createStart()` with Sentry
+   * instrumentation to capture performance data.
+   *
+   * Set to `false` to disable automatic middleware instrumentation if you prefer to wrap middlewares manually
+   * using `wrapMiddlewaresWithSentry`.
+   *
+   * @default true
+   */
+  autoInstrumentMiddleware?: boolean;
+}
+
 /**
  * Vite plugins for the Sentry TanStack Start SDK.
  *
@@ -26,14 +45,21 @@ import { makeAddSentryVitePlugin, makeEnableSourceMapsVitePlugin } from './sourc
  * @param options - Options to configure the Sentry Vite plugins
  * @returns An array of Vite plugins
  */
-export function sentryTanstackStart(options: BuildTimeOptionsBase = {}): Plugin[] {
-  // Only add plugins in production builds
+export function sentryTanstackStart(options: SentryTanstackStartOptions = {}): Plugin[] {
+  // only add plugins in production builds
   if (process.env.NODE_ENV === 'development') {
     return [];
   }
 
   const plugins: Plugin[] = [...makeAddSentryVitePlugin(options)];
 
+  // middleware auto-instrumentation
+  const autoInstrumentMiddleware = options.autoInstrumentMiddleware !== false;
+  if (autoInstrumentMiddleware) {
+    plugins.push(makeAutoInstrumentMiddlewarePlugin({ enabled: true, debug: options.debug }));
+  }
+
+  // source maps
   const sourceMapsDisabled = options.sourcemaps?.disable === true || options.sourcemaps?.disable === 'disable-upload';
   if (!sourceMapsDisabled) {
     plugins.push(...makeEnableSourceMapsVitePlugin(options));