If you haven’t’ implemented a custom error page for your web application, then you must consider doing it for many reasons, including below.

Branding – Show customized messages with your brand logo and a few line of messages to make visitors aware of the problem and link to contact the respective team. Vulnerability – If you are working on the PCI DSS compliance environment, then you must consider fixing information leakage vulnerability, which is in the default product error page. Better UI – It’s all about better user experience and that you can provide on an error page too. Ex– if a user requested content doesn’t exist, then the webserver will serve the 404-default error page, and the most likely user will close the session. How about having a custom page where a user can search or show related items and proper navigation?

Sounds good? Well, I am sure in this way you are retaining visitors to continue on a website and improve bounce rates. Still not convinced? Let’s take a look… So this is the default “404 not found” page from Nginx

What would you do when you get this page? Most likely, you will close that. And this is the custom “404” page which I have implemented.

Looks much better? Most likely, you will either go to “Home Page” or click on any of the searches shown below. That’s how the custom page helps. Now you know the advantage, and it’s time to implement them. You can have a custom page in a number of HTTP status code events. I would think of the following as essential.

404 – Not Found 403 – Forbidden 500 – Internal Server Error 503 – Service Unavailable 504 – Gateway Timeout

Pre-requisite I assume you have already built a custom page. If you need some 404 images, you can get it from Elements.

Implementing in Apache HTTP

There are multiple ways to do this. Ex – you can either do this using Rewrite or ErrorDocument directive. I will explain how to do with ErrorDocument directive.

Login into Apache HTTP server Go to apache conf folder where you have httpd.conf file Take a backup of httpd.conf file Modify the httpd.conf and add ErrorDocument as below

Save the httpd.conf and restart the Apache server Try to access something, which doesn’t exist, and you should have a custom error page instead of the default one. Note: you may also redirect to some other URL in the event of these HTTP status return codes. For redirection, you can just add a URL next to each code, like below.

Implementing in Nginx

Login into Nginx server Go to nginx.conf file location As usual, take a backup of conf file and add following under http block

Save the file and restart Nginx to get this reflected.

Conclusion

You see, this tiny change can have a big impact, so why not implement it?

Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 5Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 75Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 47Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 8Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 60Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 25Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 56Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 57Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 78Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 2Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 17Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 16Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 2Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 23Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 47Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 84Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 29Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 70Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 18Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 58Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 51Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 8Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 8Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 74Implement Custom Error Page in Apache   nginx   Using ErrorDocument   error page - 26