Cancel all callbacks being triggered on "doom" backend error

[rbuzatto]

Situation: app has a requirement where for a given catastrophic backend error it should be handled the same way no matter what component has triggered. Also there's also a requirement that other specific callback components actions (onError, onSettled) shouldn't be triggered.

Issue: App has several components that pass onError callback on some useQuery hook. Those callbacks shouldn't be triggered for that given component.

  // shouldnt be triggered for catatrophic error, only global callback should be triggered
  const onError = (err: IError): void => history.push(errorRoute);

  const onSuccess = (): void => history.push(successRoute);

  const { error, reset, mutate } = useLogin({ onError, onSuccess });

Question:

• is there any gracefully approach (or suggestion) to handle this situation with react-query?
• should this global error handler for this catastrophic error be declared at queryCache?

[TkDodo]

hmm, I would checkout error boundaries.useErrorBoundary: true, or you can also pass a function that receives the error and uses an error boundary for catastrophic errors.
I am unsure if it would solve the callback problem, but it just might, because throwing to an error boundary unmounts the component.

[rbuzatto]

hmm, I would checkout error boundaries.useErrorBoundary: true, or you can also pass a function that receives the error and uses an error boundary for catastrophic errors. I am unsure if it would solve the callback problem, but it just might, because throwing to an error boundary unmounts the component.

thatnks @TkDodo for the reply! it seems though that the callback is triggered before the error is thrown, thus before the component gets dismounted:

mounted
index.js:1 {ID: 6, TYPE: 'random error', MESSAGE: 'Doomday'}
instrument.ts:124 callback called
index.js:1 The above error occurred in the component:
instrument.ts:124 au revoir!!

I thought about creating a hook that would "decorate" onError and OnSettled callbacks, conditionally invoking then. It might work, though I was not really sure about this approach since onError and onSettled callbacks passed to mutate would still be called regardless.