IndustryGoodbye, old 500 page.

writes on October 22, 2008

Share with your friends


Recently, we’ve been compiling a few of our websites together. This is a really cool idea, because it allows us to use more of our data in more intelligent ways, and to keep a cleaner, more DRY codebase. It also means we can start to replace some of the parts of our systems that possibly aren’t as helpful as they could be. Case in point: the 500 page!
The old error page.

Now, don’t get me wrong – this page is pretty informative. It clearly shows you that something’s gone wrong. However, it’s not very helpful. It’s simply a message. So I thought to myself, “What would I like to see on an error page? Clearly this error isn’t my fault – so I should have some options here.”

Changing this error page was, in my mind, a big thing. This error message has been at the company longer than I have. Does it get a severance package? I mean, it doesn’t take Fridays off. It never turns up late. It always stays behind and works while we have parties. It doesn’t even play Guitar Hero. Short of monit, it’s probably one of our most diligent employees. Even if it stopped working, I’m sure it’d show itself as its own error page. That’s commitment… or, possibly, infinite and fatal recursion.

So what could replace this trusty workhorse of a page? I put myself in a user’s shoes. Well, I thought to myself, I’d really like to notify the  developer directly. That would mean that this might get fixed, stat. Does that mean a phone number on the page? An anonymous email address? Both of these things seem far too difficult. For instance, I cannot work the Carsonified desk phones correctly; they have many, many buttons. Once, my particular unit started typing letters instead of numbers. And OSX seems to enjoy stalling whatever I’m doing by opening every time I click a mailto link.

Nah, let’s put a FORM on it. One that sends the message to an independently-hosted site to process. That way, if the site were to go down, Dreamhost-style I’ll still be able to get hate-mail from all our users.

That’s not going to be enough, though. If I’m clearly not to blame for this evident failure, I’d like to know who is… so there should be some sort of backup contact details. Details that clearly aren’t just a blatant ploy for fame, admiration and Twitter followers.

The new error page! Exclamation marks! Exciting!

Now, the worst part about making a 500 page is that, if you do your job right, nobody will ever see it. But things do inevitably go wrong, and a good 500 page is a useful tool to have around for when they do. This is 2008 – hiding behind a blank error page just isn’t enough. If you care about your users, and your application, you need to know when stuff goes wrong.

Current number of 500 page emails: 2

34 Responses to “Goodbye, old 500 page.”

  1. Haha, love it Elliott mate.

  2. Oh, I love clever, funny stuff like this. Very nice.

  3. What I love about it is that you take the ‘impersonal-ness’ out of a 500 page and attach a name, a face, and many ways to contact him. It is definitely a nice touch. Kudos to you!

  4. I’m a huge fan of customized error pages and yours seems to be very well executed.

    One question though – how do you handle the initial self-sent email? I assume not via the same script that handles displaying this 500 error message as it might possibly end up in an endless loop of doom. Default webserver logging feature perhaps?

    By the way, would server fall back to the default 500 error message in such case?

  5. @Chris: It’s handled by Rails – if the server’s totally down, the HTML page is delivered flat. However, we have other software installed to let us know if that happens – like monit!

  6. Oh, snap. Thanks for your attention to the user experience. It seems we are all excited to work with any company or service that steps forward and plans for ways to deal with problems or the possibility of problems by taking credit, offering a course of action and doing that with personality. Your customers must love it?

    I wonder what it would look like for physical stores to do similar. Maybe an in store kiosk or a landing page for an in store only webpage or maybe and in store “something is screwed up” sms number?

    The trick I see is that most corporations, while they legally act with the rights and responsibilities of a person, they don’t have a conscience and therefore most lack personality. If your body copy and image lacked personality it seems to me this would be just another 500 page but this one with the bold request for a telephone number.

    You have not done that, well done all.

  7. I think this is a great idea. You guys keep making good sense… with style. I like it.

  8. Great! But what percentage of your users knows what that “500” means? If it is a website for geeks like us I am sure it’s fine

  9. Some helpful tips, but come on dude, this twitter “trend” of design (using bird things similar to twitter) has been totally overused.

  10. I love it. It’s so simple, but entirely changes the experience of getting an error. Of course, the personal face an accountability really help as well. Everyone needs to do something like this. Officially adding to my todo list for Sifter. Thanks!

  11. That’s a genius idea, I’d love to see it catch on.

  12. Anthony Bruno on October 22, 2008 at 2:36 pm said:

    I dont know if im going to be sending you my phone number, maybe thats just me.

  13. Dude- this is awesome, so jealous I didn’t think of it first…

  14. Nice. But it’d be better if the grammar on the right worked, too. You need some kind of punctuation after the “help” – an exclamation mark, a full stop. (Not a comma..). Oh, and a comma after “It’s exploded”.

    Sorry to be picky :-)

  15. What does your 404 and 503 pages look like?

  16. Gotta love the default admin path error message too.

  17. Gregory Belton on October 22, 2008 at 8:25 pm said:

    Hi, Looks great, but from a security perspective, isn’t this a bit loose?

    If some nasty person found a way to break your website, they could then spam you something silly using that form you’ve put on that page. You’d want to put a CAPTCHA device on there at least, to stop that.


  18. @Greg: That’s a good idea :)

    @Jesse: Haha! I’m glad someone found that 😀

  19. @Elliot it’s not a waste of effort after all is it! 😀 Keep up the little shiny details, they rock.

  20. Very cool. I just wrote up an article on the mechanics of creating a custom 500/404 page for TurboGears 2 applications, but I didn’t put nearly as much thought into the content of the custom 500/404 page. Since my applications email me automatically when an error occurs, I didn’t think about putting a form on the page, but that form really gives the user a better sense of control over the situation. Good work!

  21. @Greg I think that if somebody wanted to spam the Carsonified team there would probably be easier ways of doing it. I imagine their email addresses are pretty easy to guess.

    Besides giving me a CAPTCHA form at that point would undo all the good work you had done with the rest of the page.

  22. @David: Exactly right. I’d rather have 100 spam emails than one irritated user. Gmail to the rescue!

  23. Error page looks sweet

    But – Your 500 page didn’t already email a very detailed error reporting, variables dump to development?

    The form seems redundant when the server itself can do a far better more consistent job of logging the error

  24. @Andrew: Yes, it did. It tells me everything I need to know about who’s trying to do what. But it’s always useful to get an email directly from the user so I can get in touch straight away and help them out. It’s just another way of getting in touch when things go wrong – and it’s certainly not mandatory :)

  25. Makes sense.

    The page does look very nice.

Leave a Reply

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more