How to implement a proper global HTTP error handling in ember

Question

What I want: an error handling that handles different http errors (401, 404, 500) globally. It shouldn't matter where or when an http error occurs.

So far I implemented an error action in the application route that will be called on any adapter errors on route's model hook. That's working fine.

What is not covered is the case when I work with records in other contexts like record.save(). There I need to separately handle the error on the promise.

Moreover I don't only want to have a default error handler but more like a fallback.

Ok, before talking too much let's have an example implementation of my use cases.

application route

The application error action should be the default / fallback error handler.

actions: {
  error: function(error) {
    var couldHandleError = false;

    if (error.errors) {
      switch (error.errors[0].status) {
        case '401':
          // User couldn't get authenticated.
          // Redirect handling to login.

          couldHandleError = true;
          break;
        case '404':
        case '500':
          // Something went unexpectedly wrong.
          // Let's show the user a message

          couldHandleError = true;
          break;
      }
    }

    // return true if none of the status code was matching
    return !couldHandleError;
  }
}

Some route

In this case the application error action is called.

model: function() {
  return this.store.findAll('post');
}

Some controller

In this case the application error action is NOT called.

(I know, the following code probably doesn't make sense, but it is just supposed to illustrate my requirements)

this.store.findRecord('post', 123);

Some other controller

In this example the application error action is not called, for sure, since I use my own handler here (catch()). But as you can see in the comments I do want to use the default handler for all status codes other than 404.

this.store.findRecord('post', 123).catch(function(reason) {
  if (reason.errors[0].status === '404') {
    // Do some specific error handling for 404
  } else {
    // At this point I want to call the default error handler
  }
});

So is there a clean and approved way of achieving that? I hope I could make my problem clear to you.

val · Accepted Answer · 2015-08-20 13:06:06Z

I think I have my final solution I want to share with you. Basically I took the ideas of the guys commenting my question and extended them so they fit my needs.

First I created a mixin with the main logic. Since I want it to be as generic as possible, it distinguishes between a) controller / route and b) jquery / adapter error. So it doesn't matter from where you call it and whether your error object is originally from an jquery Ajax request or an ember adapter.

import Ember from 'ember';

export default Ember.Mixin.create({

  ajaxError: function(error) {
    if (!error) {
      Ember.Logger.warn('No (valid) error object provided! ajaxError function must be called with the error object as its argument.');
      return;
    }

    // Depending whether the mixin is used in controller or route
    // we need to use different methods.
    var transitionFunc = this.transitionToRoute || this.transitionTo,
        couldHandleError = false;

    switch (this._getStatusCode(error)) {
      case 401:
        transitionFunc.call(this, 'auth.logout');
        couldHandleError = true;
        break;
      case 404:
      case 500:
        // Here we trigger a service to show an server error message.
        // This is just an example and currently not the final implementation.
        // this.get('notificationService').show(); 
        couldHandleError = true;
        break;
    }

    // For all other errors just log them.
    if (!couldHandleError) {
      Ember.Logger.error(error);
    }
  },

  _getStatusCode: function(error) {
    // First check for jQuery error object
    var status = error.status;

    // Check for ember adapter error object if it's not a jquery error
    if (!status && error.errors && error.errors[0].status) {
      status = parseInt(error.errors[0].status);
    }

    return status;
  },

});

Next I reopened some Classes (inside app.js) to make this functionality globally available:

import AjaxErrorMixin from 'app/mixins/ajax-error';

Ember.Route.reopen(AjaxErrorMixin);
Ember.Controller.reopen(AjaxErrorMixin);

Ember.Component.reopen({
  _actions: {
    // Passing ajaxError per default
    ajaxError: function(error) {
      this.sendAction('ajaxError', error);
    }
  }
});

Finally I added some actions to the application route:

actions: {
  error: function(error) {
    this.send('ajaxError', error);
  },

  ajaxError: function(error) {
    this.ajaxError(error);
  },
}

Why do I have two actions doing the same stuff? Well, the error action is called on errors on route's model hook. I could stay with that action, but in the rest of the application where I explicitly call this action I want a more meaningful name. Therefore I also created a ajaxError action. You could stay with one action, for sure.

Now you can use this everywhere:

Route / Controller:

this.ajaxError(error);

Component:

this.sendAction('ajaxError', error);

For sure, you also need to pass the action out of the component to be handled by the application route:

{{some-component ajaxError="ajaxError"}}

This works for nested components, too. You don't need to explicitly send this action further inside the component.js file since we reopened the Component and passt this action into.

I hope I can help other people with that implementation. Also any feedback is welcome.

Gennady Dogaev · Accepted Answer · 2015-08-18 18:17:23Z

7

You can try to do something with these events (put these lines in app.js before app initialization):

Ember.onerror = function (error) {
  console.log('Ember.onerror handler', error.message);
};

Ember.RSVP.on('error', function (error) {
  console.log('Ember.RSVP error handler', error);
});

Ember.Logger.error = function (message, cause, stack) {
  console.log('Ember.Logger.error handler', message, cause, stack);
};

I learned about them from https://raygun.io/blog/2015/01/javascript-error-handling-ember-js/, you may find some details there.

answered Aug 18, 2015 at 18:17

Gennady Dogaev

5,9991 gold badge18 silver badges25 bronze badges

7 Comments

val Over a year ago

Ok, sounded good … but now I have the problem, that I don't have the context I need. For example I need to redirect to my login route if the user isn't authenticated. In my application route I could do stuff like transitionTo() or controllerFor(). How could I do it with this approach?

phkavitha Over a year ago

@Valentin, You can also use error substate in the route. For info: guides.emberjs.com/v2.0.0/routing/loading-and-error-substates. Let me know if it works for you. Thank you.

Gennady Dogaev Over a year ago

There is no one point where you can catch all errors in ember. What I may suggest is: 1) Catch errors in application route's error action (like you already did) 2) Create a mixin for controllers, and put there a function ajaxErrors. Then, add this mixin to your controller, and use ajaxErrors as a failure callback: this.store.find('something').then(function(){/*success*/}, this.ajaxErrors);. In ajaxErrors you have access to your controller and can show flash message or redirect, or do something else.

Gennady Dogaev Over a year ago

@phkavitha Unfortunately, it works only for failures in model hook.

val Over a year ago

@GennadyDogaev this seems to work. And first tests work fine. I created a mixin which can be used in (application) route as well as in controllers. But as I'm writing these lines … what about components? I know, components are not supposed to handle service calls. But for me it's a valid way for some special components.

|

Collectives™ on Stack Overflow

How to implement a proper global HTTP error handling in ember

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related