FG
🔌 APIs & SDKs

Axios returns a generic "Network Error" even when the request got a response code

Freshabout 21 hours ago
Mar 14, 20260 views
Confidence Score62%
62%

Problem

Describe the bug When making a request to my API, the catch block has a generic "Network Error" message, but when checking in the network inspector the request got a response code 413. This causes my users to incorrectly report that 'the website thinks i dont have a solid internet connection'. I suspect this happens for other codes too because this has been going on for a while. To Reproduce Make a request with a very large payload to trigger a 413 response Expected behavior The catch block should have the response code Environment - Axios Version: 0.25.0 and 0.21.2 - Adapter: xhr (i think? i dont remember changing this, so i guess whatever is default?) - Browser: Chrome - Browser Version: 97.0.4692.99 - Node.js Version: 14.18.1 - OS: OSX 12.1 Additional context/Screenshots [code block] My axios instance code: https://github.com/Miodec/monkeytype/blob/master/src/js/axios-instance.js

Error Output

Error: Network Error

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Handle Axios Response Errors Correctly

Medium Risk

Axios treats certain HTTP response codes (like 413) as network errors, leading to the catch block being triggered with a generic 'Network Error' message. This behavior can mislead users into thinking there is an issue with their internet connection, rather than an issue with the request payload size.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Update Axios Error Handling

    Modify the error handling in your Axios request to check for response status codes. Instead of relying on the catch block for all errors, handle specific response errors in the then block.

    typescript
    axios.post('/your-endpoint', payload)
  .then(response => {
    // Handle success
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // The request was made and the server responded with a status code
      console.error('Error Status:', error.response.status);
      console.error('Error Data:', error.response.data);
    } else if (error.request) {
      // The request was made but no response was received
      console.error('No response received:', error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.error('Error:', error.message);
    }
  });
  2. 2

    Log Detailed Error Information

    Ensure that detailed error information is logged for debugging purposes. This will help identify the specific response status and data returned by the server.

    typescript
    console.error('Error Status:', error.response.status);
console.error('Error Data:', error.response.data);
  3. 3

    Test with Large Payload

    Create a test case that sends a large payload to trigger a 413 response. Verify that the error handling correctly captures the response status and displays it to the user.

    typescript
    const largePayload = 'x'.repeat(1000000); // Example large payload
axios.post('/your-endpoint', largePayload);
  4. 4

    Update User Messaging

    Update the user-facing error messages to reflect the actual issue instead of a generic network error. This will improve user experience and reduce confusion.

    typescript
    alert('Your request was too large. Please reduce the payload size and try again.');

Validation

Confirm the fix by sending a request with a large payload and ensuring that the console logs the correct status code (413) and that the user receives a clear message about the payload size issue.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

axioshttpapi