Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Can I use axios interceptors to handle other types of errors besides token expiration
    Axios interceptors error handling network errors HTTP status codes validation errors unauthorized access JavaScript web development


Can I use axios interceptors to handle other types of errors besides token expiration


Yes, you can absolutely use Axios interceptors to handle other types of errors beyond just token expiration. Interceptors provide a powerful and flexible way to centralize error handling logic in your application.

Here are some examples of other types of errors you can handle with Axios interceptors:

1. Network Errors: You can use an interceptor to detect network errors, such as a lost internet connection, and provide appropriate error handling and notifications to the user.

javascript
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (!error.response) {
      // Network error occurred
      console.error('Network error:', error);
      // Display a generic error message to the user
      showErrorNotification('An unexpected error occurred. Please check your network connection.');
    }
    return Promise.reject(error);
  }
);

2. HTTP Status Code Errors: You can use interceptors to handle specific HTTP status codes, such as 404 Not Found or 500 Internal Server Error, and provide custom error handling.

javascript
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response) {
      switch (error.response.status) {
        case 404:
          console.error('Resource not found:', error.response.data);
          showErrorNotification('The requested resource could not be found.');
          break;
        case 500:
          console.error('Server error:', error.response.data);
          showErrorNotification('An unexpected server error occurred. Please try again later.');
          break;
        default:
          return Promise.reject(error);
      }
    }
    return Promise.reject(error);
  }
);

3. Validation Errors: If your API returns validation errors, you can use an interceptor to extract and handle them appropriately.

javascript
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response && error.response.data && error.response.data.errors) {
      // API returned validation errors
      console.error('Validation errors:', error.response.data.errors);
      showValidationErrors(error.response.data.errors);
    }
    return Promise.reject(error);
  }
);

4. Unauthorized Errors: In addition to handling token expiration, you can use interceptors to detect unauthorized access (401 Unauthorized) and handle it accordingly, such as redirecting the user to the login page.

javascript
axios.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response && error.response.status === 401) {
      // User is not authorized
      console.error('Unauthorized access:', error);
      // Redirect the user to the login page
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

The key benefit of using Axios interceptors for error handling is that you can centralize your error handling logic in a single place, making your code more maintainable and easier to update. This approach also ensures that error handling is consistently applied across your application, improving the overall user experience.

Remember to customize the error handling and notification mechanisms to fit the specific requirements of your application.

Citations:
[1] https://blog.stackademic.com/building-a-resilient-axios-api-service-with-error-handling-and-notifications-dd34033eb742?gi=bb9d2330963d
[2] https://dev.to/darkmavis1980/how-to-use-axios-interceptors-to-handle-api-error-responses-2ij1
[3] https://dev.to/idboussadel/handle-401-errors-in-a-cleaner-way-with-axios-interceptors-5hkk
[4] https://www.bezkoder.com/axios-interceptors-refresh-token/
[5] https://blog.stackademic.com/refresh-access-token-with-axios-interceptors-in-react-js-with-typescript-bd7a2d035562?gi=b658dd3f4572