How would you modify fetch to handle HTTP error statuses?

WHAT THIS TESTS: This question checks whether you know the exact rejection semantics of the fetch API. Many developers assume that a 404 or 500 will trigger the catch path, but the specification defines rejection only for network-level failures such as no connectivity, DNS errors, or CORS violations. The interviewer wants to see that you explicitly inspect the Response object before consuming the body, and that you understand the difference between transport failures and application-level error statuses.

A GOOD ANSWER COVERS: First, state clearly that fetch resolves for any HTTP status, including 4xx and 5xx, and only rejects on network errors. Second, describe chaining a then block that checks response.ok, which is true only for statuses in the 200-299 range. Third, explain that if response.ok is false, you should throw a custom error so the single catch block can handle both network failures and HTTP errors uniformly. Fourth, mention that you might also read response.status or response.statusText to enrich the error message, and that you should avoid parsing the body until you have confirmed the response is healthy.

COMMON WRONG ANSWERS: A red flag is saying that fetch rejects on 404 or 500. Another mistake is calling response.json or response.text before checking response.ok, which can cause parsing errors on HTML error pages. Some candidates suggest checking only response.status equals 200, which is too narrow because 201 Created or 204 No Content are also successful. Others forget to throw and instead return the raw response, forcing every consumer to check status manually. Finally, swallowing errors by returning the response object silently when ok is false shows a lack of defensive coding.

LIKELY FOLLOW-UPS: The interviewer may ask how you would handle non-JSON error bodies, how to abort a request with AbortController, or how to retry failed requests with exponential backoff. They might also ask about TypeScript typing for the error payload, how to distinguish transient network errors from permanent HTTP errors in logging, or how to wrap fetch in a reusable HTTP client that centralizes this logic.

ONE CONCRETE EXAMPLE: You might write a fetch call that chains a then handler where you first check if response.ok is false and if so throw a new error including the status code, otherwise return response.json. A following then receives the parsed data, and a catch at the end receives both network failures and the HTTP errors you threw. In this pattern, a 404 causes the thrown error to propagate into the catch block, while a disconnected Wi-Fi also lands in catch, giving you one place to handle all failure modes and keeping your success path clean.

Source: developer.mozilla.org