Website error pages are perhaps one of the most overlooked pieces of a fully rounded website. Not only are they important but they give you the opportunity to have a little fun. Although many web developers rely on server logs to keep an eye out for hits on error pages, I’m going to take a different approach by using a PHP generated email. In addition, we will spice up the design a bit, add basic navigation and link to the website sitemap.

About Error Pages

The most common error page – the one in which you are most likely to be familiar with – is the “404 Not Found page”. More people encounter this type of error page than any other. Other common error messages you may have come across are 500 Internal Server Error, 400 Bad Request or 403 Forbidden. Wondering what the number is for? It simply refers to the HTTP code.

Default error pages are quite boring (as you can see above) and offer no purpose to visitors other than letting them know some boring error happened. For these reasons, it is a great idea to provide custom pages for the most common errors encountered. This tutorial will only cover two: the “404 Not Found” and “403 Forbidden”.

Check for custom error page support

First, check to make sure your hosting provider allows you to use your own error pages. Almost all of them do, and most of them even provide a configuration area within your control panel to help you quickly create the pages. In this tutorial we will configure an Apache web server (the most common). This is easier than you might think.

Configure .htaccess

Next, connect to your server via FTP or control panel and navigate to the document root directory (usually www or public_html) which contains your website files. We will be looking for the .htaccess file. It is sometimes hidden so make sure you are viewing all files including hidden ones. If your server doesn’t have one, you can create one using any text editor. Make sure to make a backup of the .htaccess file if your server already has one.

Add the following lines to your .htaccess file:

ErrorDocument 404 /error/404.php
ErrorDocument 403 /error/403.php

The first half (ErrorDocument 404) is telling the server we are going to define the location of the 404 error document. The second half defines the actual location of the error document. In this case we will put it in the “error” directory and call them 404.php and 403.php, respectively.

Now save the .htaccess file and upload it to the document root directory.

Design the Custom Error Pages

It is best to stay with the same design as your website already uses so that you don’t confuse your visitors and risk losing them. You should also include helpful elements such as a polite error message, suggested links, a search feature, or a link to your sitemap. These features will depend on the level of content your website provides and what you feel will be most helpful.

As you can see below, the 404 Not Found page for Nettuts+ has stated the error and emphasized the search feature by including it in the body beneath the error message. You could take this a step further by including a short list of links to possible pages which might encourage the visitor to continue exploring more of the site (keep it simple and short though) -or even a humorous image (every one likes laughing right?). For small websites it may be a good idea to include a visible sitemap as well.

Here is something I put together for this tutorial that you can use for your website as well (included in the download above). It’s very simple so you will be able to put the content of it directly into your existing website template. As you can see, I attempted to include a little bit of a humorous element while also stating the error politely and including some options to help the visitor either find what they were looking for or continue browsing the website.

You’ll notice it does not specify the HTTP error code in the body of the page. Instead I chose to only use the error code in the title of the page. The reason for this is to keep things as simple and user friendly as possible. Most people don’t care what 404 or 403 means, they want to know what’s going on in plain English. For people who want the error code, it is still available via the title.

If you want to see some really great 404 designs visit:

• http://www.smashingmagazine.com/2009/01/29/404-error-pages-reloaded-2/
• http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/
• http://www.smashingmagazine.com/2007/07/25/wanted-your-404-error-pages/
• http://blogof.francescomugnai.com/2008/08/the-100-most-funny-and-unusual-404-error-pages/

The Auto-Mailer PHP and Why We Will Use Email Notification

This is the part of the tutorial in which some web guru’s might argue with. You can use your web server’s logs to check for error pages and much, much more. Why do I choose email notifications?

1. I don’t want to log into my server every day and dig through all that extra information.
2. I am available by email almost literally all day, the fastest way to reach me is email (or twitter). With this in mind, I want to know about 404 and 403 errors fairly quick so email is best.
3. An increasing number of people are starting websites, while most of those people know almost nothing about web hosting let alone server logs. These people will only be running small sites; so email is ideal.
4. Being notified right away allows me to quickly take action if a website of mine is being “harvested” (ThemeForest templates), if someone is attempting to access something restricted repeatedly or if I have a broken link somewhere.

