Skip to content

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

Open
@andrejilderda

Description

@andrejilderda

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

Screen.Recording.2024-06-26.at.15.15.14.mov

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions