JavaScript Academy · Lesson

Handling Errors and Status Codes

Check response.ok and handle failures.

Lesson 3 of 413 steps

Handling Errors and Status Codes is a free JavaScript Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.

Fetch Does Not Reject on HTTP Errors

A surprising gotcha: fetch only rejects on network failures. A 404 or 500 response still resolves successfully. You must check the status yourself.

Checking response.ok

response.ok is true only for status codes in the 200-299 range. Use it to detect HTTP errors.

const response = await fetch(url);
if (!response.ok) {
  console.log("HTTP error:", response.status);
}

Reading the Status Code

response.status gives the numeric code and response.statusText a short message. Branch on these to handle specific cases.

if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");

Throwing on Bad Status

A clean pattern is to throw an Error when the response is not ok, so a single catch handles both network and HTTP failures.

if (!response.ok) {
  throw new Error("Request failed: " + response.status);
}

Wrapping in try/catch

With async/await, wrap the whole flow in try/catch. Network errors reject the Promise and land in catch; your thrown HTTP error does too.

try {
  const res = await fetch(url);
  if (!res.ok) throw new Error("Status " + res.status);
  const data = await res.json();
} catch (err) {
  console.log("Failed:", err.message);
}

Distinguishing Error Types

A rejected fetch usually means the server was unreachable, DNS failed, or CORS blocked it. A non-ok response means the server answered but with an error. Handle them differently when it matters.

Reading Error Bodies

APIs often return JSON describing the error. Read it before throwing so you can surface a useful message.

if (!res.ok) {
  const errBody = await res.json().catch(() => ({}));
  throw new Error(errBody.message || ("Status " + res.status));
}

Common Status Codes

Know the families: 2xx success, 3xx redirect, 4xx client error (you sent something wrong), 5xx server error (their fault). Fetch auto-follows most redirects.

A Reusable Helper

Centralize the check in one helper so every call site gets consistent error handling.

async function getJSON(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error("HTTP " + res.status);
  return res.json();
}

Retrying Transient Failures

For flaky networks you may retry on 5xx or network errors. Keep retries small and add a delay to avoid hammering the server.

for (let i = 0; i < 3; i++) {
  try { return await getJSON(url); }
  catch (e) { if (i === 2) throw e; }
}

Surfacing to the User

Catch errors at the UI layer to show a friendly message instead of a blank screen. Never let an unhandled rejection silently swallow a failed request.

getJSON(url)
  .then(render)
  .catch(() => showToast("Could not load data"));

Quick Check

Fetch error handling.

Answer it in the interactive lesson

Recap

Fetch rejects only on network failures, so always check response.ok/response.status and throw on bad statuses. Wrap calls in try/catch, read error bodies for messages, centralize the check in a helper, and surface friendly errors in the UI.

Free to start

Learn JavaScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 59
Lessons: 200

Start learning free View the full course

Frequently Asked Questions

Is the “Handling Errors and Status Codes” lesson free?

Yes — any 3 lessons of the JavaScript Academy learning path, including “Handling Errors and Status Codes”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.

What will I learn in “Handling Errors and Status Codes”?

Check response.ok and handle failures. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

How long does the “Handling Errors and Status Codes” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy