Properly retrying or erroring out on a bad connection with Axios calls

In my mobile app, some of my users often run into the problem that they get an ‘undefined’ or a screen that just freezes. After much digging, I have narrowed the problem to axios processes that just do not finish and do not fail out accordingly.

To solve this, I have tried changing timeouts or retrying but this doesn’t seem to solve the problem in all cases – many dont seem to hit an error path. An example of one piece of code that updates the state:

export const loadChallenges = () => {
    return (dispatch, getState) => {
        dispatch({ type: 'LOAD_CHALLENGES_START' })
        axiosRetry(axios, { retries: 4 });
        axios.get('/challenges/').then(function (response) {
            dispatch({ type: 'LOAD_CHALLENGES_SUCCESS', payload: response.data })
        }).catch(function (error) {
            dispatch({ type: 'LOAD_CHALLENGES_FAILURE', payload: error })
        })
    }
}

What am I missing to make this more robust to timeouts, to retry etc?

My defaults in App.js:

axios.defaults.baseURL = baseURL;
axios.defaults.timeout = 1500;

Source: React natvie