Level Up Your 404, 500, And Maintenance Pages
We're really excited to announce the launch of a free tool we're calling Better Error Pages! Better Error Pages is a mini-site that helps you build customizable 404, 500-level, and maintenance pages in 60 seconds.
Here's how it works:
- We ask you a few questions about your company (things like Homepage URL and Support Email Address).
- You have the opportunity to personalize the look of your error pages.
- When you're done, we'll send you a link to download the flat HTML files for your shiny new 404, 503 and Maintenance pages.
You should check out Better Error Pages for yourself...it's free!
Why We Built Better Error Pages
We built Better Error Pages for the same reasons we built StatusPage.io: we saw an opportunity to take all of the work out of doing something that people wanted to do but just didn't have the time. Error pages are always the first thing to get neglected, but professional, informative error pages lend legitimacy and confidence to a product. We wanted to make it so easy that people wouldn't think twice when it came to error pages.
We use tons of free and open-source tools at StatusPage.io. This is our way of giving something back to the community that's helped us get to where we are today.
Karma Based Marketing
I would be lying if I said we didn't think we'd get some value out of releasing this.
Colin from Customer.io wrote a post calling things like this "Karma Based Marketing". Here's how Colin describers Karma Based Marketing.
Your Karma based marketing efforts are about building trust with people. Yes, ultimately I hope they’ll lead to sales for you. But today, as you help prospective customers solve their problems, help them as humanly as possible with genuine care. Good things will happen later. I promise.
Better Error Pages is a perfect example of Karma Based Marketing. It's a completely free tool to use, even if you're not a StatusPage.io customer. Our hope is that people will have a good experience with our brand, and when the day comes that they realize they need a status page, they'll think of us.
At the end of the day, people prefer doing business with people they like. We'll be investing more money and development cycles on similar projects in the future.
Built With React.js
If you haven't seen it, the Better Error Pages user interface boils down to two elements: the area where you enter information and customize your error pages, and a live-preview area so that you can see what your error pages will look like as you customize them. In the first iteration, the live-preview section was just a Rails view that was rendered inside an iframe. When the user changed a value in the inputs section, we would refresh the iframe to show the updated version of their error pages.
This just wasn't cutting it. It was slow. It didn't feel good. We decided that if we were going to take some time away from the core product to build this free tool, we wanted it to be a joy to use.
Here are some of the things we thought would be necessary in order to achieve that:
- The user shouldn't have to wait for an iframe to refresh to see the effects of a change they make.
- When the user changes the background color it should smoothly transition to that instead of being choppy.
We decided that the best way to achieve this was to rewrite the whole thing using React.js. This would allow us to automatically update the live-preview section as you made changes and give us just enough structure to make a clean, maintainable application.
React was very easy to pick up and a joy to work with. There's a rails-react gem that defines a view helper that makes it super easy to pass React some data from the service and render it on the page. Our plan moving forward is to build new features using React and to one day port everything to be driven off of React.
Plans For It Moving Forward
We have some pretty cool plans for Better Error Pages moving forward. One thing we want to do is add some functionality to the customization flow that doesn't already exist:
- The design of each template will be slightly tweaked to accommodate for the addition of a company logo and users will be able to upload the logo instead of hosting it themselves.
- Users will have the ability write custom css and have that included in their error pages.
- Users will have more templates to choose from.
It turns out that, depending on how you're hosting your web service, configuring your servers to correctly serve error pages under the right circumstances can be a challenge. To address this, we want to provide a set of instructions for how to actually get the error pages working with different of hosting situations like Heroku, Wordpress, and various other web servers.
At the end of the day, our goal with this site is to create an in-depth, fully featured resource for error pages. One of the big inspirations in doing this has always been the beautiful creative error pages sprinkled around the internet, and enabling everyone to create their own pages with similar quality and polish. If we created a featured error pages section, would you share your favorites?