Catch request errors with Axios

axios-catch-error.js

/*
 * Handling Errors using async/await
 * Has to be used inside an async function
 */
try {
    const response = await axios.get('https://your.site/api/v1/bla/ble/bli');
    // Success 🎉
    console.log(response);
} catch (error) {
    // Error 😨
    if (error.response) {
        /*
         * The request was made and the server responded with a
         * status code that falls out of the range of 2xx
         */
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
    } else if (error.request) {
        /*
         * The request was made but no response was received, `error.request`
         * is an instance of XMLHttpRequest in the browser and an instance
         * of http.ClientRequest in Node.js
         */
        console.log(error.request);
    } else {
        // Something happened in setting up the request and triggered an Error
        console.log('Error', error.message);
    }
    console.log(error);
}

/*
 * Handling Errors using promises
 */
axios.get('https://your.site/api/v1/bla/ble/bli')
    .then((response) => {
        // Success 🎉
        console.log(response);
    })
    .catch((error) => {
        // Error 😨
        if (error.response) {
            /*
             * The request was made and the server responded with a
             * status code that falls out of the range of 2xx
             */
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
        } else if (error.request) {
            /*
             * The request was made but no response was received, `error.request`
             * is an instance of XMLHttpRequest in the browser and an instance
             * of http.ClientRequest in Node.js
             */
            console.log(error.request);
        } else {
            // Something happened in setting up the request and triggered an Error
            console.log('Error', error.message);
        }
        console.log(error.config);
    });

:D

:D

Hi @farhankassam2! I've never used TS and React Native, but I'd be very interested in knowing what was the issue

I think I fixed the issue. It seems like catching of errors using a try{}catch{} blocked wrapped around an API server call using axios does correctly catch error messages thrown from the server API call. Only issue is that if the error message is undefined or an empty string, the try{}catch{}block will not catch it.

I hope that clarifies it @fgilio?

I guess, yes. Is the server returning a 2xx status code even if there are errors? According to axios, any status code outside the range of 2xx should trigger the error

I find it hard that I cannot get the request headers from the error object. If I try console.log(error.request.header) or _header I get nothing. When I print error.request I do get a lot of junk, but somehow I miss how to get to the header that was used. I will eventually get it I'm sure but the fact that it is so hard makes me wonder what were people thinking. It is so normal to log the header when the request fails so that the error can be reported.

I find it hard that I cannot get the request headers from the error object. If I try console.log(error.request.header) or _header I get nothing. When I print error.request I do get a lot of junk, but somehow I miss how to get to the header that was used. I will eventually get it I'm sure but the fact that it is so hard makes me wonder what were people thinking. It is so normal to log the header when the request fails so that the error can be reported.

Hmm yep, that's interesting. You're trying to get the headers from the request and not the failed response, right.

Thanks a lot.!