[Docs]: Using an Error Boundary in Declarative Move

[mark-monteiro]

Describe what's incorrect/missing in the documentation

I am using react-router in 'declarative mode' and I would like to wrap all of my routes in an error boundary, but I can't find any documentation on how to do this.

I am using a layout route, so I tried wrapping the <Outlet/> component in my error boundary. This partially works, but the error stays in place when navigating to a different page that does not have an error. I need the user to be able to navigate away from the page with the error.

I can see that the <Route/> component has properties defined, errorElement, ErrorBoundary and hasErrorBoundary, but these are undocumented and do not appear to do anything based on my testing.

[brookslybrand]

I would use react-error-boundary for error boundaries in declarative mode. React Router doesn't have anything special for error handling in declarative mode since React already has you covered here.

I can see that the component has properties defined

What component are you referring to here?

[github-actions]

This issue has been automatically closed because we haven't received a response from the original author 🙈. This automation helps keep the issue tracker clean from issues that aren't actionable. Please reach out if you have more information for us! 🙂

[mark-monteiro]

Sorry, for the super slow response. I was missing backticks around <Route/> so it didn't render in my original post. I've fixed it now.

I understand how to render an error boundary, but it's not clear to me where it the error boundary should go. Wrapping the error boundary outside the <Outlet/> component means you cannot clear the error by navigating to a new page.

The best solution I was able to find was to put an error boundry at the top level of every page rendered by the router. This works, but requires a lot of duplication and is easy to miss when adding new routes/pages.

It would be great if we could specify the error boundary component to use at the router level instead. I was hoping that the undocumented errorElement, ErrorBoundary and hasErrorBoundary properties on the component are meant to do this.

[danieljvdm]

I'm also curious as to what the recommended setup is here. Wrapping the router with a boundary doesn't do anything:

<ErrorBoundary
  fallbackRender={({ error }) => <div>Error: {error.message}</div>}
>
  <RouterProvider router={router} />
</ErrorBoundary>

[mark-monteiro]

@brookslybrand Would it be possible to re-open this?