Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork 1.8k
feat(tanstackstart-react): Auto-instrument request middleware#18989
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
nicohrubec
merged 10 commits into
develop
from
nh/automatic-request-middleware-instrumentationJan 28, 2026
Uh oh!
There was an error while loading. Please reload this page.
Merged
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
b877f51
feat(tanstackstart-react): Auto-instrument request middleware
nicohrubec 40a7ba4
refactor
nicohrubec 3660c72
update e2e tests
nicohrubec 9a8026b
refactor
nicohrubec e985b3e
yarn fix
nicohrubec f7f4c22
refactor
nicohrubec 092858f
isStartFile XOR isRouteFile
nicohrubec ce8dbc7
guard for double import
nicohrubec 330d7f8
add double wrapping test
nicohrubec b262eaa
Revert "add double wrapping test"
nicohrubec File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Uh oh!
There was an error while loading. Please reload this page.
Jump to
Jump to file
Failed to load files.
Loading
Uh oh!
There was an error while loading. Please reload this page.
Diff view
Diff view
There are no files selected for viewing
21 changes: 8 additions & 13 deletions
21 dev-packages/e2e-tests/test-applications/tanstackstart-react/src/middleware.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4 ...ackages/e2e-tests/test-applications/tanstackstart-react/src/routes/api.test-middleware.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
136 changes: 100 additions & 36 deletions
136 packages/tanstackstart-react/src/vite/autoInstrumentMiddleware.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -5,9 +5,58 @@ type AutoInstrumentMiddlewareOptions = { | ||
| debug?: boolean; | ||
| }; | ||
| type WrapResult = { | ||
| code: string; | ||
| didWrap: boolean; | ||
| skipped: string[]; | ||
| }; | ||
| /** | ||
| * Core function that wraps middleware arrays matching the given regex. | ||
| */ | ||
| function wrapMiddlewareArrays(code: string, id: string, debug: boolean, regex: RegExp): WrapResult { | ||
| const skipped: string[] = []; | ||
| let didWrap = false; | ||
| const transformed = code.replace(regex, (match: string, key: string, contents: string) => { | ||
| const objContents = arrayToObjectShorthand(contents); | ||
| if (objContents) { | ||
| didWrap = 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()) { | ||
| skipped.push(key); | ||
| } | ||
| return match; | ||
| }); | ||
| return { code: transformed, didWrap, skipped }; | ||
| } | ||
| /** | ||
| * Wraps global middleware arrays (requestMiddleware, functionMiddleware) in createStart() files. | ||
| */ | ||
| export function wrapGlobalMiddleware(code: string, id: string, debug: boolean): WrapResult { | ||
| return wrapMiddlewareArrays(code, id, debug, /(requestMiddleware|functionMiddleware)\s*:\s*\[([^\]]*)\]/g); | ||
| } | ||
| /** | ||
| * Wraps route middleware arrays in createFileRoute() files. | ||
| */ | ||
| export function wrapRouteMiddleware(code: string, id: string, debug: boolean): WrapResult { | ||
| return wrapMiddlewareArrays(code, id, debug, /(middleware)\s*:\s*\[([^\]]*)\]/g); | ||
| } | ||
| /** | ||
| * 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 +75,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 +92,26 @@ 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}`); | ||
| } | ||
| 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; | ||
| }, | ||
| ); | ||
| switch (true) { | ||
| // global middleware | ||
| case isStartFile: { | ||
| const result = wrapGlobalMiddleware(transformed, id, debug); | ||
| transformed = result.code; | ||
| needsImport = needsImport || result.didWrap; | ||
| skippedMiddlewares.push(...result.skipped); | ||
| break; | ||
| } | ||
| // route middleware | ||
| case isRouteFile: { | ||
| const result = wrapRouteMiddleware(transformed, id, debug); | ||
| transformed = result.code; | ||
| needsImport = needsImport || result.didWrap; | ||
| skippedMiddlewares.push(...result.skipped); | ||
| break; | ||
| } | ||
| default: | ||
| break; | ||
| } | ||
| // Warn about middlewares that couldn't be auto-wrapped | ||
| if (skippedMiddlewares.length > 0) { | ||
| @@ -76,17 +127,7 @@ export function makeAutoInstrumentMiddlewarePlugin(options: AutoInstrumentMiddle | ||
| 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; | ||
| } | ||
| transformed = addSentryImport(transformed); | ||
| return { code: transformed, map: null }; | ||
| }, | ||
| @@ -117,3 +158,26 @@ export function arrayToObjectShorthand(contents: string): string | null { | ||
| return `{ ${uniqueItems.join(', ')} }`; | ||
| } | ||
| /** | ||
| * Adds the wrapMiddlewaresWithSentry import to the code. | ||
| * Handles 'use client' and 'use server' directives by inserting the import after them. | ||
| */ | ||
| export function addSentryImport(code: string): string { | ||
nicohrubec marked this conversation as resolved.
Uh oh!There was an error while loading. Please reload this page. | ||
| const sentryImport = "import { wrapMiddlewaresWithSentry } from '@sentry/tanstackstart-react';\n"; | ||
| // Don't add the import if it already exists | ||
| if (code.includes(sentryImport.trimEnd())) { | ||
| return code; | ||
| } | ||
| // Check for 'use server' or 'use client' directives, these need to be before any imports | ||
| const directiveMatch = code.match(/^(['"])use (client|server)\1;?\s*\n?/); | ||
| if (!directiveMatch) { | ||
| return sentryImport + code; | ||
| } | ||
| const directive = directiveMatch[0]; | ||
| return directive + sentryImport + code.slice(directive.length); | ||
| } | ||
Oops, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
Oops, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.