Access all our software development training materials here.
Error pages are custom web pages shown when something goes wrong on a website. Instead of displaying ugly server messages like:
404 Not Found500 Internal Server Error403 Forbidden
…you can create professional pages that improve user experience, strengthen branding, and even help with SEO.
Enroll for our software development training programs.
What Are Error Pages?
Error pages are fallback responses shown when a request fails.
Common examples include:
| Error Code | Meaning |
|---|---|
| 400 | Bad Request |
| 401 | Unauthorized |
| 403 | Forbidden |
| 404 | Page Not Found |
| 408 | Request Timeout |
| 429 | Too Many Requests |
| 500 | Internal Server Error |
| 502 | Bad Gateway |
| 503 | Service Unavailable |
| 504 | Gateway Timeout |
Why Custom Error Pages Matter
Without custom pages, users see plain server errors that look broken or suspicious.
Custom error pages help you:
- Maintain professionalism
- Reduce bounce rates
- Guide users back into the site
- Improve trust
- Provide troubleshooting help
- Keep branding consistent
- Add humor or personality
- Improve accessibility
Essential Error Pages Every Website Should Have
1. 404 Page (Most Important)
Shown when a page does not exist.
Good 404 pages should include:
- Friendly message
- Navigation menu
- Search bar
- Homepage link
- Contact link
- Branding
- Optional illustrations/animations
Example
<!DOCTYPE html>
<html>
<head>
<title>404 - Page Not Found</title>
<style>
body {
font-family: Arial;
text-align: center;
padding: 80px;
background: #111;
color: white;
}
a {
color: cyan;
}
</style>
</head>
<body>
<h1>404</h1>
<p>The page you are looking for does not exist.</p>
<a href="/">Return Home</a>
</body>
</html>
Setting Up Error Pages on Different Servers
Apache Server Setup
If you use Apache, configure error pages using .htaccess.
Example
ErrorDocument 404 /404.html
ErrorDocument 403 /403.html
ErrorDocument 500 /500.htmlPlace your custom HTML files in the website root directory.
Directory Example
public_html/
├── index.html
├── 404.html
├── 500.html
└── .htaccessNginx Setup
In your Nginx configuration:
server {
listen 80;
server_name example.com;
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location = /404.html {
root /usr/share/nginx/html;
}
location = /50x.html {
root /usr/share/nginx/html;
}
}
Restart Nginx:
sudo systemctl restart nginxNode.js Express Setup
In Express, middleware handles error pages.
404 Handler
app.use((req, res) => {
res.status(404).sendFile(__dirname + '/404.html');
});500 Error Handler
app.use((err, req, res, next) => {
console.error(err.stack);
res.status(500).sendFile(__dirname + '/500.html');
});React Setup
In React apps, routing libraries handle missing pages.
React Router Example
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import NotFound from "./NotFound";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}
NotFound Component
function NotFound() {
return (
<div>
<h1>404</h1>
<p>Page not found</p>
</div>
);
}
Next.js Setup
404 Page
Create:
pages/404.jsExample:
export default function Custom404() {
return (
<div>
<h1>404</h1>
<p>This page could not be found.</p>
</div>
);
}500 Page
pages/500.jsPHP Setup
Using .htaccess:
ErrorDocument 404 /404.phpThen create:
<?php
http_response_code(404);
?>
<h1>404 Page Not Found</h1>
Django Setup
settings.py
DEBUG = False
ALLOWED_HOSTS = ['yourdomain.com']
urls.py
handler404 = 'myapp.views.custom_404'
handler500 = 'myapp.views.custom_500'
views.py
from django.shortcuts import render
def custom_404(request, exception):
return render(request, "404.html", status=404)
def custom_500(request):
return render(request, "500.html", status=500)
Laravel Setup
Laravel uses exception rendering.
Create:
resources/views/errors/404.blade.php
Example:
<h1>404</h1>
<p>Page not found.</p>Laravel automatically loads it.
Designing Effective Error Pages
Include Clear Messaging
Bad:
Error 404Better:
Oops! We couldn’t find that page.Keep Branding Consistent
Use:
- Your logo
- Brand colors
- Typography
- Dark/light theme consistency
Add Navigation
Always provide:
- Home button
- Search
- Popular links
- Contact support
Add Humor Carefully
Many tech companies use humorous pages.
Examples:
- Space-themed lost astronaut
- Broken robot
- Cyberpunk glitch visuals
But avoid overdoing it on serious websites like banking or healthcare platforms.
SEO Best Practices
Return Correct Status Codes
A 404 page must still return:
HTTP 404NOT:
HTTP 200Returning 200 OK for missing pages confuses search engines.
Avoid Redirecting All Errors to Homepage
Bad practice:
404 → homepage
Google may treat this as a soft 404.
Add Helpful Internal Links
Guide users toward:
- Articles
- Dashboard
- Documentation
- Products
Accessibility Best Practices
Your error pages should:
- Use readable fonts
- Have sufficient contrast
- Be keyboard navigable
- Work on mobile devices
- Support screen readers
Example:
<h1 aria-label="Page not found">404</h1>Advanced Error Handling
Logging Errors
Track:
- Broken URLs
- Server failures
- User behavior
Tools:
- Sentry
- LogRocket
- Datadog
- New Relic
This helps identify:
- Broken links
- Crashing routes
- Failed deployments
Dynamic Error Pages
Instead of static pages, generate helpful content dynamically.
Example:
- Suggest similar pages
- Show recently visited pages
- Recommend articles
CDN-Level Error Pages
Services like:
- Cloudflare
- AWS CloudFront
- Fastly
…allow edge-level error pages.
This means users still see branded pages even if your origin server is down.
Security Considerations
Never expose:
- Stack traces
- SQL queries
- File paths
- API keys
- Server versions
Bad:
Fatal Error in /var/www/html/db.php line 24Good:
Something went wrong. Please try again later.Log technical details internally instead.
Example Professional 404 Structure
-----------------------------------
LOGO
404 - Page Not Found
Sorry, we can’t find that page.
[ Search Bar ]
[ Return Home ]
Popular Articles:
- Documentation
- Tutorials
- Contact Support
-----------------------------------
Testing Error Pages
Always test manually.
Test 404
Visit:
example.com/randomfakepageTest 500
Temporarily trigger an application error in development.
Common Mistakes
| Mistake | Why It’s Bad |
|---|---|
| Returning 200 instead of 404 | SEO problems |
| Showing raw server errors | Security risk |
| Infinite redirect loops | Breaks UX |
| Missing mobile responsiveness | Poor usability |
| No navigation links | Users leave |
| Heavy animations | Slows loading |
| Too much humor | Can hurt credibility |
Best Practices Summary
Always:
- Create custom 404 and 500 pages
- Return proper HTTP status codes
- Keep branding consistent
- Include navigation
- Log errors internally
- Make pages mobile-friendly
- Keep messaging clear
Never:
- Leak server information
- Redirect every error to homepage
- Ignore accessibility
- Use untested error handlers
Final Thoughts
Error pages are part of professional web architecture, not an afterthought.
Well-designed error pages can:
- Retain frustrated users
- Improve trust
- Help debugging
- Strengthen branding
- Improve overall UX
A polished error-handling system is a mark of a mature application and a skilled developer.
About the Author
Latest tech news and coding tips.
