Middleware does not catch error thrown by serverFn

[esoteloferry]

Which project does this relate to?

Start

Describe the bug

Hi ,

First of all, Thanks for the project!.

I have an issue with middleware catching errors thrown by server fn. I have a server function that uses a middleware. That middleware try catch the next() to hide possible leak of information thrown by unhandled errors.
But for my surprise, the thrown error is not caught.

Note: I also tried WITH and WITHOUT await (...return await next()....) .Some examples in docs, show return next without awaiting.

export const Route = createFileRoute("/")({
	component: App,
	loader: async () => getName(),
});

const middleware = createMiddleware().server(async ({ next }) => {
	try {
		return await next();
	} catch (error) {
		console.error("Middleware caught an error:", error);
		return new Response("An error occurred while processing your request.", {
			status: 500,
		});
	}
});

const getName = createServerFn()
	.middleware([middleware])
	.handler(async () => {
		throw new Error("This message should be caught by middleware");
		// return "TanStack Start";
	});

function App() {
	const name = Route.useLoaderData();
	console.log("Name is ", name);
return <div>hi</div>
}

Your Example Website or App

https://github.com/esoteloferry/tanstackstart-bug-catch-middleware

Steps to Reproduce the Bug or Issue

1. Git clone minimal reproduction repro https://github.com/esoteloferry/tanstackstart-bug-catch-middleware
2. npm i
3. npm run dev
4. check localhost:3000

Expected behavior

I would suspect error message would be "An error occurred while processing your request." , which is the error message in the catch of middleware.

Screenshots or Videos

Platform

• Router / Start Version:v1.149.3
• OS: macOS
• Browser:Chrome
• Browser Version: 143.0.7499.193
• Bundler: vite
• Bundler Version: 7.3.1

Additional context

This used to work, I think in v1.143 . Not sure.

[willhoney7]

The example you posted does not seem to be using a recent version. According to the package.json, it's using "@tanstack/react-start": "^1.132.0",

I think if you update to a more recent version you won't see this issue anymore.

EDIT: I've tried 1.149.3 locally and I can confirm it does have an issue. The point stands that the reproduction you posted is pointing to an old version, but there's definitely some weirdness around capturing errors in middleware in the latest version!

[esoteloferry]

Hi @willhoney7 , thanks for checking.
Yes, I git clone basic example , the package.json says ^1.132.0 but it resolves to latest version 1.149.3 , I attach picture of package-lock

[willhoney7]

@esoteloferry you are right! apologies for the distraction. I am definitely seeing this issue in 1.149.3 as well.

[liaoyinglong]

I also ran into the same issue, and I solved it using the following approach:

try {
    const r = await ctx.next();
    if ('error' in r && r.error) {
      throw r.error;
    }
    return r;
  } catch (error: any) {
    console.error("Middleware caught an error:", error);
    return new Response("An error occurred while processing your request.", {
      status: 500,
    });
  }

This way, the middleware explicitly checks for the error in the response and catches it properly.

[esoteloferry]

Thanks for the workaround @liaoyinglong

[jjcantu]

@esoteloferry The PR should fix this. Hopefully it gets merged soon as this is a simple fix.