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);
    });

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.!