Throwing errors in beforeload

[Zefty]

Which project does this relate to?

Router

Describe the bug

Let say I have a protected route createFileRoute("/(app)/_authed") where I will throw an error

e.g. if (!authSession) { throw new Error("Unauthorized", { cause: 401 }); }

Right now this is working only client-side. The error message and cause is caught and displayed by the defaultErrorComponent.

However if i do a full page refresh and fetch from the server with SSR I get a brief flash of the "401 Unauthorised" but then it seems like after the page hydrates, it then shows "Undefined Unauthorised" as the cause from the error is gone.

Im suspecting this might be related to the GET http://localhost:3000/my-todos 500 (Internal Server Error) call.

Your Example Website or App

https://github.com/Zefty/tanstack-playground

Steps to Reproduce the Bug or Issue

1. Clone https://github.com/Zefty/tanstack-playground
2. Run pnpm dev
3. Navigate to http://localhost:3000/my-todos which should be an authed route. This should show "401 Unauthorised"
4. Click refresh button of browser. This should show "undefined Unauthorized" which is wrong as there as a flash of "401 Unauthorised"

Expected behavior

Both client-side navigation and ssr should show the same page

"401 Unauthorised"

Screenshots or Videos

No response

Platform

• Router / Start Version: [e.g. 1.121.0]
• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Browser Version: [e.g. 91.1]
• Bundler: [e.g. vite]
• Bundler Version: [e.g. 7.0.0]

Additional context

No response

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

🔗 Related PRs

#5518 - Solid hydration [merged]
#5541 - fix: set statusCode to 500 if error occurs [merged]
#5647 - test(solid-start): fix dev server for suspense transition [merged]
#5686 - fix(router-core): Catch errors thrown during hydrate [merged]
#5964 - fix: no remounting with ssr:false [merged]

👤 Suggested Assignees

• schiller-manuel
• brenelz
• birkskyum
• roduyemi

---

🧪 Issue enrichment is currently in early access.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

[leonardo2204]

I'm having the same problem, and it's even worse, because I'm throwing from route, and the index.tsx is stuck in pending state

[schiller-manuel]

the default Error serializer only serializes message, you are relying in cause which is not serialized. if you need this, you need to add a custom serialization adapter