Error handling via ErrorBoundary causing infinite loops

[guhadebasish1]

Hello!

i am using useQuery to load some data. The API may return 404 if the data does not exist.

The component has an ErrorBoundary wrapped around it.

I am letting ErrorBoundary handle the error.

ErrorBoundary code is like this, where I want to render the error as well as the rest of the component.

<> <Errors error={error} /> {children} </>

The issue that I am running into is when the children renders, it calls the API again to get a 404, that eventually gets into an infinite loop.

I wonder if I should be using the error property from useQuery to handle errors inside the component and only let ErrorBoundary handle mutation errors?

Any advice / best practice is much appreciated, Thank you! :-)

[TkDodo]

error boundaries usually don't render children - they render an error instead of the children, until the user confirms the error (e.g. with a button), at which point they re-mount the children to try rendering again.

Imagine if there's a runtime error in children. If the boundary catches it and then renders children again, it would also fail again, thus looping infinitely....

[guhadebasish1]

Thank you!

Yeah, we do have a runtime error check inside the ErrorBoundary in which case it does not re-render the children.
We were hoping to have the same ErrorBoundary display the error as well as the rest of the component while using React Query.
I am finding out that is not a good approach.

Instead, what I think we'll do now is have useQuery handle errors inside the component, while useMutation queries can still use ErrorBoundary.

Does this seem to be a decent approach?

I have read through your very helpful blog and acknowledge that the code can become quite boilerplate-y since we have to do this in every component using useQuery.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      useErrorBoundary: false,
      ...defaultQueryConfiguration,
    },
    mutations: {
      useErrorBoundary: (error) => error?.status !== 401, // All errors except 401 go to ErrorBoundary
      ...defaultQueryConfiguration,
    },
  },
});

[TkDodo]

sure; fwiw, I use error boundaries with queries just fine :)