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

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

Next step

Compile configuration