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.
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 |
Without custom pages, users see plain server errors that look broken or suspicious.
Custom error pages help you:
Shown when a page does not exist.
<!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>
If you use Apache, configure error pages using .htaccess.
ErrorDocument 404 /404.html
ErrorDocument 403 /403.html
ErrorDocument 500 /500.htmlPlace your custom HTML files in the website root directory.
public_html/
├── index.html
├── 404.html
├── 500.html
└── .htaccessIn 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 nginxIn Express, middleware handles error pages.
app.use((req, res) => {
res.status(404).sendFile(__dirname + '/404.html');
});app.use((err, req, res, next) => {
console.error(err.stack);
res.status(500).sendFile(__dirname + '/500.html');
});In React apps, routing libraries handle missing pages.
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>
);
}
function NotFound() {
return (
<div>
<h1>404</h1>
<p>Page not found</p>
</div>
);
}
Create:
pages/404.jsExample:
export default function Custom404() {
return (
<div>
<h1>404</h1>
<p>This page could not be found.</p>
</div>
);
}pages/500.jsUsing .htaccess:
ErrorDocument 404 /404.phpThen create:
<?php
http_response_code(404);
?>
<h1>404 Page Not Found</h1>
DEBUG = False
ALLOWED_HOSTS = ['yourdomain.com']
handler404 = 'myapp.views.custom_404'
handler500 = 'myapp.views.custom_500'
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 uses exception rendering.
resources/views/errors/404.blade.php
Example:
<h1>404</h1>
<p>Page not found.</p>Laravel automatically loads it.
Bad:
Error 404Better:
Oops! We couldn’t find that page.Use:
Always provide:
Many tech companies use humorous pages.
Examples:
But avoid overdoing it on serious websites like banking or healthcare platforms.
A 404 page must still return:
HTTP 404NOT:
HTTP 200Returning 200 OK for missing pages confuses search engines.
Bad practice:
404 → homepage
Google may treat this as a soft 404.
Guide users toward:
Your error pages should:
Example:
<h1 aria-label="Page not found">404</h1>Track:
Tools:
This helps identify:
Instead of static pages, generate helpful content dynamically.
Example:
Services like:
…allow edge-level error pages.
This means users still see branded pages even if your origin server is down.
Never expose:
Bad:
Fatal Error in /var/www/html/db.php line 24Good:
Something went wrong. Please try again later.Log technical details internally instead.
-----------------------------------
LOGO
404 - Page Not Found
Sorry, we can’t find that page.
[ Search Bar ]
[ Return Home ]
Popular Articles:
- Documentation
- Tutorials
- Contact Support
-----------------------------------
Always test manually.
Visit:
example.com/randomfakepageTemporarily trigger an application error in development.
| 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 |
Error pages are part of professional web architecture, not an afterthought.
Well-designed error pages can:
A polished error-handling system is a mark of a mature application and a skilled developer.
Latest tech news and coding tips.
At the heart of every programming language lies a crucial question: how does human-readable code become…
The Third Industrial Revolution refers to the transformative period in which digital technologies replaced analog and mechanical…
What is Steam Locomotive (sl)? Steam Locomotive (sl) is a small terminal program on Unix/Linux systems…
What is Rate Limiting? Download this article as a PDF on the Codeflare Mobile App…
Learn on the Go. Download the Codeflare Mobile from iOS App Store. 1. What is…
Download the Codeflare iOS app and learn on the Go 1. What UI and UX…