A 404 Error occurs when a page is not found. This can happen due to several reasons:

• The URL was changed, but the old links were not updated.
• The page was deleted from the website.
• The user mistyped the URL.

To improve user experience, websites should have a custom error page instead of showing a generic, unappealing one. GeeksforGeeks also uses a custom error page. For example, if we visitwww.geeksforgeeks.org/ajneawnewiaiowjf, we'll see it in action.

Default 404 Error

GeeksForGeeks Customized Error Page

A custom error page improves user experience by providing a clean layout, navigation options, or auto-redirecting to the homepage. Flask lets us handle errors and display a custom page easily.

Before diving further in to the topic, make sure toInstall and set up Flask

We will createapp.py to manage templates,404.html to handle 404 errors, andheader.html for the website's header and navbar. Let's look at their code one by one:

app.py

Flask allows defining routes and functions in aPython file so create anapp.pyfile for our main flask app. We set up the main page route ('/') and a 404 error handler using Flask's built-in function.

fromflaskimportFlask,render_templateapp=Flask(__name__)# app name@app.errorhandler(404)# inbuilt function which takes error as parameterdefnot_found(e):# defining functionreturnrender_template("404.html")

The above python program will return404.html file whenever the user opens a broken link.

header.html

The header.html file is areusable template that contains the navbar and common page structure. It helps keep the code clean by avoiding repetition and makes updates easier. Other pages, like 404.html, extend it to maintain a consistent layout.

{% extends "header.html" %}<!-- Exports header and navbar from header.html     or any file you want-->{% block title %}Page Not Found{% endblock %}{% block body %}<h1>Oops! Looks like the page doesn't exist anymore</h1><ahref="{{ url_for('index') }}"><p>Click Here</a>To go to the Home Page</p><!-- {{ url_for('index') }} is a var which returns url of index.html-->{% endblock %}

Automatically Redirecting to the Home page

Theapp.py code for this example stays the same as above. The following code Shows the Custom 404 Error page and starts a countdown of5 seconds. After 5 seconds are completed, it redirects the user back to the homepage.

404.html

Following code exports header and navbar fromheader.html. Both files should be stored in the templates. After 5 seconds, the user will getredirected to the Home Page Automatically.

{% extends "header.html" %}{% block title %}Page Not Found{% endblock %}{% block body %}<h1>Oops! Looks like the page doesn't exist anymore</h1><pid="pageInfo">Redirecting to Home Page after 5 seconds...</p><script>varseconds=5;varurl="{{ url_for('index') }}";functionredirect(){if(seconds<=0){window.location=url;}else{seconds--;document.getElementById("pageInfo").innerHTML="Redirecting to Home Page after "+seconds+" seconds.";setTimeout(redirect,1000);}}window.onload=redirect;</script>{% endblock %}

Output

Let's run the app using command - "python app.py", it will rener the home page which will look like this -

Now let's try to visit some random URL "http://127.0.0.1:5000/random_url", the custom error page will look like this -

Similar Reads