DeepFrontend
Practice ArenaBlogSign in
Go Pro
DeepFrontend

Interview-grade learning paths and hands-on practice for mid-to-senior engineers. Master internals, patterns, and system architecture with runnable code.

All systems operational

Core Courses

  • -JavaScript Internals
  • -React Reconciliation
  • -TypeScript rigor
  • -Next.js Caching
  • -Node.js Event Loop
  • -System Design
  • -Web Security
  • -CSS & Page Layouts

Explore

  • Learning Paths
  • Practice Arena
  • Pricing Options
  • HTML Sitemap

Resources

  • Privacy Policy
  • Terms of Service
  • Email Support

© 2026 DeepFrontend. All rights reserved.

Expert learning environments for web engineering teams.

← All challenges
core15 min

fetchJson: fetch with proper error handling

Implement fetchJson(fetch, url)

The single most common mistake in real API code: assuming fetch rejects on an HTTP error. It doesn't — fetch only rejects on a network failure. A 404 or 500 still resolves, with response.ok === false. Forgetting to check leads to trying to .json() an error page.

Write fetchJson(fetch, url) that:

  • Calls fetch(url).
  • If response.ok is false, throws an error whose message includes the status code (e.g. "Request failed with status 404").
  • Otherwise, returns the parsed JSON body.
const data = await fetchJson(fetch, "/api/users/1"); // { id: 1, name: "Ada" }
await fetchJson(fetch, "/api/missing"); // throws "Request failed with status 404"

fetch is passed in as an argument here (rather than using the global) so it's easy to test — that's also a genuinely good pattern for testable API code.

Run your code to see results.

Stuck? This challenge exercises:

api.restjavascript.async-await