Get a readable error object when using fetch

Question

I am calling an API using Javascript:

  fetch("/inquiries", {
    method: "POST",
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data),
  })
    .then(response => {
    })
    .catch(error => {
      console.log(error);
    });

When I submit invalid data I get an error which shows in console as:

If I access using a REST client I get:

How to get the error response as it shows on my Rest Client?

Update

I tried the following:

.then((response) => {
  console.log(response);
  console.log(response.error);
  console.log(response.errors);
})
.catch((error) => {
});

And I got in the console:

If I check my network tab I see the response:

Are you asking how to get "The email is required" out of the data structure? — James, Sep 30 '22 at 20:25
I think that it will be easier to get to `response.errors` to be an array of objects instead of an object or arrays? If you wanted to get the "The email is required" you will have to check any posible errors, but given that response you can get it with `response.errors.email` — Toni Michel Caubet, Sep 30 '22 at 20:26
That's weird... the promise shouldn't reject if the status is 400... — kelsny, Sep 30 '22 at 20:27
https://stackoverflow.com/questions/40408219/how-to-get-readable-error-response-from-javascript-fetch-api — epascarello, Sep 30 '22 at 20:34
Does this answer your question? [How to get Readable error response from JavaScript Fetch API?](https://stackoverflow.com/questions/40408219/how-to-get-readable-error-response-from-javascript-fetch-api) — Heretic Monkey, Sep 30 '22 at 20:45
@HereticMonkey I have seen those question before but I haven't being able to solve my problem. — Miguel Moura, Sep 30 '22 at 21:43

Toni Michel Caubet · Answer 1 · 2022-09-30T20:52:07.930

Well, I think that it will be easier to get to response.errors to be an array of strings instead of an object or arrays

If you want to access to the "The email is required" with the response that you provided you could get it with response.errors.Email

fetch("/posts", {
  method: "POST",
  headers: {
    "Accept": "application/json",
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data),
})

.then(response => {
   console.log(response.errors, response.errors.Email)
})

.catch(error => {
  console.log(error);
});

But With this error message structure that you provide you would "have" to check if any specific error is present in the response

if (response.errors.Email) {
  console.log(response.errors.Email)
} else if (response.erros.Password) {
  console.log(response.errors.Password)
} else if (response.erros.Other) {
  console.log(response.errors.Other)
} // and so on

If it was an Array of errors (strings/objects) you would simply loop on them, like

for (const error of response.errors) {
  console.log(error)
}

I tried `console.log(response.errors)` before and I get `undefined`. That's strange — Miguel Moura, Sep 30 '22 at 21:06
I added an update on my question with a few images that might help. What do you think? — Miguel Moura, Sep 30 '22 at 21:42

Get a readable error object when using fetch

1 Answers1