FG
🔌 APIs & SDKs

AxiosError type for javascript

Freshabout 22 hours ago
Mar 14, 20260 views
Confidence Score68%
68%

Problem

Summary Axios rejects error with Error type. Adding custom error type will help with distinguishing between axios and other errors. The only way now is to check 'request' field existence which is not always possible. Our internal custom error type has this field too. Example: [code block] Context - axios version: 0.18.0 Relates to: #24

Error Output

error with Error type. Adding custom error type will help with distinguishing between axios and other errors. The only way now is to check 'request' field existence which is not always possible. Our interna

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Implement Custom Axios Error Type for Enhanced Error Handling

Medium Risk

Axios errors are currently represented by a generic Error type, making it difficult to distinguish between Axios-specific errors and other types of errors. This is problematic as it relies on the presence of the 'request' field, which may not always be available, especially when integrating with custom error types that also include this field.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Create a Custom Axios Error Class

    Define a new error class that extends the built-in Error class. This class will include additional properties specific to Axios errors, allowing for better differentiation.

    typescript
    class AxiosError extends Error {
  constructor(message, config, code, request, response) {
    super(message);
    this.config = config;
    this.code = code;
    this.request = request;
    this.response = response;
    this.name = 'AxiosError';
  }
}
  2. 2

    Modify Axios Error Handling

    Update the Axios error handling mechanism to throw the new AxiosError class instead of the generic Error. This involves modifying the Axios source code or using an interceptor to catch errors and rethrow them as AxiosError.

    typescript
    axios.interceptors.response.use(
  response => response,
  error => {
    throw new AxiosError(error.message, error.config, error.code, error.request, error.response);
  }
);
  3. 3

    Update Error Handling Logic in Application

    Refactor existing error handling logic in your application to check for the custom AxiosError type instead of relying on the 'request' field. This allows for clearer and more robust error handling.

    typescript
    try {
  const response = await axios.get('/api/data');
} catch (error) {
  if (error instanceof AxiosError) {
    console.error('Axios specific error:', error);
  } else {
    console.error('General error:', error);
  }
}
  4. 4

    Test the Implementation

    Run unit tests to ensure that the new AxiosError class is being thrown correctly and that the application can distinguish between Axios errors and other errors effectively.

    typescript
    describe('AxiosError Handling', () => {
  it('should throw AxiosError for Axios requests', async () => {
    await expect(axios.get('/invalid-url')).rejects.toThrow(AxiosError);
  });
});

Validation

Confirm that the application correctly identifies Axios errors by running test cases that simulate Axios requests and checking that the error type is AxiosError. Additionally, verify that other error types are handled without being misclassified.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

axioshttpapi