How to respond to 404 from backend service

Ember Data
1

I have a router which expects the id and the slug for a page model:

this.route('page',{path:'/page/:slug/:id'});

In my model hook for the page route I am using this.store.query:

return this.store.query("page", {
		filter: {
			slug: params.slug,
			id: params.id
		}
	}).then(function (result) {
		return result.get("firstObject");
	});

All good.

However, there are 2 issues with this set up:

Firstly, if I enter a url such as /page/some-name (and omit the id) I expected to be taken to the error route and template - but what I get is:

uncaught exception: unrecognizedURLError

Why don’t we get redirected to the error.hbs template as you would expect to if you try to use an invalid route?

Secondly, if I enter a url which I know will generate an error on my back end, eg /page/some-slug/222 to which I respond with a 404, and I generate this response:

 {"errors":[{"detail":"Not found.","source":{"pointer":"/data"},"status":"404"}]}

If I set up an error action on the application route

actions: {
	error: function(error,transition) {		
		this.transitionTo('error');
	}

The transition doesn’t work, and I can’t console log out anything useful such as the error code or status.

So I’m not able currently to respond to this. I’ve looked at error substates, but with no joy. Ideally I want to redirect to an error page (error.hbs) already exists, and give the correct 404 error message.

Any help much appreciated!

2

So the first problem is that you don’t actually have a route defined with a single dynamic segment (e.g. /path/:slug) so Ember doesn’t know how to match it when you enter the URL with no third /. You could either define another route that contains only the slug dynamic segment or you could look into wildcard routes.

The second issue… when you say the transition doesn’t work do you mean that code actually gets run but doesn’t do anything? What happens if you get rid of that action? Ember should transition to your “error” route automatically so I would’t think this action would be necessary unless you wanted custom behavior.

3

Hi, thanks for getting back.Sorry - yes - forgot about wildcard routes, will check that out. On the second issue, am I returning the response you would expect from the server for a record which cannot be found given those erroneous parameters? It looks ok to me - but just wanted to check. On the basis that it’s fine, does my model hook look ok? I have a single error.hbs template. When I try entering a route which I know will fail on the server, after making some adjustments I can transition to the error template, but in the console I have “Error while processing route: page Ember Data Request GET http://localhost:8000/api/pages returned a 404”. I don’t expect to see that message if the error is being handled correctly - is this correct? Can I pass a message to the error template?

4

Model hook looks fine to me… As far as the response you’re returning from the server I think the most important thing is just the HTTP response code.

I was just playing around with a little ember app that I made and I was also seeing the error get logged in the console still even though as far as I can tell it’s being handled properly (I even dug into the router code a little bit and made sure the “error is handled” path was getting hit). So… I’m not sure what’s up with that. Might be a bug. The docs would seem to suggest that if you’re handling the error with a substate it would not get logged still.

As far as passing a message to the error template, if you allow Ember to handle the substate by itself it will automatically inject the error as the model into the substate route so you could access it in the template via model. So I’d let Ember handle the substate transition and not worry about that and only use the error actions if you need custom behavior. Hope that makes sense.

If you want to look at the little app I was poking around in: GitHub - dknutsen/ember-errors-demo: Example of basic ember error substates

5

Thanks for getting back - I’ll take a look at your example when I can - that’s very helpful.

With regard to 404 errors generally, I assume Ember (or any SPA framework?) can’t give a 404 status code to the browser because you always get a 200 and we’re just redirecting to an error page with an appropriate message…If that’s the case how would Google be alerted to the fact that there are 404s which they alert you of and you can fix (on a traditional application)?

6

Hi, I’ve set up your app - and can see you’re getting the same error logged to the console. Others must have had the same issue?

7

Yeah like i mentioned i would NOT expect to see it logged still (and it was) based on what the docs say so it may be a bug. Everything I tried still resulted in an error log in the console :man_shrugging:

8

Thanks for your input on this - very helpful.