Why axios .catch() catch javascript error in redux middleware?

Question

I use axios as my client for ajax request in react redux application.

To handle async action, I use middleware that will :

Recognize promise object
Resolve the promise with then() if success OR catch() if fail
Resolved promise will dispatch action corresponding to its success/fail action. For example, GET_TRANSACTIONS will dispatch GET_TRANSACTIONS_SUCCESS or GET_TRANSACTIONS_FAIL

The problem is, everytime the application gets an error (like access property of undefined), it will trigger the catch() handler in the async action middleware and dispatch the fail action, which is not related.

As the result, the javascript error is not displayed in console, so I don't know what actually happen with the application.

The dispatched fail action's payload is just an empty object. (it should be access property of undefined)

How can I make sure that .catch() only handle promise error, not the javascript error?

clientMiddleware.js

export const clientMiddleware = (client) => {
  return ({ dispatch, getState }) => {
    return next => action => {
      if (typeof action === 'function') {
        return action(dispatch, getState)
      }

      const { promise, types, ...rest } = action

      if (!promise) {
        return next(action)
      }

      const [REQUEST, SUCCESS, FAILURE] = types
      next({ ...rest, type: REQUEST })

      const actionPromise = promise(client)

      actionPromise
        .then((res) => next({ ...rest, payload: res, type: SUCCESS }))
        .catch((err) => next({ ...rest, payload: err, type: FAILURE }))

      return actionPromise
    }
  }
}

I use my own middleware (Added the code in the question) @AlessanderFrança — Kiddo
– Kiddo, Commented Feb 8, 2017 at 15:57

jonicious · Accepted Answer · 2017-02-08 11:02:58Z

0

How can I make sure that .catch() only handle promise error, not the javascript error?

AFAIK there is not. We are experiencing the same issue in our applications. Errors are kind of swallowed. For debugging purposes, we use something like this:

Promise.prototype.nativeCatch = Promise.prototype.catch;
Promise.prototype.catch = function(handler) {
    return this.nativeCatch(function(error) {
        try {
            console.error(error.stack);
        }
        catch(error) {

        }
        handler(error);
    });
};

answered Feb 8, 2017 at 11:02

jonicious

3641 gold badge4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kiddo Over a year ago

I see... is it possible to add another middleware just to catch any javascript error instead? I prefer not to alter native code if possible.

Collectives™ on Stack Overflow

Why axios .catch() catch javascript error in redux middleware?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related