Does Remix ignores ErrorBoundary wrappers?

[spacepolice10]

Hi there,

Let's say I have a large array of picture component. It is wrapped with ErrorBoundary. Inside there's another component, let's say — Like button. This button internally uses useFetcher-hook to make a request to API-route (which makes request to the server, etc.). If fetcher.submit is failed, Remix jumps right to the nearest ErrorBoundary exported from route. But I would like to incapsulate error inside the component, show specific ErrorBoundary and not to break the whole list of data that is presented to the user. Is it expected behavior?

[gitnik]

I am running into the exact same issue. Have you found a way to make this work?

[kiliman]

We had the same problem at work. I created a <ComponentErrorBoundary> that handles component level errors. It's a wrapper around the error boundary from react-error-boundary.

Here's an example repo with usage instructions. There are a couple of things you need to do differently in order to get around the default route-level error boundary used by Remix.

https://github.com/kiliman/remix-component-errorboundary

[kiliman]

Running example.

https://stackblitz.com/github/kiliman/remix-component-errorboundary

[gitnik]

Thanks a lot @kiliman! Appreciate the insight and I'll look into it