Interceptor's unable to catch Network failures

[scazzy]

Goal was to keep single point api handling across my React Native app, and manage any errors, messages or common responses from a single place while returning the data if successful.
Tried to use interceptors for this purpose but they couldn't catch errors as mentioned in the read me that they're executed before using .then() or .catch().
Even tried the basic try {} catch()=>{} around interceptors, in vein.

What could be the best way around to achieve this?

[rubennorte]

Response interceptors intercept any kind of error, including network errors. You need to register your error handling function as the second parameter of use (the one that handles errors). Could you please add an example where this fails?

[joinjoohny]

Hi, I have same problems.
Example code:

axios.interceptors.response.use((response) => {
  if (response.data.error) {
    return Promise.reject(response);
  }
  return response;
}, (error) => (
  console.log(error); // result -> Error: Network Error(…)
));

How to get the error ?

[joinjoohny]

Helped for me #383

[scazzy]

@rubennorte Was planning on a routing every api in my RN app from a single entry point (Controller). At this point, I can handle or update the Requests and Responses, add default params, and importantly - handle errors.
API errors, Network errors, or any other - can be handled from a single place since the responses are generally structured. Plus, it prevents repeated error handling code wherever fetch is called.
API response errors - Can be handled via interceptors
But unable to handle Network error via interceptors because interceptors are called before .then() and .catch() of a promise.

I want to show error messages, alerts, dialogs etc from a single place, and prevent exception errors to crash the app

[rubennorte]

I think what you're trying to achieve is a way to stop promise propagation under certain conditions.

Something like:

axios(...).then(handleResponse, handleSpecificErrors);

So when this request fails due to a network error, neither handleResponse nor handleSpecificErrors are called, right?

This is hard to achieve with promises as they're now (some cancellable promises proposals intend to solve things like this), but something you can do is to return a never resolved promise in your error response interceptor.

axios.interceptors.response.use(null, (error) => {
  if (!isGenericError(error)) {
    return Promise.reject(error);
  }

  handleGenericError(error);
  return new Promise(() => {});
});

I don't like this solution very much as it may be dangerous in certain conditions, but is the only thing you can do to achieve that. You can also manage the errors sharing some logic in the rejection handlers of each call.