2
minute read
Todd Smith-Salter

Effective Error Reporting with Bugsnag and EmberJS

This is a guest blog post written by Todd Smith-Salter, VP of Product Strategy at 12 Stars Media. He explains how Candidio uses EmberJS with Bugsnag to capture errors.

An important part of a professional application is catching and reporting bugs. In Candidio, we report bugs from our EmberJS application to Bugsnag.

EmberJS and Bugsnag

Bugsnag has great documentation and a good amount of language support with their first-party notifier libraries. We’re quite happy with their service and look forward to using them for the foreseeable future. Here’s how we’ve setup Bugsnag with our application to track errors in Candidio.

Bugsnag.js

Get Bugsnag’s Javascript notifier with Bower using the command [CODE]bower install --save bugsnag[/CODE]. Import the [CODE]bugsnag.js[/CODE] source into your app in [CODE]Brocfile.js[/CODE] with [CODE]app.import('bower_components/bugsnag/src/bugsnag.js');[/CODE].

In [CODE].jshintrc[/CODE] add [CODE]"Bugsnag": true[/CODE] to the [CODE]predef[/CODE] hash, so you don’t get squawked at every time you use the [CODE]Bugsnag[/CODE] global variable.

Initializer

Create a new initializer at [CODE]app/initializers/bugsnag.js[/CODE] on the command line with the [CODE]ember g initializer bugsnag[/CODE] command. In the initialize function, we’re going to declare the Bugsnag API key, the releaseStage (current environment), and the stages we want to notify Bugsnag from. In Candidio, we only send Bugsnag errors from our staging environment and the production site.

-- CODE language-javascript --
Bugsnag.apiKey = config.APP.BUGSNAG.API_KEY;  
Bugsnag.releaseStage = config.environment;  
Bugsnag.notifyReleaseStages = ["staging", "production"];

Routing Errors

The first type of error we want to report is routing and edge cases, which we’ll catch with Ember.onerror. In this error report and the following, we’re sending along the current path, rather than letting Bugsnag grabbing the URL from [CODE]location.href[/CODE]. I’ve found that in the context of EmberJS development, this is more useful.

-- CODE language-javascript --
Ember.onerror = function(error) {  
 Bugsnag.context = appController.get('currentPath');;
 Bugsnag.notifyException(error);
};

Promise/AJAX Errors

We should also catch errors from rejected Promises, which we can do similarly with the RSVP.on(‘error’) method.

-- CODE language-javascript --
Ember.RSVP.on('error', function (error) {  
 Bugsnag.context = appController.get('currentPath');
 Bugsnag.notifyException(error);
});

Bonus: JavaScript Sourcemaps

Sourcemaps are enabled by default on the ember-cli development build, but to get a sourcemap on every build, including production, add the following [CODE]sourcemaps[/CODE] hash in [CODE]Brocfile.js[/CODE]. Bugsnag will get the sourcemap declaration at the bottom of our concatenated source and give you a much improved stack track over the minified source.

-- CODE language-javascript --
// Brocfile.js
var app = new EmberApp({  
 ...
 sourcemaps: {
   "enabled": true,
   "extensions": ["js"]
 }
});

Gist of the Bugsnag integration

Other useful details you can send to Bugsnag

Update: You should still log errors to your log files in addition to sending them to Bugsnag. Thanks to Ben Holmes for the tip!

———

Follow Todd on Twitter, and be sure to checkout Bugsnag’s JavaScript error monitoring.

Bugsnag helps you prioritize and fix software bugs while improving your application stability
Request a demo