Conditionally use ErrorBoundary

[Covicake]

Hello!

I'm trying to set React Query to handle all errors wherever the mutations are used (to display an error in a form, for example), except for two specific errors (500 and 404) which I want to delegate to an Error Boundary, but I can't figure out how to do it.

I've read that you can set useErrorBoundary config option to true, but this will make ALL errors go to the ErrorBoundary, or throwOnError, which will make none of the errors go to the ErrorBoundary.

Is it possible to achieve what I want using React Query?

Thanks in advance!

[ytnytn1]

Hello!

I'm trying to set React Query to handle all errors wherever the mutations are used (to display an error in a form, for example), except for two specific errors (500 and 404) which I want to delegate to an Error Boundary, but I can't figure out how to do it.

I've read that you can set useErrorBoundary config option to true, but this will make ALL errors go to the ErrorBoundary, or throwOnError, which will make none of the errors go to the ErrorBoundary.

Is it possible to achieve what I want using React Query?

Thanks in advance!

Hi, @Covicake!
have you managed to find a way to do that? I also need that behavior.

[shan-du]

@Covicake @ytnytn1 :

I had the same problem & I managed to get it working this way.
Assuming you have a global boundary like below to handle your 500/404 & other React errors:

<ErrorBoundary>
  <Component />
</ErrorBoundary>

then in the <Component /> where you run your queries

const [, setError] = useState(false)

const mutation = useMutation(
  key,
  query,
  {
    useErrorBoundary: false, // don't use boundary by default
    onError: errors => {
      if (errors.status === 500 || errors.status === 404) {
        setError(() => {
          throw errors // this will bypass react-query & delegate to <ErrorBoundary>
        })
      }
      // handle other query related errors
    }
  },
)

[TkDodo]

not sure if it's possible, but maybe we could try to change the api of useErrorBoundary to also expect a function:

useErrorBoundary: boolean | (error: Error) => boolean

this would kinda be the same api that retry and retryDelay have

[AndrianStoikov]

This might actually be very useful. At the moment I am also trying to implement a global error handler, and at the same time handle some specific errors in a different way.

[georgiosd]

@TkDodo +1 on that one. Is anyone working on this?

[TkDodo]

there was a PR opened yesterday in that direction: #2619

but it used an extra flag instead of the proposed structure here. Also, I think with suspense we always need to throw...