How to return a proper 404 response for a 404 page (node)

[michaeljn]

Hi,

Easy enough to successfully route any non page URL/route to the 404 page.

Without this route, node properly responds with the correct 404 (by default).

When routed to a 404 page (through a catch all), there is no 404 response though.

I’ve set it up to call a server action as below.

However, the dev I work with says this still isn’t a proper response format/code for a 404 page.

Any ideas how to do it properly? Or not able to?

In Express (coding manually) it would just be.

app.get('*', function(req, res){
  res.status(404).send('formated code/message/error/html etc');
});

Thanks.

[0x90]

Since there is no way of handling the 404 responses natively from within Wappler itself, I would suggest to go a more “hacky” way and use the internal server itself, you can locate it here:

C:\Users<YOUR USERNAME>\AppData\Local\Wappler Beta\resources\app\Shared\DMXzone\NodeJS\Includes\lib\server.js

and then you can do what you’re trying to do.

[JonL]

If you want full control over the 404 route just add a middleware as explained here:

PREVIEW: Extending express (NodeJS)

Extending express You want to add extra middleware to express or define your own route endpoints? Here we will explain you how you can do this. Location All custom code extending express are placed in extensions/server_connect/routes. File Structure Here is a sample of how such a file looks like. exports.handler = function(app) { app.get('/hello', (req, res) => { res.send('Hello World'); }); } The module should export a handler method that accepts the express app as parameter. For…

Instead of exports you can use exports.after and it will load the route after all the other ones.

Also you could make a redirect to a predefined 404 route from your SC workflow.

You could also create a custom module to send a 404 response directly.

PREVIEW: Writing Custom Modules and Formatters (NodeJS)

Writing your own Formatters Location All formatters are being placed in the extensions/server_connect/formatters folder. A single file can contain multiple formatters and you can have multiple files. Best practice is to group formatters that belong together in a single file. For example you to keep all array specific formatters in a file called array.js . File Structure Here a sample of how such a formatter file looks like. exports.uppercase = function(str) { return str.toUpperCase(); }…

[michaeljn]

Thanks @JonL

That helps.

I can’t get the view (and layout) to render though. Any thoughts?
Routes correctly for any non existing URL, sends the correct 404 response, found that I need to define the layout (Googled ejs layouts), but returns a page with {} if I attempt to use render.

This is inside a 404.js file at extensions/server_connect_routes as mentioned in your link.

 exports.after = function (app) {
     const path = require('path');
    app.get('*', (req, res, next) => {
    res.status(404).render('404', { layout: 'main' });
   });
 }

If I return anything else, ie res.status(400).send('Not found') or res.sendStatus(404) it works fine (obviously doesn’t render the 404 page though.

Also you could make a redirect to a predefined 404 route from your SC workflow.

The dev I work with would probably say…nope…nope. This isn’t ‘the right way’.

I also attempted to hijack the error response in server.js as @0x90 mentioned (https://community.wappler.io/u/0x90) to see if I could render() the page there. But returns exactly the same thing, ie won’t render the view.

File name for view is correct and exists, as it works in Wapplers ‘routing’. So has me stumped.

Appreciate the help.

[hisoka]

Bumping this.

Hello guys, is still that hard to setup a proper 404 with Wappler an node? I want to redirect users to a 404 page.

Been struggling with this for days

[Teodor]

Add a custom 404 page by adding a route for the path * in the last place in the routing manager

[Mayur]

How to add a response code with this?
Coz it’s changing 404 response to 200 with 404 page.

[Eli_Solution]

Hi,
has anyone solved this 404 status problem?
Because I too have noticed that when I go to the 404 page I do not have a 404 status but a 200 status.

[ben]

You do not need to mention any status if you do what @Teodor has suggested as follows:

Create a 404 (or similar) page as in 404.ejs

In the routing, change /404 to /* as follows:

The result is:

[Cheese]

Just remember 404 has to be the final entry in the routing panel! By default new routes will be added after it and will not be displayed. They will require to be dragged above the route for your 404 page.

[Eli_Solution]

I did it and in this way I have response status 200 but I would like have a 404 response because for SEO It is better. Is it possible? thanks very much!

[ben]

A 404 page is purely for user experience, not for SEO.

What is important for SEO is fixing broken links in your application, You may want to monitor the 404's in order to fix your broken links.

[Eli_Solution]

Ok, I agre to you but I have a question.
If, unfortunately, the site is hacked and the home page is linked to many pages “fake” (see below) and google indexes them, after fixing and cleaning the siteI would like to remove those links from the google search console and be sure to have a 404 status as recommended by google itself.

For example if my site is:
-ww.mysite.com
If It hacked I could have:
-ww.mysite.com/fnjdshf
-ww.mysite.com/yruroabdis
-ww.mysite.com/tehweja
-ww.mysite.com/tehwejaerqade

[Eli_Solution]

I get it! If I want a pure 404 status, just don’t create the 404 page…! and I have:
{“status”:“404”,“message”:"/jfj not found."}

Certainly It is no good for UX … but good for google search console

[Liquid_Ice]

Is there anyway around having to reorder after every new page?

[Cheese]

Not currently.

[Teodor]

Please check Creating Custom Error Pages in NodeJS