Getting custom error message using fetch api when http response status is 400 [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 6 years ago.

Improve this question

I have Python Flask (v 1.0.0) backend that returns an http response with status 400 and a custom error message

return Response('My custom errror message', 400)

In my frontend I have an API call to the backend using Fetch API:

fetch(url, options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(error => console.log(error));

Since 400 is a BAD REQUEST, fetch goes straight to catch and all I have is TypeError: Failed to fetch message.

How can I get my custom error message in frontend instead of Failed to fetch message? It is visible in the DevTools, so I hope it should be available in fetch somehow?

it goes straight to .catch, I think because it is a 400 response and fetch treats it as an error instantly. — Marius B
– Marius B, Commented Jan 27, 2019 at 11:26
Try this github.com/github/fetch/issues/203#issuecomment-143347675 — Usman Iqbal
– Usman Iqbal, Commented Feb 4, 2020 at 9:52

Marius B · Accepted Answer · 2019-01-28 07:23:33Z

2

It turns out it was nginx configuration issue. I was right when I said that fetch goes straight to .catch when the response is 400 but the reason was that the request was actually failing - I was seeing a CORS error in the console. After adding always parameter to my nginx configuration, there are no more CORS errors and I can access My custom error message inside .then and it no longer goes straight to .catch. More details here: nginx add headers when returning 400 codes

answered Jan 28, 2019 at 7:23

Marius B

7883 gold badges19 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Szymon D · Accepted Answer · 2019-01-27 14:41:38Z

0

Fetch won't throw an exception in case of status out of 200-299 range. You are trying to parse plain text ("My custom error message") as a json and that's the cause of exception. You have to check response.status before calling json()

answered Jan 27, 2019 at 14:41

Szymon D

4412 silver badges13 bronze badges

2 Comments

Szymon D Over a year ago

tldr: call text() instead of json() for response.status === 400

Marius B Over a year ago

even if I change my first .then to .then(response => console.log(response.status)) it goes straight to .catch - first .then isn't even executed

Collectives™ on Stack Overflow

Getting custom error message using fetch api when http response status is 400 [closed]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related