How to deal with Route when model gets a 404

Ember Data
1

I have the following Route:

App.IndexCrmPersonEditRoute = Ember.Route.extend({
	model: function(params) {
        var person = this.store.find("person", params.id);
        return person;
    },
});

which receives the following Router path

...
this.route('edit', { path: ':id'}); // edit person
...

That works nicely for existing people. When the object doesn’t exist, the API returns a 404 with the following content:

{"person": null}

an error "Error while loading route: undefined " happens in JS.

I wish to know if returning 404 + person = null is the correct approach and if it is possible to show a message and redirect the user back to the previous URL (or even not move them if the response is 404).

Any idea?

2

Answering myself, I was suggested in Stackoverflow to take a look at the Router’s “error” action:

The documentation is not very good but here is what I made to implement:

I wrote a generic Route class to be extended with the “error” action:

App.NotFoundObjectRoute = Ember.Route.extend({
    actions: {
        error: function(reason, transition) {
            if (reason.status == 404)
                return true
            else
                this.transitionTo('r500');
        },
    },
});

Each route I expect to have the “Not found” beheaviour, I wrote and Error route, as below (attention to the word “Error” that automatically replaces “Edit”, as EmberJS’ standard:

App.IndexCrmPersonEditRoute = App.NotFoundObjectRoute.extend({
  // ...
});

App.IndexCrmPersonErrorRoute = Ember.Route.extend({
  // Called for errors like 404 (not found) and 500 (server error)
});

That turned to write also an error view, as below:

App.IndexCrmBusinessErrorView = Em.View.extend({
    templateName: "r404",
});

I used the standard “r404” template for that, but as you can see it could be a different one for each different object type.

The “r500” route acts in case of server error (other than 404).

I hope that can be helpful for others.

3

You can also handle this globally using ApplicationRoute’s error action

App.ApplicationRoute = Ember.Route.extend({
    actions: {
        error: function(error, transition){
            if (error.status === 0) {
                showErrorDialog('Sorry, but we\'re having trouble connecting to the server. This problem is usually the result of a broken Internet connection. You can try refreshing this page.');
            } else if (error.status == 403) {
                //go to some default route
            } else if (error.status == 401) {
                //handle 401
            } else if (error.status == 404) {
                this.transitionTo('fourohfour');
            } else {
                showErrorDialog(error);
            }
        }
    }
});
7 Likes
4

Thank you, I imagined that could be possible too. For this specific case I wish to have a customized interface, but certainly the global way will also be useful for the other routes :slight_smile: