Flask Tutorial - Custom Error Page in Flask

In this Flask Tutorial we are going to talk about creating 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.

If you are interested in Web Development with Django Framework, than you can read the

complete articles in this link, Django Web Development Tutorials.

So first of all this is our app.py file.

from flask import Flask, render_template


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



#creating our routes
@app.route('/')
def index():
    data = "Codeloop"
    return render_template('index.html', data = data)



#contact routes
@app.route('/contact')
def Contact():
    return render_template('contact.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():

data = "Codeloop"

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

#contact routes

@app.route('/contact')

def Contact():

return render_template('contact.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 we need to create our html files in the templates folder, especially we are going to create templates for our page_not_found() and internal_server_error() view functions.

templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %}</title>

    <!-- CSS Bootstrap CDN Link -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


</head>
<body>



<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">

      <a class="navbar-brand" href="#">CodeLoop</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>


         <li class="nav-item">
        <a class="nav-link" href="#">Logout</a>
      </li>


    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>

  </div>

    <a href=""><button class="btn btn-success navbar-btn">Login</button> </a>
     <a href=""><button class="btn btn-success navbar-btn">Signup</button> </a>
</nav>


<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


{% block body %}


{% endblock %}




</body>
</html>

<!DOCTYPE html>

<head>

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

</head>

<body>

<a class="navbar-brand" href="#">CodeLoop</a>

</button>

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

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

</li>

<a class="nav-link" href="#">Logout</a>

</li>

</ul>

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form>

</div>

<a href=""><button class="btn btn-success navbar-btn">Login</button> </a>

<a href=""><button class="btn btn-success navbar-btn">Signup</button> </a>

</nav>

{% block body %}

{% endblock %}

</body>

</html>

templates/index.html

{% extends 'base.html' %}


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

{% block body %}

<div class="container">
    <h1>Home Page - Welcome to codeloop.org</h1>
<h3>Tutorial Number 6 </h3>

<p>
In this tutorial we are going to talk
about flask Custom Error Page.

</p>


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


</div>

{% endblock %}

{% extends 'base.html' %}

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

{% block body %}

<h1>Home Page - Welcome to codeloop.org</h1>

<h3>Tutorial Number 6 </h3>

<p>

In this tutorial we are going to talk

about flask Custom Error Page.

</p>

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

</div>

{% endblock %}

templates/contact.html

{% extends 'base.html' %}

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




{% block body %}

<div class="container">
    <h1>Contact Page - Welcome to codeloop.org</h1>
<h3>Tutorial Number 6 </h3>

<p>
In this tutorial we are going to talk
about flask  Custom Error Page.

</p>


</div>


{% endblock %}

{% extends 'base.html' %}

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

{% block body %}

<h1>Contact Page - Welcome to codeloop.org</h1>

<h3>Tutorial Number 6 </h3>

<p>

In this tutorial we are going to talk

about flask Custom Error Page.

</p>

</div>

{% endblock %}

Now we need to create our new html files for Custom Error Pages.

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 %}

Now run the the Project and go to a wrong route, for example we are going to open

http://localhost:5000/hello, we don’t have the hello route, now you can see that

we have received a nice and customized error page.

Flask Tutorial - Custom Error Page in Flask — Flask Tutorial – Custom Error Page in Flask

Also you can watch my complete 4 hours training on Flask Web Development

Subscribe and Get Free Video Courses & Articles in your Email