Lesson 6: What to say when something goes wrong

Lesson objectives:

• Distinguish a client error (4xx) from a server error (5xx).
• Recognize a redirect (3xx) and explain why it happens.
• Explain a broken page load in plain language.

Previous << 5

A broken page is not a mystery if you can read the response

When a page fails to load, the first digit of the status code tells you who to blame. The classes you learned in Lesson 3 are not just academic; they are the fastest diagnostic tool you have.

• 2xx — the request worked.
• 3xx — the browser is being sent somewhere else (redirect).
• 4xx — the browser made a mistake (client error).
• 5xx — the server broke while trying (server error) ¹.

Explanation

Client errors: 4xx

A 4xx status means the server received the request but could not fulfill it because something about the request was wrong. The most famous is 404 Not Found: the URL points to a resource that does not exist ². Another is 403 Forbidden: the server understood the request but refuses to process it, and the refusal is tied to application logic such as insufficient permissions ³.

Next to it sits 401 Unauthorized, and the difference is the useful part: with a 401, authenticating is the fix; with a 403, authenticating or re-authenticating makes no difference — repeating the same request will fail the same way ³. A site may even answer 404 where 403 would be truthful, when admitting that a resource exists would already leak something ³.

Server errors: 5xx

A 5xx status means the server itself had a problem. 500 Internal Server Error is the generic "something went wrong on our side" message ⁴. These are usually problems the website owner has to fix.

Redirects: 3xx

A 3xx status means the resource has moved. The server sends a Location header telling the browser where to go next, and the browser immediately loads that URL — at the cost of one extra round trip ⁵. Common ones are 301 Moved Permanently and 302 Found ¹.

The four redirect codes differ on two independent questions ⁵:

• Is it permanent? 301 and 308 are permanent, and crawlers update their stored URL. 302 and 307 are temporary, and crawlers keep the original ⁵.
• Does the method survive? This is the part people miss. With 301 and 302, GET is unchanged but other methods may or may not be rewritten to GET by the user agent — the body can be lost ⁵. 307 Temporary Redirect and 308 Permanent Redirect exist precisely to remove that ambiguity: method and body are not changed ⁵.

So 307 is not "302 but newer" — it is the version that is safe to put in front of a POST. And 303 See Other is the opposite choice on purpose: it changes other methods to GET so that refreshing the page after a POST does not re-trigger the operation ⁵.

Errors the status code cannot explain

Some failures are not in the status code at all, because nothing was refused.

A CORS error is the standing example. Cross-Origin Resource Sharing is a header-based mechanism by which a server tells the browser which other origins — combinations of domain, scheme, and port — may load its responses ⁶. The rule it relaxes is the same-origin policy, which browsers apply to requests initiated from scripts ⁶. The key fact for debugging: the server usually answered normally, often 200 OK, and it is the browser that withholds the response from the script because the Access-Control-Allow-Origin header did not permit that origin ⁶. Nothing is broken on the server, and no server log will show a rejection. For some requests the browser sends a preflight request first — an OPTIONS probe asking whether the real request will be permitted ⁶.

HTTPS is the other place scope gets over-estimated. It is HTTP wrapped in TLS, which encrypts the communication between client and server ⁷. Encrypted means the URL path, headers, cookies, and bodies are unreadable in transit. It does not mean the exchange is invisible: the destination has to be resolvable and reachable for the connection to be made at all, so which server you connected to is not part of what TLS hides ⁷. HTTPS also says nothing about whether the site is trustworthy — only that the channel to it is encrypted ⁷.

Worked example (follow along)

You try to visit a news article and see one of these:

• 404 Not Found — the article was deleted or the URL has a typo. You, the user, can check the URL or go back to the homepage.
• 500 Internal Server Error — the news site's server is having trouble. You cannot fix it; the site owner can.
• 301 Moved Permanently — the article has a new URL. The browser will automatically follow the redirect to the new location.

Your turn (faded example)

For each status code, write the class and who should fix it:

Summary + what's next

You can now read an HTTP exchange from both sides: the request (method, path, headers) and the response (status code, body). You can open the Network panel, find a real request, and explain what happened. If the status code is 4xx, look at the request; if it is 5xx, look at the server; if it is 3xx, the browser is following directions.