Custom error message is response body of Axios POST, throws error in catch ? (code included)

Question

When I create this .NET 5 Web API which returns an error via "NotFound" but includes text string with additional error information, this custom error details:

(a) shows up in Postman in the response body, however

(b) I can't see the error info it in the "caught" error in my React Axios code (see below)???

How can I get access to such detailed error message from a .NET 5 web api? The "axios.post" request is working fine, just when I simulate an error state I'm trying to pick up extra error information to the client I want to pass back.

API CODE (.NET 5)

var errorDetails = new
{
    error = "Custom error",
    message = "Custom message",
    details = "Custom details"
};
var errorDetailsJson = JsonSerializer.Serialize(errorDetails);
return NotFound(errorDetailsJson);

REACT / AXIOS CODE

try {
    let response = await axios.post(url, body, await getCustomAuthOptions('POST'));
    let data = await response.data;
    return data as T;
} catch (error) {
    console.log(error.toJSON());  // I CAN'T SEE THE RESPONSE BODY WITH CUSTOM ERROR MESSAGES HERE
    throw error;
}

RESULT OF console.log FROM THE CATCH

{
  "message": "Request failed with status code 404",
  "name": "Error",
  "stack": "Error: Request failed with status code 404\n ...cut",
  "config": {
    "url": "https://localhost:5001/THE_URL_I_USE",
    "method": "post",
    "data": "",
    "headers": {
      "Accept": "application/json",
      "Content-Type": "application/json",
      "Authorization": "Bearer xxxetc"
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "mode": "cors"
  }
}

Don't you get errrdetailsjson as the body data? JSON.parse(data) — Andy, Feb 27 '23 at 18:06
Did you check [this](https://stackoverflow.com/questions/48298890/axios-how-to-get-error-response-even-when-api-return-404-error-in-try-catch-fi) SO question? Seems a duplicate to me. — Eldar, Feb 27 '23 at 18:10
@Andy I don’t seeing looking with my “ console.log(error.toJSON());” line. Do you think JSON.parse would be different — Greg, Feb 28 '23 at 21:12
@Eldar are you saying that a 404 wouldn’t be an “error” within the axios framework? (just looking at the link you mentioned) — Greg, Feb 28 '23 at 21:16
Nope in the answer, the 404 response is retrieved in the catch block. The error caught contains a property named `response` where you can get the body. — Eldar, Feb 28 '23 at 21:26
Based on the error message, it seems that the URL specified in the config object is not valid and cannot be found on the server. The error could be due to a typo in the URL or an issue with the server configuration. — Jeevan ebi, Mar 03 '23 at 07:08
I read the message like this in axios. - `error.response.data.message` — the.marolie, Mar 03 '23 at 08:49

score 1 · Answer 1 · answered Mar 04 '23 at 06:48

1

As @Greg already pointed out. You can get the response information from the exception itself. See example:

try {
  let response = await axios.post(url, body, await getCustomAuthOptions('POST'));
  let data = await response.data;
  return data as T;
} catch (err) {
   //err.response.data is what you need
   console.error(err.response.data);  
}

answered Mar 04 '23 at 06:48

Osa E

1,711
1
15
26

thanks for the response - it's just that for this specific error I can't see any of these child objects under the error(?)... [as opposed to seeing it where it should be] – Greg Mar 06 '23 at 11:45

score 1 · Answer 2 · answered Mar 05 '23 at 17:59

It is an axios error so you can handle it this way :

axios
  .post(url, body, await getCustomAuthOptions("POST"))
  .then((response) => {
    let data = response.data;
    // Use your data here
  })
  .catch(function (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log("Error", error.message);
    }
    console.log(error.config);
  });

thanks for the response - it's just that for this specific error I can't see any of these child objects under the error(?)... [as opposed to seeing it where it should be] — Greg, Mar 06 '23 at 11:45

Custom error message is response body of Axios POST, throws error in catch ? (code included)

2 Answers2