Express JS EJS Custom error pages
Custom error pages in an Express.js application can enhance the user experience by providing friendly and informative error messages. Here’s a detailed guide on how to create and use custom error pages with Express.js and EJS.
1. Setting Up EJS for Error Pages
Ensure that EJS is configured as the view engine in your Express application. If you haven’t set it up yet, you can do so as follows:
const express = require('express');
const path = require('path');
const app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
2. Creating Custom Error Pages
Create EJS templates for different types of errors. For example, you might create custom pages for 404 (Not Found) and 500 (Internal Server Error) errors.
404 Error Page
Create a file named 404.ejs in your views directory:
<!DOCTYPE html>
<html>
<head>
<title>Page Not Found</title>
</head>
<body>
<h1>404 - Page Not Found</h1>
<p>Sorry, the page you are looking for does not exist.</p>
<p><a href="/">Return to Homepage</a></p>
</body>
</html>
500 Error Page
Create a file named 500.ejs in your views directory:
<!DOCTYPE html>
<html>
<head>
<title>Internal Server Error</title>
</head>
<body>
<h1>500 - Internal Server Error</h1>
<p>Sorry, something went wrong on our end.</p>
<p><a href="/">Return to Homepage</a></p>
</body>
</html>
3. Implementing Error-Handling Middleware
In your Express application, define error-handling middleware to use these custom error pages. This middleware should be added after all other middleware and routes.
Handling 404 Errors
Add a middleware to catch all undefined routes (404 errors):
app.use((req, res, next) => {
res.status(404).render('404', { url: req.originalUrl });
});
Handling 500 Errors
Add a general error-handling middleware to handle unexpected errors:
app.use((err, req, res, next) => {
console.error(err.stack);
res.status(500).render('500', { error: err });
});
4. Testing Custom Error Pages
To test your custom error pages:
For 404 Errors: Try navigating to a URL that doesn’t exist, e.g.,
http://localhost:3000/nonexistent-page.For 500 Errors: You can create a route that intentionally throws an error:
app.get('/throw-error', (req, res, next) => { // This will trigger a 500 error throw new Error('Test error'); });
5. Production Considerations
In a production environment, it’s important to ensure that sensitive error details are not exposed to users. Customize your error handling to provide user-friendly messages without exposing stack traces:
app.use((err, req, res, next) => {
console.error(err.stack);
res.status(err.status || 500).render('500', { error: { message: 'Something went wrong!' } });
});
Summary
- Set Up EJS: Configure EJS as the view engine in your Express app.
- Create Error Pages: Design custom EJS templates for 404 and 500 errors.
- Error-Handling Middleware: Implement middleware to render these custom pages for specific error conditions.
- Test Error Pages: Verify that your custom error pages are displayed as expected.
- Production Considerations: Avoid exposing detailed error information in production environments.