Differentiate Axios Network and HTTP Status Errors

Handling errors effectively in Axios requires identifying whether an issue stems from an HTTP status code returned by the server or a network failure that prevented communication. In Axios, every rejected promise provides an error object containing specific properties that reveal the nature of the failure. By inspecting the presence of error.response versus error.request, you can accurately separate HTTP status code errors, network-level errors, and client configuration issues.

The Axios Error Hierarchy

When a request fails in Axios, the catch block receives an error object structured into three distinct failure scenarios:

1. HTTP Status Code Errors (error.response): The server received the request and responded with a status code outside the 2xx range (such as 400, 401, 404, or 500).
2. Network Errors (error.request): The request was generated and sent, but no response was received from the server (due to connection loss, DNS failure, CORS blocking, or timeouts).
3. Setup Errors (error.message): An error occurred while setting up the request before it could be sent.

1. Identifying HTTP Status Code Errors

If error.response is defined, the network connection succeeded, but the server responded with an error status. You can extract debugging and user-facing data directly from this object:

• error.response.status: The numeric HTTP status code (e.g., 404, 500).
• error.response.data: The payload returned by the server, often containing specific API error messages.
• error.response.headers: The HTTP headers sent by the server with the error response.

2. Identifying Network Errors

If error.response is undefined but error.request is defined, Axios successfully initiated the request, but never received a response. Common causes include:

• The user is offline or lost internet connectivity.
• The remote server is down or unreachable.
• The request timed out (ECONNABORTED).
• The browser blocked the request due to a Cross-Origin Resource Sharing (CORS) violation.

In browser environments, error.request is an instance of XMLHttpRequest. In Node.js environments, it is an instance of http.ClientRequest.

3. Implementation Example

Use the following pattern inside a try...catch block or a promise .catch() handler to differentiate and handle each error type:

import axios from 'axios';

async function makeRequest() {
  try {
    const response = await axios.get('https://api.example.com/data');
    return response.data;
  } catch (error) {
    if (error.response) {
      // The server responded with a non-2xx status code
      console.error('HTTP Status Error:', error.response.status);
      console.error('Response Data:', error.response.data);
      
      // Handle specific HTTP status codes
      if (error.response.status === 401) {
        // Handle unauthorized access (e.g., redirect to login)
      } else if (error.response.status >= 500) {
        // Handle server-side errors
      }

    } else if (error.request) {
      // The request was made but no response was received
      console.error('Network Error: No response received from server.');
      
      if (error.code === 'ECONNABORTED') {
        console.error('Request timed out.');
      } else {
        console.error('Check internet connection or CORS settings.');
      }

    } else {
      // Something happened in setting up the request that triggered an Error
      console.error('Request Setup Error:', error.message);
    }
  }
}

Summary of Conditions