22 October 2008
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!
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.
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
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 50 percent on your subscription.
James Deer
# October 22, 2008 - 1:23 pm
Haha, love it Elliott mate.
Lisa Goodlin
# October 22, 2008 - 1:24 pm
Oh, I love clever, funny stuff like this. Very nice.
Richard
# October 22, 2008 - 1:24 pm
A nice touch.
Christopher Webb
# October 22, 2008 - 1:27 pm
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!
Chris Danek
# October 22, 2008 - 1:34 pm
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?
Elliott
# October 22, 2008 - 1:37 pm
@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!
Joseph Rueter
# October 22, 2008 - 1:48 pm
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.
Michael Parenteau
# October 22, 2008 - 1:49 pm
I think this is a great idea. You guys keep making good sense… with style. I like it.
Martin Sarsini
# October 22, 2008 - 1:54 pm
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
Greg
# October 22, 2008 - 1:55 pm
Some helpful tips, but come on dude, this twitter “trend” of design (using bird things similar to twitter) has been totally overused.
Garrett Dimon
# October 22, 2008 - 2:24 pm
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!
James McEwan
# October 22, 2008 - 2:32 pm
That’s a genius idea, I’d love to see it catch on.
Anthony Bruno
# October 22, 2008 - 2:36 pm
I dont know if im going to be sending you my phone number, maybe thats just me.
Naz
# October 22, 2008 - 2:42 pm
Dude- this is awesome, so jealous I didn’t think of it first…
Mike
# October 22, 2008 - 2:46 pm
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 :-)
kat neville
# October 22, 2008 - 3:02 pm
What does your 404 and 503 pages look like?
Rob Hayward
# October 22, 2008 - 3:09 pm
like it :)
Jesse Vlasveld
# October 22, 2008 - 6:12 pm
Gotta love the mattinator.com default admin path error message too.
Gregory Belton
# October 22, 2008 - 8:25 pm
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
Elliott
# October 22, 2008 - 8:59 pm
@Greg: That’s a good idea :)
@Jesse: Haha! I’m glad someone found that :D
Jesse Vlasveld
# October 22, 2008 - 11:18 pm
@Elliot it’s not a waste of effort after all is it! :D Keep up the little shiny details, they rock.
Tim Freund
# October 22, 2008 - 11:46 pm
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!
Go away generic error page | Rising Sun Tech Blog
# October 23, 2008 - 8:46 am
[...] Goodbye, old 500 page. [...]
David Owens
# October 23, 2008 - 1:42 pm
@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.
Elliott
# October 23, 2008 - 4:59 pm
@David: Exactly right. I’d rather have 100 spam emails than one irritated user. Gmail to the rescue!
Service Untitled» Blog Archive » Be creative with error pages.
# October 28, 2008 - 1:36 am
[...] Have you looked at your error pages recently? Your 404’s, 500’s, and so on and so forth? Probably not. After reading this blog post, I just updated the 404 error page on my own blog. The idea is that a helpful error page will be more friendly and help prevent customers from getting frustrated. A page that just says “this page can’t be found” or states that there has been a “server error” doesn’t help anyone. Including a form (like the company I linked to chose to do) or some alternatives and information for the customer (like I did) provide customers with a more productive alternative. [...]
Andrew
# October 28, 2008 - 1:47 am
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
Elliott Kember
# October 30, 2008 - 7:39 pm
@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 :)
Andrew
# November 1, 2008 - 8:40 am
Makes sense.
The page does look very nice.
xuxppxxuxyyy
# December 27, 2008 - 12:46 pm
hello it is test. WinRAR provides the full RAR and ZIP file support, can decompress CAB, GZIP, ACE and other archive formats.
jeastalits
# December 29, 2008 - 4:45 am
rhqnvhjmnyiwmclpwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch ;)
jeastalits
# January 3, 2009 - 11:03 am
ezmkramqcznndnpfwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch ;)
404 Best Practices | E Marketing, Web Design, Web Develop, SEO and SEM Egypt Blog
# June 23, 2009 - 1:41 am
[...] [...]
404 Best Practices | Daily Gossips
# June 23, 2009 - 2:55 pm
[...] [...]
404页面最佳实践| Tips| 前端观察
# June 23, 2009 - 3:02 pm
[...] [...]
404页面最佳实践指南 | 互联网的那点事...
# June 24, 2009 - 4:41 am
[...] [...]
404 Best Practices | beriberikix
# June 29, 2009 - 5:20 pm
[...] [...]
مدثر » نکاتی برای داشتن صفحه خطای 404 بهتر
# June 29, 2009 - 5:55 pm
[...] ممکن است در برخی موارد مشکل مواجه با پیغام خطای ۴۰۴ از مشکلی باشد که در سیستم مدیریت محتوای وبسایت ما و یا مشکلاتی باشد که یا از ان بی خبریم پس مهم است که با تهیه یک فرم ارتباط با ما راهی سریع برای ارتباط بر قرار کردن مخاطبان را با مدیر سایت فراهم نماییم [...]