How to Create Custom Error Page in Flask

Flask Tutorial

About Lesson

In this Flask lesson we are going to learn How to Create Custom Error Page in Flask, so when you are going to develop a web application or website, when a user write invalid route, the user get a 404 error page , instead of 404 error page we want to show them our Custom Error Page in Flask. Flask allows an application to define Custom Error Page that can be based on our template that we have, you can define Flask Custom Error Page like regular routes.

This is our app.py file, we have created two new routes for custom error pages.

from flask import Flask, render_template


#create the object of Flask
app  = Flask(__name__)


#creating our routes
@app.route('/')
def Index():
    name = 'Geekscoders.com'
    return render_template('index.html', data = name)



@app.route('/contact')
def Contact():
    return render_template('contact.html')



@app.route('/about')
def About():
    return render_template('about.html')


@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html')


@app.errorhandler(500)
def internal_server_error(e):
    return render_template('500.html')


#run flask app
if __name__ == "__main__":
    app.run(debug=True)

from flask import Flask, render_template

#create the object of Flask

app = Flask(__name__)

#creating our routes

@app.route('/')

def Index():

name = 'Geekscoders.com'

return render_template('index.html', data = name)

@app.route('/contact')

def Contact():

return render_template('contact.html')

@app.route('/about')

def About():

return render_template('about.html')

@app.errorhandler(404)

def page_not_found(e):

return render_template('404.html')

@app.errorhandler(500)

def internal_server_error(e):

return render_template('500.html')

#run flask app

if __name__ == "__main__":

app.run(debug=True)

You can see that we have defined two new routes, the first one is for page_not_found() and the second one is for internal_server_error().

@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html')


@app.errorhandler(500)
def internal_server_error(e):
    return render_template('500.html')

@app.errorhandler(404)

def page_not_found(e):

return render_template('404.html')

@app.errorhandler(500)

def internal_server_error(e):

return render_template('500.html')

Now let’s create templates for our custom error pages, we need two new templates.

templates/404.html

{% extends 'base.html' %}

{% block title %}Page Not Found {% endblock %}



{% block body %}

<div class="container">

<h1>Page Not Found</h1>

</div>


{% endblock %}

{% extends 'base.html' %}

{% block title %}Page Not Found {% endblock %}

{% block body %}

<h1>Page Not Found</h1>

</div>

{% endblock %}

templates/500.html

{% extends 'base.html' %}

{% block title %}Server Error {% endblock %}



{% block body %}

<div class="container">

<h1>Internal Server Error </h1>

</div>


{% endblock %}

{% extends 'base.html' %}

{% block title %}Server Error {% endblock %}

{% block body %}

<h1>Internal Server Error </h1>

</div>

{% endblock %}

These are our other html files.

templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{% block title %}{% endblock %}</title>
 <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet" >
</head>
<body>

 <nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">GeeksCoders</a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact">Contact</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="about">About</a>
        </li>

      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search"
               placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>


{% block body %}

{% endblock %}

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" >

</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>{% block title %}{% endblock %}</title>

rel="stylesheet" >

</head>

<body>

<a class="navbar-brand" href="/">GeeksCoders</a>

</li>

<a class="nav-link" href="contact">Contact</a>

</li>

<a class="nav-link" href="about">About</a>

</li>

</ul>

<input class="form-control me-2" type="search"

placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success" type="submit">Search</button>

</form>

</div>

</nav>

{% block body %}

{% endblock %}

</script>

</body>

</html>

templates/index.html

{% extends 'base.html' %}

{% block title %}Home{% endblock %}



{% block body %}

<div class="container">
 <h1>Home Page - Template Inheritance</h1>

<h3>Welcome to . {{data}}</h3>

</div>


{% endblock %}

{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% block body %}

<h1>Home Page - Template Inheritance</h1>

<h3>Welcome to . {{data}}</h3>

</div>

{% endblock %}

templates/contact.html

{% extends 'base.html' %}

{% block title %}Contact{% endblock %}



{% block body %}

<div class="container">
 <h1>This is contact page</h1>
</div>

{% endblock %}

{% extends 'base.html' %}

{% block title %}Contact{% endblock %}

{% block body %}

<h1>This is contact page</h1>

</div>

{% endblock %}

templates/about.html

{% extends 'base.html' %}

{% block title %}About{% endblock %}



{% block body %}

<div class="container">
 <h1>This is our about page</h1>
</div>

{% endblock %}

{% extends 'base.html' %}

{% block title %}About{% endblock %}

{% block body %}

<h1>This is our about page</h1>

</div>

{% endblock %}

Now run your application and go to a route that does not exists, http://localhost:5000/articles

How to Create Custom Error Page in Flask