Ember + Ember Data, Handling Error Substates at the Application Level, Ember 2.8

Question

I'm trying to do something that sounds really simple. I want to render server errors to the outlet of my application.hbs.

Reading this doc, https://guides.emberjs.com/v2.6.0/routing/loading-and-error-substates/, I am able to detect my errors, but I can't seem to pass the error as a model to my error.hbs by following the given pattern.

If I register the error action handler on my application route as noted, I am able to render my error.hbs template, but I cannot access the context of the error object I'm dealing with. Additionally, my URL route updates, which is not desired.

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

Using this handler, I do render error.hbs to my outlet, but I don't get any context from my error object to render to that template. If I try to pass in the error as a model, I get this error:

More context objects were passed than there are dynamic segments for the route: error

Right now, whenever an error occurs loading a model, I just get a loading spinner state that hangs forever. I would like, instead, to display the server error(s).

maffews maffews · Accepted Answer · 2016-10-20T23:26:25

Errors are passed to error substates as the model. The object that was thrown or rejected will be your error substate's model and its attributes will be the properties.

For example, if you throw or RSVP.reject { message: 'An Error Occurred' }, then you can display that in your error.hbs using {{model.message}}. I haven't ever seen throw/reject primitives work.

Here is a twiddle that demonstrates working error substates (load the /reject and /undefined routes to see additional examples).

Code from the twiddle

templates/application-error.hbs (could also be error.hbs)

<p>Application-Error Template</p>
<p>model: {{model}}</p>
<p>model.message: {{model.message}}</p>
<p>model.customMessage: {{model.customMessage}}</p>

routes/throw.js

model(params) {
  throw { customMessage: 'Reject Error Message' };
},

routes/reject.js

model(params) {
  return Ember.RSVP.reject({ customMessage: 'Reject Error Message' });
},

routes/undefined.js

model(params) {
  use.undefined.value;
},

Ember + Ember Data, Handling Error Substates at the Application Level, Ember 2.8

1 Answers