JavaScript error handling with Ember.js

By Callum Gavin | Posted Jan 30, 2015 | 3 min. (566 words)

Ember.js is a powerful client-side MV* JS framework that has enjoyed wide adoption. Like many other contemporary libraries, it provides an architecture that allows teams to build scalable, reusable codebases with many of the properties that allow devs to maintain and reason about each other’s code. Its patterns facilitate DRY, testable code, with correct separation-of-concerns.

Its API toolkit is packed with all the niceties you expect from modern JS framworks, including built-in logging and error support. This simplifies the local dev workflow, and makes it possible for rich error tracking in production environments too. Raygun integrates with Ember.js in only a few lines, allowing you to pick up all the obscure bugs in your web app as it runs in your user’s browsers.

Setting up error handling with Ember.js

Adding automatic error tracking to your Ember app can be done in seconds. Firstly, include the Raygun4JS script – a variety of methods are available in the Raygun app, including CDN, Bower, NuGet and raw from GitHub.

Then, just paste this code in to your central app.js declaration, (above where you call Ember.Application.create()):

Raygun.init('your_apikey').attach();

Ember.onerror = function (error) {
  Raygun.send(error);
};

Ember.RSVP.on('error', function(error) {
  Raygun.send(error);
});

Ember.Logger.error = function (message, cause, stack) {
  // If you want to send to Raygun in addition to console logging:
  Raygun.send(new Error(message), null, { cause: cause, stack: stack });
}

Remember to paste your Raygun app’s API key on line 1 (shown when you create the app in Raygun).

As you can see, there’s a couple of handlers we can provide callbacks to. The first one, onerror, is the critical one for apps in production. This will pick up things like routing errors and edge cases that you don’t want to miss on your user’s machines.

The second one will pick up errors that occur in Promises. As the Ember docs note, these would otherwise be swallowed, making them extremely hard to track down. Sending them to Raygun allows you to be notified of when this happens immediately.

The third one is of great assistance when developing your app, as it’ll log all runtime errors to the console. This would include the usual implementation bugs like incorrectly set up routing and controller bugs, undefined functions etc. Any Error or Ember.Error that occurs in one of your callbacks will be picked up by this function. Logger.error provides the context as three variables, which are wrapped and sent up to Raygun (the cause and stack are sent up inside the custom data payload). This might be handy to have in staging or beta environments before new code is released to production, but for development purposes it’s probably more convenient to use the browser debugger or the Ember dev plugin.

Inside those handlers, after sending to Raygun you can also decide how to inform the user, such as showing an error message control.

One more thing: the attach() call on the Raygun object is optional, but this will ensure that any other errors that reach window.onerror will be picked up and sent too. This is great if you’re got other scripts that run outside of your Ember application.