What is causing an Unhandled Promise Rejection: undefined is not an object (evalutating '_context.t0.response.data')?

Question

I keep getting an Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating '_context.t0.response.data'). After doing some digging, it seems like my error is coming from this part of my code. It's the authUser function specifically that seems to be causing the problem

import { addError, removeError } from './error';
import { SET_CURRENT_USER } from '../actionTypes';
import api from '../../services/api';

export const setCurrentUser = user => ({
    type: SET_CURRENT_USER,
    user
});

export const setToken = token => {
    api.setToken(token);
};

export const authUser = (path, data) =>
{
    return async dispatch => {
        try {
            const {token, ...user} = await api.call('post', `auth/${path}`, data);
            AsyncStorage.setItem('jwtToken', token);
            api.setToken(token);
            dispatch(setCurrentUser(user));
            dispatch(removeError());
        } catch (err) {
            const error = err.response.data;
            dispatch(addError(error.message));
        }
    }
};

actionTypes.js

export const SET_CURRENT_USER = 'SET_CURRENT_USER'

api.js

import axios from 'axios';

const host = 'http://localhost:4000/api';

export const setToken = token => {
    if (token) {
        axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    } else {
        delete axios.defaults.headers.common['Authorization'];
    }
};

export const call = async (method, path, data) => {
    const response = await axios[method](`${host}/${path}`, data);
    return response.data;
};

export default { setToken, call };

error.js

import {ADD_ERROR, REMOVE_ERROR} from '../actionTypes';

export const addError = error => ({
    type: ADD_ERROR,
    error
});

export const removeError = () => ({
    type: REMOVE_ERROR
});

Error:

Possible Unhandled Promise Rejection (id: 4):
TypeError: undefined is not an object (evaluating '_context.t0.response.data')
_callee$@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:107239:43
tryCatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:26927:23
invoke@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27103:32
tryCatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:26927:23
invoke@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27003:30
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27015:21
tryCallOne@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:28865:16
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:28966:27
_callTimer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32405:17
_callImmediatesPass@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32441:19
callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32659:33
callImmediates@[native code]
__callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2719:35
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2505:34
__guard@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2702:15
flushedQueue@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2504:21
flushedQueue@[native code]
callFunctionReturnFlushedQueue@[native code]

Also if it helps, I followed the localhost link and the function that is breaking there, tho I did not write this and cannot change it.

  var authUser = function authUser(path, data) {
    return function _callee(dispatch) {
      var _await$api$call, token, user, error;

      return _regenerator.default.async(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.prev = 0;
              _context.next = 3;
              return _regenerator.default.awrap(_api.default.call('post', "auth/" + path, data));

            case 3:
              _await$api$call = _context.sent;
              token = _await$api$call.token;
              user = (0, _objectWithoutProperties2.default)(_await$api$call, ["token"]);
              AsyncStorage.setItem('jwtToken', token);

              _api.default.setToken(token);

              dispatch(setCurrentUser(user));
              dispatch((0, _error.removeError)());
              _context.next = 16;
              break;

            case 12:
              _context.prev = 12;
              _context.t0 = _context["catch"](0);
              error = _context.t0.response.data;
              dispatch((0, _error.addError)(error.message));

            case 16:
            case "end":
              return _context.stop();
          }
        }
      }, null, null, [[0, 12]], Promise);
    };
  };

Answer 1

The error is coming from the catch block of the authUser function:

export const authUser = (path, data) =>
{
    return async dispatch => {
        try {
           // ... Other existing codes
        } catch (err) {
            const error = err.response.data;
            dispatch(addError(error.message));
        }
    }
};

For errors thrown by axios, err.response won't always be available, at times when there is no response from the server or there was a problem making the request in the first place, err.response would be undefined. In such cases, you need to handle other sources of errors. You should update the catch logic to handle the possible error cases, the code should be something like this:

catch (err) {
    if (err.response) {
        // There is an error response from the server
        // You can anticipate error.response.data here
        const error = err.response.data;
        dispatch(addError(error.message));
    } else if (err.request) {
        // The request was made but no response was received
        // Error details are stored in err.reqeust
        console.log(err.request);
    } else {
        // Some other errors
        console.log('Error', err.message);
    }
}

More details on handling axios error here.