So with all that said, let’s get on with the code shall we!

The Code

First, we will create a file named error-mailer.php which will be used to collect information about our visitor and send the email. Once you have created the file we will start by specifying our email and email settings.

<?php

# The email address to send to
	$to_email = 'YOUR-EMAIL@DOMAIN.com';

# The subject of the email, currently set as 404 Not Found Error or 403 Forbidden Error
	$email_subject = $error_code.' Error';

# The email address you want the error to appear from
	$from_email = 'FROM-EMAIL@DOMAIN.COM';

# Who or where you want the error to appear from
	$from_name = 'YourDomainName.com';

Then we will collect information about our visitor such as IP address, requested URI, User Agent, etc. The following code will collect that information.

# Gather visitor information
    $ip = getenv ("REMOTE_ADDR");                // IP Address
    $server_name = getenv ("SERVER_NAME");       // Server Name
    $request_uri = getenv ("REQUEST_URI");       // Requested URI
    $http_ref = getenv ("HTTP_REFERER");         // HTTP Referer
    $http_agent = getenv ("HTTP_USER_AGENT");    // User Agent
    $error_date = date("D M j Y g:i:s a T");     // Error Date

Now we will write the script to email the information to us with the details specified earlier.

# Send the email notification
require_once('phpMailer/class.phpmailer.php');
    $mail = new PHPMailer();

    $mail->From = $from_email;
    $mail->FromName = $from_name;
    $mail->Subject = $email_subject;
    $mail->AddAddress($to_email);
    $mail->Body =
    "There was a ".$error_code." error on the ".$server_name." domain".
    "\n\nDetails\n----------------------------------------------------------------------".
    "\nWhen: ".$error_date.
    "\n(Who) IP Address: ".$ip.
    "\n(What) Tried to Access: http://".$server_name.$request_uri.
    "\n(From where) HTTP Referer: ".$http_ref.
    "\n\nUser Agent: ".$http_agent;

    $mail->Send();

?>

We are using the phpMailer class to do this as demonstrated by Jeffrey via the ThemeForest blog to create a nice AJAX contact form. This version of the phpMailer class is for PHP 5/6 so if your server is running PHP 4 you will need to use the corresponding version by downloading it here.

404.php and 403.php Error Pages

The last thing we need to do is customize the error pages we designed earlier by sending the proper headers and set the $error_code variable by inserting the following code at the beginning of each page respectively (separated by ——-).

<

<?php 

header(“HTTP/1.0 404 Not Found”);
$error_code = ’404 Not Found’;		// Specify the error code
require_once(‘error-mailer.php’);	// Include the error mailer script

?>
——-
<?php 

header(“HTTP/1.0 403 Forbidden”);
$error_code = ’403 Forbidden’;		// Specify the error code
require_once(‘error-mailer.php’);	// Include the error mailer script

?>

What we are doing here first is setting the correct HTTP header to return 404 Not Found and 403 Forbidden, respectively. When search engines accidentally land on this page we want to make sure they know what kind of page it is, instead of thinking that it's a normal web page named 404.php or 403.php.

Then we specify the error code to be used in the mailer script and include the mailer script so it can do its work. This way if we make a change to the mailer script, we only need to edit one file instead of two or more (if you setup additional custom error pages).

Conclusion

There you have it! Your own custom error pages that are search engine friendly, and let you know via email when you've had a visitor as well as all the information you will need to fix any problems. A few last things to consider:

1. Internet Explorer requires error pages that are at least 512 byes in size (if you use the example files you'll be fine)
2. High traffic websites have the potential to generate A LOT of emails so make sure you setup some sort of email filter for these error notifications so they don't flood your inbox. I use Gmail so I just have a label and filter setup for these emails.

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.