Node.js Express Custom 404 Error Page Tutorial – Custom Error Handling in Node Full Example

Welcome folks today in this post we will be talking about how to handle custom 404 page errors in node.js and express applications. If you have a wrong route opened by the user accidentally or intentionally then you want a custom 404 page every time displayed into the browser for better user experience. All the source code is given below to make the custom 404 page. We will take a empty express app example no dependencies are required so just make a node.js project and write the below code. A step by step youtube video is also shown to you for better reference with the blog.

 

 

Screenshots

 

 

const express = require('express')
const app = express()

app.get("*",(req,res) => {
    res.send("404 page")
})

app.listen(4000,() => {
    console.log("App is listening on Port 4000")
})

 

Here in this block of code we have a simple express server running on port 4000. All the requests which are wrong is represented by this * symbol. And as a result is handled by this request so everytime you opened a wrong route in the browser the express app will return this response to you i.e. 404 page.

See also  jQuery Html2Canvas.js Capture Screenshot of Div as PNG/JPEG Image File in Browser Using Bootstrap 4 & Javascript Full Project For Beginners

 

const express = require('express')
const app = express()

app.get("*",(req,res) => {
    res.sendFile(__dirname + "/404.html")
})

app.listen(4000,() => {
    console.log("App is listening on Port 4000")
})

 

Now instead of returning a response in text we will be making a html file and then returning it. So in this block of code we are loading the file when the following route is hit in the express app.

 

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
    body { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8yOS8xMiKqq3kAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAABHklEQVRIib2Vyw6EIAxFW5idr///Qx9sfG3pLEyJ3tAwi5EmBqRo7vHawiEEERHS6x7MTMxMVv6+z3tPMUYSkfTM/R0fEaG2bbMv+Gc4nZzn+dN4HAcREa3r+hi3bcuu68jLskhVIlW073tWaYlQ9+F9IpqmSfq+fwskhdO/AwmUTJXrOuaRQNeRkOd5lq7rXmS5InmERKoER/QMvUAPlZDHcZRhGN4CSeGY+aHMqgcks5RrHv/eeh455x5KrMq2yHQdibDO6ncG/KZWL7M8xDyS1/MIO0NJqdULLS81X6/X6aR0nqBSJcPeZnlZrzN477NKURn2Nus8sjzmEII0TfMiyxUuxphVWjpJkbx0btUnshRihVv70Bv8ItXq6Asoi/ZiCbU6YgAAAABJRU5ErkJggg==);}
.error-template {padding: 40px 15px;text-align: center;}
.error-actions {margin-top:15px;margin-bottom:15px;}
.error-actions .btn { margin-right:10px; }
</style>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="error-template">
                <h1>
                    Oops!</h1>
                <h2>
                    404 Not Found</h2>
                <div class="error-details">
                    Sorry, an error has occured, Requested page not found!
                </div>
                <div class="error-actions">
                    <a href="/" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-home"></span>
                        Take Me Home </a><a target="_blank" href="https://www.codingshiksha.com" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-envelope"></span> Contact Support </a>
                </div>
            </div>
        </div>
    </div>
</div>

Leave a Reply