catching error body using axios post

Question

I am sending a status code 422 from my backend code with response body which contains the description of the error. I am using axios post as below to post a request:

post: function(url, reqBody) {
    const request = axios({
        baseURL: config.apiUrl,
        url: url,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': sessionStorage.getItem('token')
        },
        method: 'POST',
        data: reqBody,
        responseType: 'json'
    });
    return request
        .then((res) => {
            return res;
        })
        .catch((error) => {
            console.log(error);
            return error;
        })
}

The problem is when backend is returning error code 422, the error object I am catching has no information about response body. Is there any way I can retrieve the error text?

score 202 · Answer 1 · answered Jul 23 '17 at 22:45

I had this same issue and the answer (as per Axios >= 0.13) is to specifically check error.response.data:

axios({
    ...
}).then((response) => {
    ....
}).catch((error) => {
    if( error.response ){
        console.log(error.response.data); // => the response payload 
    }
});

See here for more details.

Zelig880 · Answer 2 · 2021-09-08T11:55:20.683

The "body" of an AXIOS error response depends from the type of response the request had.

If you would like full details about this issue you can see this blogpost: How to catch the body of an error in AXIOS.

In summary AXIOS will return 3 different body depending from the error:

Wrong request, we have actually done something wrong in our request (missing argument, bad format), that is has not actually been sent. When this happen, we can access the information using error.message.
```
axios.get('wrongSetup')
.then((response) => {})
.catch((error) => {
    console.log(error.message);
})
```
Bad Network request: This happen when the server we are trying to reach does not respond at all. This can either be due to the server being down, or the URL being wrong. In this case, we can access the information of the request using error.request.
```
axios.get('network error')
.then((response) => {})
.catch((error) => {
    console.log(error.request );
});
```
Error status: This is the most common of the request. This can happen with any request that returns with a status that is different than 200. It can be unauthorised, not found, internal error and more. When this error happen, we are able to grasp the information of the request by accessing the parameter specified in the snippets below. For the data (as asked above) we need to access the error.response.data.
```
axios.get('errorStatus')
.then((response) => {})
.catch((error) => { 
     console.log(error.response.data);  
     console.log(error.response.status);  
     console.log(error.response.headers); 
 })
```

`This can happen with any request that returns with a status that is different than 200.` I would say other than 2XX/3XX. — Andrii Abramov, Dec 05 '21 at 23:27
Nice overview. But maybe worth mentioning that the server might answer, but the `error.response` might be `undefined` anyway. Happens to me if our server sends 504 (including some HTML data). I guess this is because the browser blocks due to CORS ? — kca, Dec 08 '21 at 12:41

Yayo Arellano · Answer 3 · 2020-11-05T06:51:19.110

26

For those using await/async and Typescript

try {
    const response = await axios.post(url, body)
} catch (error) {
    console.log(error.response.data);
}

edited Nov 05 '20 at 06:51

answered Nov 04 '20 at 04:49

Yayo Arellano

3,575
23
28

score 9 · Answer 4 · answered Jan 02 '21 at 21:03

9

For react native it just worked for me

api.METHOD('endPonit', body)
  .then(response => {
   //...
  })
  .catch (error => {
    const errorMessage = JSON.parse(error.request.response)
    console.log(errorMessage.message)
  })

answered Jan 02 '21 at 21:03

Rafael Inácio

161
1
4

TopW3 · Answer 5 · 2021-08-14T14:03:08.820

We can check error.response.data as @JoeTidee said. But in cases response payload is blob type? You can get error response body with the below code.

axios({
    ...
}).then((response) => {
    ....
}).catch(async (error) => {
    const response = error.response
    if(typeof response.data.text === function){
        console.log(await response.data.text()); // => the response payload 
    } else {
        console.log(response.data)
    }
});

Jakub Słowikowski · Answer 6 · 2022-07-06T09:16:56.737

In my case I wanted to retrieve a response 404 error message (body). I got body with error.response.data but I couldn't display it because the type was ArrayBuffer.

Solution:

axios.get(url, { responseType: 'arraybuffer' }).then(
   response => {...},
   error => {
      const decoder = new TextDecoder()
      console.log(decoder.decode(error.response.data))
   }
)

Related posts: Converting between strings and ArrayBuffers

score 0 · Answer 7 · answered Jul 10 '17 at 18:34

0

I am returning a string from backend but expecting a json as response type. So I need to return an object instead of string for axios to process it properly.

answered Jul 10 '17 at 18:34

Amol Aggarwal

2,674
3
24
32

catching error body using axios post

7 Answers7

Linked

Related