Closed AydinTheFirst closed 2 months ago
@AydinTheFirst Could you please provide a StackBlitz example?
I am just asking how to add global Catch method to catch all errorrs like 404 page. https://github.com/AydinTheFirst/react-template this is the source code of my project with this package.
@AydinTheFirst I initially thought you tried the Catch
component and had an issue with that.
The Catch
component could be exported from any route, in your case to catch all routes errors globally, you'd just need to use the Catch
export at the app root layout at src/pages/_app.tsx
Here's a reference from the examples https://github.com/oedotme/generouted/blob/main/examples/react-router/src/pages/_app.tsx#L5-L7
Hope that help!
So how can i reset error boundary ?
AFAIK React Router's errorElement
doesn't support errors resetting out of the box.
Perhaps you can try to export the Catch
as a custom error component with the error reset functionality (for example using react-error-boundary
), I expect it to catch errors before the router does.
Hope that helps.
It does not catch errors when I wrap Routes
with ReactErrorBoundary
.
It seems that the router is catching the errors before reaching your custom error boundary.
Could you provide a StackBlitz example with your setup?
https://stackblitz.com/~/github.com/AydinTheFirst/generouted-with-error-boundary
you can visit /error route to see error
It doesn't seem to work with the react-error-boundary
component.
This seems to be a related issue https://github.com/remix-run/react-router/issues/10157. One way to go around it is by navigating to the same route — it resets the location as mention at this issue.
Here's your example updated https://stackblitz.com/edit/github-jpeclb?file=src%2Fpages%2Ferror.tsx,src%2Fcomponents%2FReactErrorBoundary.tsx
After searching some related contents I found this solution and it works perfectly source: https://stackoverflow.com/questions/74019392/using-react-error-boundary-with-react-router test: https://github.com/AydinTheFirst/my-turborepo/blob/main/apps/frontend/src/main.tsx
Im trying to wrap my whole app with custom error boundary. This way was working when i use react-router but does not work with this package.
The Error