Error Pages - potatoscript/django GitHub Wiki
In Django, you can customize error pages, such as the 404 Page Not Found or 500 Server Error pages, to give users a better experience when something goes wrong. Instead of displaying the default, plain error pages, you can create custom templates that match your site’s design and provide helpful information to the user.
In this tutorial, we will walk through how to create custom error pages for errors like 404 (Page Not Found) and 500 (Server Error) in Django.
- 404 Error: This occurs when a user tries to access a URL that doesn’t exist on your website.
- 500 Error: This happens when there’s a server-side issue (e.g., a code exception or a configuration problem).
By default, Django provides basic error pages for both, but we can design custom templates that give the user a more polished and friendly experience.
To create a custom 404 error page, you need to create a template called 404.html. Django will automatically use this template when a 404 error occurs.
<!-- templates/404.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Not Found - 404</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
padding: 50px;
}
.container {
max-width: 600px;
margin: auto;
}
h1 {
font-size: 50px;
color: red;
}
p {
font-size: 20px;
}
a {
color: #4CAF50;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>Oops! Page Not Found (404)</h1>
<p>Sorry, the page you are looking for does not exist. It might have been moved or deleted.</p>
<p><a href="/">Return to Homepage</a></p>
</div>
</body>
</html>- The page uses a simple layout with a 404 title and a message explaining the error.
- The
<a href="/">link allows users to navigate back to the homepage.
Similarly, to create a custom 500 error page, create a template called 500.html. Django will display this page when a server error occurs.
<!-- templates/500.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Server Error - 500</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
padding: 50px;
}
.container {
max-width: 600px;
margin: auto;
}
h1 {
font-size: 50px;
color: orange;
}
p {
font-size: 20px;
}
a {
color: #4CAF50;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>Sorry! Something Went Wrong (500)</h1>
<p>We are experiencing an internal server error. Please try again later.</p>
<p><a href="/">Return to Homepage</a></p>
</div>
</body>
</html>- This page uses a similar layout to the 404 error page but with a different color scheme (orange for a server error).
- It explains the server error and offers a link back to the homepage.
By default, Django displays generic error pages during development (if DEBUG = True), but in a production environment (with DEBUG = False), Django will look for the 404.html and 500.html templates and render them if an error occurs.
Here’s how to enable custom error pages:
-
Set
DEBUG = Falseinsettings.py:# settings.py DEBUG = False
-
Set
ALLOWED_HOSTSto allow your domain or IP address:# settings.py ALLOWED_HOSTS = ['yourdomain.com', '127.0.0.1', 'localhost']
-
Create the custom error templates as shown above in the
templatesfolder (e.g.,404.htmland500.html). -
Configure Django to use these templates by ensuring that
TEMPLATESsettings include'APP_DIRS': True(which is the default setting).
Once your templates are created and your settings are updated, it’s time to test them.
To test the 404 error page, visit a URL that doesn’t exist on your site. For example:
- If your site is running on
http://127.0.0.1:8000/, try accessinghttp://127.0.0.1:8000/nonexistentpage/.
You should see the custom 404 error page displayed.
To test the 500 error page, you can manually trigger a server error. Here’s an example:
- In one of your views, intentionally raise an exception to simulate a server error:
# views.py
from django.http import HttpResponseServerError
def trigger_500(request):
raise Exception("This is a test 500 error!")- Create a URL pattern for this view:
# urls.py
from django.urls import path
from . import views
urlpatterns = [
path('trigger_500/', views.trigger_500),
# Other URL patterns...
]When you access the http://127.0.0.1:8000/trigger_500/ URL, it should raise a server error and display your custom 500 error page.
You can enhance your error pages even further by:
- Adding your website’s logo to the error pages.
- Styling the pages to match your website’s theme.
- Including links to your help or support pages.
<!-- templates/404.html -->
<div class="container">
<img src="{% static 'images/logo.png' %}" alt="Site Logo" width="200">
<h1>Oops! Page Not Found (404)</h1>
<p>Sorry, the page you are looking for does not exist.</p>
<p><a href="/">Return to Homepage</a></p>
</div>This example uses Django's static files system to display a logo at the top of the error page.
| Step | What Happens |
|---|---|
| 1. Creating the 404 Page | Create a 404.html template to handle page not found errors. |
| 2. Creating the 500 Page | Create a 500.html template to handle server errors. |
| 3. Enabling Custom Error Pages | Set DEBUG = False and add 404.html and 500.html templates in the templates folder. |
| 4. Testing the Error Pages | Test custom error pages by triggering 404 and 500 errors. |
| 5. Adding Customization | Further enhance the error pages with logos, styling, and helpful links. |