Custom error page

The default error page for the production environment is as follows. You can also customize the error page in the plugin

error

Customizing error pages in plugins

Directory Structure
pages/error.js
plugins/error.js

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://127.0.0.1:3000/123

Next step

Compile configuration