Oh Snap!

Please turnoff your ad blocking mode for viewing your site content

Hit enter after type your search item

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

/
/
/
122 Views

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.

READ  Login with Google Account using Javascript

 

 

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.

READ  Build a Stock HD Photo Finder App in Javascript

 

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.

READ  jsPDF Library & jsPDF AutoTable Library Crash Course in Javascript 2020

 

<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 Comment

Your email address will not be published. Required fields are marked *

This div height required for enabling the sticky sidebar
Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :