Ember.js - Error States in Pod structure

Question

Here is my structure in inside àpp/pods:

|-application
|-index
|-error
|-user
||-index
||-view
||-edit

When a error occurs, ember does not load the error route. Instead it tries to load a sub-route like index_error or user_error but these do not exist.

How do i force Ember to load the root error route on any error?

Ember v2.1 Ember-Cli v1.13.8

Answer 1

The structure you've provided should actually do exactly what you're describing you're after.

Take a look at this twiddle to see an example. Clicking 'View User' will transition to the user.view route, but clicking 'Edit User' will raise an exception in the user.edit route and instead land you on the error route.

One thing to note is that you should not add the error route yourself in router.js. It receives the transition error as its model, so if you manually do this.route('error') and don't give it a dynamic segment, the transition will fail.

---

If you want more control over exactly what happens when an error occurs during any transition, you can implement the error action on your application route.

actions: {
  error(thrownError) {
    this.transitionTo('my-error-route'); // Or whatever other handling you want
  }
}

You can see a full example of such an arrangement in this twiddle. Note that this is subtly different from the default error behavior in that it will produce a full transition (i.e. the URL will be updated) rather than just moving into a substate.