Get the Status Code of an Axios HTTP Error in JavaScript

avatar

Borislav Hadzhiev

Sun Dec 26 20212 min read

banner

Photo by Urfan Hasanov

Get the Status Code of an Axios HTTP Error #

Use the status property on the error.response object to get the status code from a HTTP error response, e.g. error.response.status. The status property on the error.response object returns the status code that was issued by the server in a response to the client's request.

index.js
import axios from 'axios'; async function makeRequest() { try { const res = await axios.get('https://example.com/does-not-exist'); const data = res.data; console.log(data); } catch (err) { if (err.response) { // โœ… log status code here console.log(err.response.status); // ๐Ÿ‘‰๏ธ 404 console.log(err.response.statusText); // ๐Ÿ‘‰๏ธ Not Found console.log(err.message); // ๐Ÿ‘‰๏ธ Request failed with status code 404 console.log(err.response.headers); // ๐Ÿ‘‰๏ธ {... response headers here} console.log(err.response.data); // ๐Ÿ‘‰๏ธ {... response data here} } } } makeRequest();

In the example, we requested a route that doesn't exist on the example.com domain and got a 404 error response back.

To get the status code of the error, we caught the error in a catch block and accessed the status property on the error.response object.

Here is the same example if you are using promise.then() and promise.catch(), instead of async/await.

index.js
import axios from 'axios'; function makeRequest() { axios .get('https://example.com/does-not-exist') .then(res => { const data = res.data; console.log(data); }) .catch(err => { if (err.response) { console.log(err.response.status); // ๐Ÿ‘‰๏ธ 404 console.log(err.response.statusText); // ๐Ÿ‘‰๏ธ Not Found console.log(err.message); // ๐Ÿ‘‰๏ธ Request failed with status code 404 console.log(err.response.headers); // ๐Ÿ‘‰๏ธ {... response headers here} console.log(err.response.data); // ๐Ÿ‘‰๏ธ {... response data here} } }); } makeRequest();

Notice that, we first check if the error.response object is populated. This is because, we can only expect a status code from the server if the error occurred on the server.

If the error was caused when we were setting up the request or because the server didn't respond at all, the error.response object will not be populated.

Here is a more complete example of handling errors in axios.

index.js
import axios from 'axios'; async function makeRequest() { try { const res = await axios.get('https://example.com/does-not-exist'); const data = res.data; console.log(data); } catch (err) { if (err.response) { // ๐Ÿ‘‡๏ธ log status code here console.log(err.response.status); // ๐Ÿ‘‰๏ธ 404 console.log(err.response.statusText); // ๐Ÿ‘‰๏ธ Not Found console.log(err.message); // ๐Ÿ‘‰๏ธ Request failed with status code 404 console.log(err.response.headers); // ๐Ÿ‘‰๏ธ {... response headers here} console.log(err.response.data); // ๐Ÿ‘‰๏ธ {... response data here} } else if (error.request) { // ๐Ÿ‘‡๏ธ Request was made, but no response was received console.log(error.request); } else { // ๐Ÿ‘‡๏ธ An error was thrown when setting up the request console.log(error.message); } } } makeRequest();

The majority of the HTTP errors you will get fall into the error.response categories of:

  • 4xx client error (the request contains bad syntax or cannot be fulfilled)
  • 5xx server error (the server failed to fulfill a valid request).

Either way, it's good to at least log the errors from the other categories to make your life easier when debugging if the error.response object is not populated.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee