Errors in `stringifyParams` are not caught by `ErrorComponent` and break app completely on reload
Describe the bug
As described in the title there are two issues I've faced when an error is thrown inside stringifyParams.
- The
defaultErrorComponentis rendered in stead of the providederrorComponenton the route or parent route. - The app breaks completely (= blank page → not displaying
ErrorComponent) when landing on the route that throws an error instringifyParams)
Your Example Website or App
https://stackblitz.com/edit/github-pk92xt?file=src%2Froutes%2Findex.tsx,src%2Froutes%2Fnested%2Findex.tsx
Steps to Reproduce the Bug or Issue
- Go to this Stackblitz
- Navigate to the "Nested about"-page to see the app break.
- Now refresh the preview window and notice that the entire app is blank (even the content that lives outside the RouterProvider).
Expected behavior
- On 2. I expected to see the content of the errorComponent defined in
nested/index.tsx,nested/route.tsxorindex.tsx - On 3. I expected to see the same errorComponent after refreshing the page
Screenshots or Videos
https://github.com/TanStack/router/assets/487182/0c965bbb-2b38-49f7-a69e-3f6b258c516a
Platform
- OS: [e.g. macOS]
- Browser: Seen in Edge 124, Safari 17.3 & Firefox 127
Additional context
If you need more info let me know!
There is an issue in your reproduction. Your reproduction doesn't use any path parameters.
I've gone ahead and refactored it so that it does: https://stackblitz.com/edit/github-pk92xt-ve9tip
With this refactor, the correct errorComponent is shown based on where the error was thrown. For example, if I'm on /posts/ and the route /posts/123 throws an error, then if I render a <Link> on /posts/ to /posts/123, I should expect an error on the /posts/ route since that is where the Link was called.
🚨 What's still broken, is that if I directly navigate to /posts/123 and then reload the page (remaining on /posts/123), the page goes completely blank. Neither the outer content nor the errorComponents defined along the route-tree are rendered on the screen.
Thanks for looking into this and sorry about that @SeanCassiere . 🙈 Hopefully the fixed reproduction helps you fix the remaining bug.