HTTP basics: reading requests and responses in the browser · Lesson 6 of 6

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) 1.

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 2. Another is 403 Forbidden: the server knows who you are but refuses to give you the resource.

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 3. 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. Common ones are 301 Moved Permanently and 302 Found 1.

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:

Status codeClassWho fixes it?
4044xx client errorThe person who provided the wrong URL, or the site owner who removed the page
5005xx server errorThe server owner or developer
3013xx redirectUsually no one; the browser follows the redirect

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.

Footnotes

  1. MDN: HTTP response status codes — https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status ↩ ↩2

  2. MDN: 404 Not Found — https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/404 ↩

  3. MDN: 500 Internal Server Error — https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/500 ↩

Exercises

01

Visit a URL you know is wrong, such as a made-up page on a real domain (e.g., https://example.com/this-page-does-not-exist). What status code do you see in the Network panel?

Level 1 (warm-up)
Done criteria · checked locally
02

Explain, in a message you could send to a non-technical friend, the difference between a 404 and a 500.

Level 2 (advanced)
Done criteria · checked locally