It's time to start week two of our September 2018 #CodePenChallenge!

Last week, you helped navigate the mysterious world of 404 pages, and we were amazed at your creative takes on the theme. Check out our CodePenChallenge: HTTP Status 404 collection to see the Pens from the challenge!

This Week's Status Code: 500 Internal Error

Unexpected is the key word with this weeks never-fun-to-see HTTP status code.

In that sense, it's thought of as a catch-all error code. Your server is executing code in order to respond properly, but something has gone wrong, perhaps a syntax error in the code, thus it fails to execute and an error is thrown.

September's Challenge Sponsor: Jamf

This month we have Jamf as a sponsor. Jamf Now allows you to manage all the Apple devices in your company. For example, remotely configuring all the settings on all of your iPad, iPhone and Mac devices quickly and consistently.

Your Challenge

Design a page that users will see when your web site throws a 500 error.

How to Participate

Create a Pen → and tag it codepenchallenge and the weekly tag cpc-500. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

  1. A 500 error is, in all probability, your fault. There is a bug in the code. Some kind of condition or state of the app isn't doing what it should. How might you help both yourself and the user when this happens?
  2. Can you find a way to play up the unexpected nature of the error? Use randomness or surprise in the design?
  3. Usually the way to fix these kind of errors is to look at logs or stack traces to see what error got thrown and in what file. Rather than designing the 500 error page itself, how might you design that tracing experience?

Resources

  • MDN, as they do for so many web platform features, has a list of HTTP status codes including 500.
  • Where people's error page creativity is so often focused on 404, some good stuff too.
  • The P in HTTP is Protocol. It's like an entire language into itself, almost. You don't really need to know it as a designer or developer, but it is learnable.