fetch() doesn't throw on a 404

I used to think that if a fetch() request failed, the catch block would handle it.

Something like this:

try { const response = await fetch("/api/users/123"); const user = await response.json(); console.log(user); } catch (error) { console.error("Request failed:", error); } 

But there's a detail here.

If the server returns a 404 or 500, fetch() doesn't reject the promise.

You still get a response object.

So this code:

const response = await fetch("/api/missing"); console.log(response.status); // 404 console.log(response.ok); // false 

works normally, assuming the server actually responds with a 404.

The catch block won't run just because the status code indicates an error.

To handle that, you need to check response.ok yourself.

async function getUser(id) { const response = await fetch(`/api/users/${id}`); if (!response.ok) { throw new Error(`HTTP ${response.status}`); } return response.json(); } 

Now you can catch HTTP errors too:

try { const user = await getUser(123); console.log(user); } catch (error) { console.error(error); } 

response.ok is true for status codes from 200 to 299.

One more thing: calling response.json() doesn't mean the response contains valid JSON. If the server sends an HTML error page, for example, JSON parsing can throw a separate error.

So checking the HTTP status before parsing the body is usually a good idea.

It's a small distinction, but worth remembering when using the native Fetch API.