Conditionally re-throw errors on onError and globally handle uncaught errors

[JRebella]

After reading TkDodo's artcile about global error handling in RQ I came with an idea to do the following:

1. Have a global error handler for any errors that haven't been caught
2. Allow components to analyze errors locally and decide whether to handle it themselves or re-throw the error so that it can be handled at a global level. For example, based on the status code of a request, handle it if it's an expected error code (400, bad request) but let it propagate upwards if it's an unexpected error code (500, server error)

---

1) For the global error handling I understand there are 2 options:

a. Set an onError callback in the mutationCache, this will be run for every error no matter if the error was handled/caught earlier

mutationCache: new MutationCache({
    onError: error => {
      console.log('Mutation error:', error);
    },
  }),

The problem here being that I don't see a way of knowing that the error was already handled locally. In which case I wouldn't want to act and just ignore it

b. Set an onError in defaultOptions that will be run for any mutation that doesn't specify an onError callback

defaultOptions: {
  mutations: {
    onError: error => {
      console.log('Mutation error:', error);
    },
  },
},

The problem here is that it wouldn't run for any mutations that have a local onError handler. Meaning that I can't conditionally handle errors locally. I expect my local component to do something like this:

useMutation(createNewUser, {
  onSuccess: () => {
    // Do stuff..
  },
  onError: err => {
    if (err.status === 400) {
      // Server rejected the form (common use case), render validation errors to the user in the form
    } else {
      // We don't expect this kind of error meaning it's a bug
      throw err; // Re-throw the error so that it's handled globally (display application error)
    }
  },
});

---

So my question is, is this possible? Is there a way to re-throw errors in the local onError handler so that it can be caught by the global handler? But also allow the local handler to fully catch it so that it doesn't reach the global handler (or at least let it reach the global handler but in a way that the global handler can see it has already been handled locally and thus ignore it)?

[TkDodo]

no, there is no such thing. the global error handlers are always called.

[JRebella]

Ok thanks for the sanity check!

What do you think on this approach tho? Are there any plans for a cascade style of error handling in react-query where components are allowed to process errors locally and decide whether to handle them or re-throw them (and be caught later by a higher level handler)?

[TkDodo]

it does sound nice conceptually, at least for mutations. not sure about how to best integrate it though. Currently, the cache level callbacks are called before the component level ones.

[vanenshi]

@TkDodo what about returning a boolean as a result of onError? which is going to indicate of onError is handled or should handle by global error handler