Custom Error boundary

[AydinTheFirst]

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.

const App = () => {
  return (
    <React.StrictMode>
      <ErrorBoundary>
        <Provider>
          <Toaster />
          <Routes />
        </Provider>
      </ErrorBoundary>
    </React.StrictMode>
  );
};

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

The Error

Unexpected Application Error!
Should have a queue. This is likely a bug in React. Please file an issue.
Error: Should have a queue. This is likely a bug in React. Please file an issue.
    at updateReducer (http://localhost:5173/node_modules/.vite/deps/chunk-4OVXUHDK.js?v=0141a296:12353:19)
    at updateState (http://localhost:5173/node_modules/.vite/deps/chunk-4OVXUHDK.js?v=0141a296:12644:18)
    at Object.useState (http://localhost:5173/node_modules/.vite/deps/chunk-4OVXUHDK.js?v=0141a296:13376:24)
    at useState (http://localhost:5173/node_modules/.vite/deps/chunk-QPAXQ3HS.js?v=0141a296:1066:29)
    at FileManager (http://localhost:5173/src/pages/servers.[serverId]/files.tsx?v=0141a296:50:45)
    at renderWithHooks (http://localhost:5173/node_modules/.vite/deps/chunk-4OVXUHDK.js?v=0141a296:12171:26)
    at updateFunctionComponent (http://localhost:5173/node_modules/.vite/deps/chunk-4OVXUHDK.js?v=0141a296:14577:28)
    at beginWork (http://localhost:5173/node_modules/.vite/deps/chunk-4OVXUHDK.js?v=0141a296:15912:22)
    at beginWork$1 (http://localhost:5173/node_modules/.vite/deps/chunk-4OVXUHDK.js?v=0141a296:19749:22)
    at performUnitOfWork (http://localhost:5173/node_modules/.vite/deps/chunk-4OVXUHDK.js?v=0141a296:19194:20)
💿 Hey developer 👋

You can provide a way better UX than this when your app throws errors by providing your own ErrorBoundary or errorElement prop on your route.

[oedotme]

@AydinTheFirst Could you please provide a StackBlitz example?

[AydinTheFirst]

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.

[oedotme]

@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!

[AydinTheFirst]

So how can i reset error boundary ?

[oedotme]

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.

[AydinTheFirst]

It does not catch errors when I wrap Routes with ReactErrorBoundary.

[oedotme]

It seems that the router is catching the errors before reaching your custom error boundary.

Could you provide a StackBlitz example with your setup?

[AydinTheFirst]

https://stackblitz.com/~/github.com/AydinTheFirst/generouted-with-error-boundary

you can visit /error route to see error

[oedotme]

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

[AydinTheFirst]

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