router icon indicating copy to clipboard operation
router copied to clipboard

Errors in `stringifyParams` are not caught by `ErrorComponent` and break app completely on reload

Open andrejilderda opened this issue 1 year ago • 2 comments

Describe the bug

As described in the title there are two issues I've faced when an error is thrown inside stringifyParams.

  • The defaultErrorComponent is rendered in stead of the provided errorComponent on the route or parent route.
  • The app breaks completely (= blank page → not displaying ErrorComponent) when landing on the route that throws an error in stringifyParams)

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

  1. Go to this Stackblitz
  2. Navigate to the "Nested about"-page to see the app break.
  3. 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.tsx or index.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!

andrejilderda avatar Jun 26 '24 13:06 andrejilderda

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.

SeanCassiere avatar Jul 04 '24 20:07 SeanCassiere

Thanks for looking into this and sorry about that @SeanCassiere . 🙈 Hopefully the fixed reproduction helps you fix the remaining bug.

andrejilderda avatar Jul 04 '24 20:07 andrejilderda