How should I handle an errors from server in Ember.js? - ember.js

Question

I have a small app, written using ember.js, that talks to REST API using RESTAdapter and displaying elements in list using ArrayController. When I'm performing a POST request to server and the responds with code 201 (Created) and a model with id the new models is displayed in list. But if server returns code 409 (Conflict) with the payload that looks like this
{
'errors': ['Error description']
}
I expect that model will not be added to list, but it isn't so. The model is still added to list, but without ID.
I found out that this model can be removed in multiple ways, but I don't know which of them is right.
So the questions are:
What is the right way to handle errors in this case (when you are using ArrayController and RESTAdapter)?
Is it possible to prevent model showing up in list if server returns 4xx code?
Here is code that I use now:
App.Usergroup = DS.Model.extend({
name: DS.attr('string'),
description: DS.attr('string'),
});
App.UsergroupsListController = Ember.ArrayController.extend({
needs: ['usergroups'],
allUsergroups: Ember.computed.alias('controllers.usergroups'),
itemController: 'usergroup'
});
App.UsergroupController = Ember.ObjectController.extend({
actions: {
removeGroup: function() {
var group = this.get('model');
group.deleteRecord();
group.save();
}
}
});
App.UsergroupsController = Ember.ArrayController.extend({
actions: {
addUsergroup: function() {
var model = this.get('model');
var group = this.store.createRecord('usergroup', {
name: model.name,
description: model.description
});
group.save().then(function() {
},
function(error){
group.rollback();
});
this.transitionTo('usergroups.index');
}
}
});
And here is the template excerpt:
<script type="text/x-handlebars" id="usergroups">
<div class="header">
<h1>User groups list</h1>
</div>
<div class="content">
<form class="pure-form">
<fieldset>
{{input valueBinding="model.name" placeholder="Name"}}
{{input valueBinding="model.description" placeholder="Description"}}
<button type="submit" {{action 'addUsergroup'}} class="pure-button pure-button-primary">Add</button>
</fieldset>
</form>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" id="usergroups-list">
{{#if model}}
<table class="pure-table pure-table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{{#each}}
<tr>
<td>{{id}}</td>
<td>{{name}}</td>
<td>{{description}}</td>
<td><button class="pure-button" {{action "removeGroup"}}><i class="fa fa-trash"></i> Remove</button></td>
</tr>
{{/each}}
</tbody>
</table>
{{else}}
<p>No user groups.</p>
{{/if}}
</script>

Answer 1

Ember provides an error route and a loading route
Read more about it here - Ember error route
So when the Usergroup model throws an error, Ember will look for UsergroupErrorRoute or
usergroup/error template.
What you can do is you can have
<script type="text/x-handlebars" data-template-name="usergroup/error">
{{message}}
<script>
where {{message}} is transferred from the route

Answer 2

So, as I found out, errors should be handled in Route.
Currently my route looks like this:
App.UsergroupsRoute = App.AuthenticatedRoute.extend({
model: function() {
return this.store.find('usergroup');
},
redirectToLogin: function(transition) {
var loginController = this.controllerFor('login');
loginController.set('attemptedTransition', transition);
this.transitionTo('login');
},
actions: {
error: function(reason, transition) {
if (reason.status == 401) {
this.redirectToLogin(transition);
}
else {
alert('Something went wrong');
}
}
}
});
It works just fine and does what it should. But now I cannot get what is a reason for placing errors handling in Route?