Goodbye, old 500 page.

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 Mail.app 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

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

0 comments on “Goodbye, old 500 page.

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

  2. 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?

  3. @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!

  4. 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.

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

  6. 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!

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

  8. 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.

    Greg

  9. 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!

  10. Pingback: Go away generic error page | Rising Sun Tech Blog

  11. @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.

  12. Pingback: Service Untitled» Blog Archive » Be creative with error pages.

  13. 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

  14. @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 :)

  15. rhqnvhjmnyiwmclpwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch ;)

  16. ezmkramqcznndnpfwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch ;)

  17. Pingback: 404 Best Practices | E Marketing, Web Design, Web Develop, SEO and SEM Egypt Blog

  18. Pingback: 404 Best Practices | Daily Gossips

  19. Pingback: 404页面最佳实践| Tips| 前端观察

  20. Pingback: 404页面最佳实践指南 | 互联网的那点事...

  21. Pingback: مدثر » نکاتی برای داشتن صفحه خطای 404 بهتر