Setting up Airbrake on an Ember application

Question

How do you set up Airbrake such that it gets context information from unhandled Javascript errors that occur in an Ember application?

Ingulf

How did you set up airbrake ? I am not even able to 'get' the javascript file after adding <script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/…> <script src="airbrake-shim.js" data-airbrake-project-id="FIXME" data-airbrake-project-key="FIXME" data-airbrake-environment-name="production"></script> <script src="app.js"></script> in my head tag ? – Arondell

I am using Rails and used the Rails helper that they show here - help.airbrake.io/kb/troubleshooting-2/javascript-notifier However, you should be able to get the same result by directly adding the JS that they show. – Ingulf

For airbrake I was not able to use the above mentioned example way but I had to manually download the js file from github and include it in my project to get it working. – Arondell

Though I think sentry give you much better error reporting – Arondell

Answer 1

Assuming you've included Airbrake-js you can hook on Ember's onerror handler and push errors.

Ember.onerror = function(err) { // any ember error
    Airbrake.push(err);
    //any other error handling
};
Ember.RSVP.configure('onerror',function(err){ // any promise error
    Airbrake.push(err);
    console.error(e.message);
    console.error(e.stack);
    //any other generic promise error handling
};
window.onerror = function(err){ // window general errors.
    Airbrake.push(err);
    //generic error handling that might not be Airbrake related.
};

You can see more options of different parameters of the data sent in the airbrake-js GitHub repository docs.

Dilan

I have now verified this with an Ember team member (Stef) - currently there is no way around catching both RSVP errors and normal errors. Good luck!. – Dilan

Thanks! Yeah, I'm initializing with the rails airbrake_javascript_notifier helper and using Ember.onerror, but I basically get errors like "ReferenceError: can't find variable e" occurring somewhere in my minified JS, with no other information. Thought I'd see if there was something I'm missing. Good to know about the RSVP onerror. – Ingulf

Answer 2

I don't know if this answers your question, but I hope it helps.

To handle server thrown errors you can define an "error" function in the application's route and push it in Airbrake:

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    error: function(error) {
      // handle the error
      Airbreak.push(error)
    }
  }
});

Moreover, if you catch errors somewhere else and have the same handling, you can make a mixin and pass the error:

App.ErrorHandlerMixin = Ember.Mixin.create({
    handleError: function(error){
         //make different stuff
         Airbreak.push(error)
    }      
});

App.ApplicationRoute = Ember.Route.extend(App.ErrorHandlerMixin, {
  actions: {
    error: function(error, transition) {
      this.handleError(error);
    }
  }
});

App.ApplicationController = Ember.ObjectController.extend((App.ErrorHandlerMixin, {
    someFunction: function () {
        this.handleError(randomError);
    }
});

This way you have all the error handling in a single place.

Bellybutton