AxiosError vs JavaScript Error: Key Distinctions

When handling network requests in Axios, a standard JavaScript Error object lacks the HTTP-specific metadata needed to diagnose network failures and handle API responses effectively. Axios solves this by throwing an AxiosError, a specialized subclass of Error enriched with context regarding the HTTP transaction. This article details the specific properties that separate an AxiosError from a generic JavaScript Error and explains how they function during runtime.

Standard JavaScript Error Properties

A baseline JavaScript Error object provides minimal information primarily intended for general exception handling and debugging:

• name: The name of the error type (e.g., "Error", "TypeError").
• message: A human-readable string describing the error.
• stack: The execution stack trace showing where the error originated.
• cause: An optional property in modern ECMAScript to store the underlying cause of the error.

These properties provide no insight into HTTP status codes, request payloads, headers, or server responses.

Distinguishing Properties of AxiosError

An AxiosError inherits the standard message, name, and stack properties from the base Error class, but adds several HTTP-specific properties:

1. isAxiosError

A boolean flag set to true. This property allows developers to verify whether a caught exception originated from Axios without relying on instanceof checks across different module contexts or realms. Axios also exposes a utility method, axios.isAxiosError(payload), which checks for this property.

2. config

The configuration object used to make the original HTTP request. It contains details such as:

• url: The target endpoint.
• method: The HTTP method (e.g., 'get', 'post').
• headers: The request headers sent to the server.
• data or params: The payload or query parameters passed into the request.

3. request

The underlying request object that generated the network call.

• In a browser environment, this is an instance of XMLHttpRequest.
• In a Node.js environment, this is an instance of http.ClientRequest.

This property is populated even if no response was received from the server (e.g., during network dropouts or CORS failures).

4. response

An object containing the response data if the server responded with an HTTP status code outside the 2xx range. If the request was made but no response was received, this property remains undefined. When present, response includes:

• status: The HTTP status code (e.g., 404, 500).
• statusText: The HTTP status message returned by the server (e.g., "Not Found").
• headers: The response headers.
• data: The response body returned by the API (often containing custom error payloads from the server).

5. code

A standardized string error code identifying the category of the failure. Common examples include:

• ERR_NETWORK: Network connection failed.
• ERR_BAD_REQUEST: Received a 4xx status code.
• ERR_BAD_RESPONSE: Received a 5xx status code.
• ECONNABORTED: The request was aborted or timed out.

6. status

Available in newer Axios releases (v1.x+), this top-level property mirrors the numeric HTTP status code found in error.response.status, providing direct access to the status code without requiring optional chaining on the response object.

Summary Comparison