How to make a 404 router


#1

Hi I am new to javascript sites, I’ve been using php. I’ve chosen Ember, and would like to know how do I make a router to act as a 404? I need to show page not found rather than a blank page when a router doesn’t exist.

Thanks in advanced.


#2

Add “/*path” as the last route, that will catch anything that doesn’t match any of the previous routes.

Router.map(function () { this.route('someRoute'); .... .... this.route('404', { path: '/*path' }); });


#3

Thank you, works great!

As a side note to someone reading this, you will also need to “ember generate route 404” and then edit the 404 template ontop of adding the above code to the route.js file within the ember root.

Also, ‘/path’ needs to say exactly that, not just '/’.

And heres where you can find this in the official documentation: https://guides.emberjs.com/v2.7.0/routing/defining-your-routes/#toc_wildcard-globbing-routes


#4

Howdy folks :wave:

I just wanted to weigh in on this discussion because other people might find this question while googling the issue and I wanted to propose a simpler alternative than creating a 404 “route”.

If you want to display an error page in the case of a 404 (or any other error in your application) you can just create a top-level error template app/templates/error.hbs which will be shown in the event of any error. This is what is called an Error Substate and can be quite useful.

If you want to display a specific error in the case of a 404 and not just a general error, you can take a look at this example from the Ember Guides App. The error that caused the loading of the error substate is available to you in as the model, so you can access it as you generally would in any other type of route.


#6

I just tried that now, @real_ate, and it didn’t work; I could see the UnrecognizedURLError in the console, the error template never rendered. Is it something that worked for you even at the root? This thread suggests otherwise.

I wish it worked because the wildcard solution seems messier. :disappointed:


#7

You’re right, the error substates won’t handle this at app boot.

Conceptually, the error handling captures errors that happen inside routes. Even a top-level error template is only handling errors inside the application route. Unfortunately, if the app boots on an unknown url, you never even get into the application route – the failure happens too early.

A final wildcard route is the reliable solution. It’s also more specifically a true 404 page – the error substate handling will apply to any exception that comes out of the route hooks, not just unknown URLs.


#8

How would I return the 404 error code?


#9

I assume you mean in fastboot, because that is the only time an Ember app has control over a real HTTP status code.

See https://ember-fastboot.com/docs/user-guide#status-code on how to set it.

In development the fastboot server is running alongside the rest of the usual ember-cli express server, so invalid URLs will tend to get picked up by those without ever hitting fastboot. You may need to test the 404 behavior by running fastboot directly (however you run it in production) as opposed to inside ember-cli.