Why is my `fetch` call not throwing on a 404 or 500 response?

posée 2 months ago500 vuesen

7
try {
  const res = await fetch('/api/user/999');
  const data = await res.json();
} catch (e) {
  console.log('error');
}

The endpoint returns 404 but my catch never runs. Then res.json() fails with a confusing error.

Diagnostic IA

Généré par IA. Ce n'est pas une réponse — la communauté ci-dessous le confirme ou le corrige. Vérifiez toujours avant de vous y fier.

posée 2 months ago

2 réponses

4
✓
✓ Réponse acceptée

fetch only rejects on network failures (DNS error, offline, CORS block). Any HTTP response, including 404 and 500, is a *successful* fetch. You have to check res.ok yourself:

async function getJson(url) {
  const res = await fetch(url);
  if (!res.ok) {
    const text = await res.text();
    throw new Error(`HTTP ${res.status}: ${text.slice(0, 200)}`);
  }
  return res.json();
}

Wrap this once and use it everywhere. The res.json() error you see is because the 404 body is HTML or empty, not JSON.

Connectez-vous pour dire si ça a marché.

answered 2 months ago
2

If you use this pattern a lot, a tiny wrapper library like ky or ofetch throws on non-2xx by default and adds retries and timeouts. Worth it if you don't want to maintain your own helper.

Connectez-vous pour dire si ça a marché.

answered 2 months ago

Sign in and verify your email to post an answer.