Custom error page
- The default error page for the production environment is as follows. You can also customize the error page in the plugin
Customizing error pages in plugins
my-nodestack-app
├── src
│ ├── pages
│ │ │── error.js
│ ├── plugins
│ │ │── error.js
├── ndsk.config.js
└── package.json
export default (props)=>{
return (
<html lang="en">
<head>
<title>{props.statusCode}</title>
</head>
<body>
{props.message}
</body>
</html>
);
}
exports.plugin = {
name: 'error',
register: async (server) =>{
if(process.env.NODE_ENV === 'production'){
server.ext('onPreResponse', async (request, h) => {
const Msg = request.response.settings.message;
if(Msg){
const {statusCode,error,payload:{message}} = Msg;
if(error){
// Render the error.js page and return it to the client
return server.render(request,h,{
path:'/error.js', //File path src/pages/error.js
data:{ //Data passed to the page
statusCode,
message:message
},
layout:false //Whether to inherit layout
});
// return `<html>
// <head>
// <title>${statusCode}</title>
// <style>
// body{ margin:0;height:100%;display: flex; justify-content: center; align-items: center; }
// main{flex:1;text-align: center;margin-top:-3em}
// #statusCode{ font-size:10em;font-weight:lighter}
// #message{ font-size:1.5em;font-weight:lighter}
// </style>
// </head>
// <body>
// <main>
// <div id="statusCode">${statusCode}</div>
// <div id="message">This is a custom error page message ${message}</div>
// </main>
// </body>
// </html>`;
}
}
return h.continue
});
}
}
}
- Then execute in terminal
$ npm run build
$ npm run start
- Open a non-existent route at random: http://localhost:3000/123