How to track Ember.js production errors

Fizer Khan -

Ember.js is a framework for creating ambitious web applications. If you are building single-page applications with Ember.js, client-side error logging has become essential in creating a stable application. But setting up a system to log browser errors is rather complicated in and of itself.

Atatus makes this easy by receiving every exception that your Ember.js web app throws, and captures the contextual user actions that triggers specific error such as what the user entered and what the user clicked.

Adding Atatus snippet

  1. If you haven’t signed up Atatus yet, try out the free 14 day trial – no credit card required.
  2. Create a project for your application in Atatus.
  3. Copy and Paste the provided Atatus snippet in head tag of the main HTML page.
<script src="//dmc1acwvwny3.cloudfront.net/atatus.js"></script>
<script type="text/javascript"> atatus.config('YOUR_API_KEY').install(); </script>

We recommend you to place the script in the HEAD of the HTML document. When you do so, we can catch any potential onload or inline JavaScript errors. If you’re concerned about performance, you can place it in the footer. But you might miss some important errors by choosing to do so.

Integrating with Ember.js

Ember provides an Ember.onerror method and Ember.RSVP.on('error') callback for capturing errors arising from your code. The code below sets up the Ember.onerror handler for your app. It also sets up RSVP error notifications, and notifications for any errors with route resolution.

var reportError = function(error) {
    if (window.atatus) {
        window.atatus.notify(error);
    }
};

// Log Emberjs errors
Ember.onerror = reportError;

// Log Ember promise errors
Ember.RSVP.on('error', reportError);

// Log Ember route errors
App.ApplicationRoute = Ember.Route.extend({ actions: { error: reportError } });

Now your app is ready to go. Atatus enhances Ember.js error handling greatly by increasing the chance of getting a stacktrace along with user actions.

Manually sending errors

Atatus can capture errors automatically. You can also manually notify error:

atatus.notify(new Error('custom error'));

Atatus provides an option to pass custom data information along with the error. You can technically pass any data you want as the custom data by replacing the atatus.notify call:

atatus.notify(new Error('custom error'), { name: "John Doe" });

There’s also a bunch of other useful options available including unique user tracking, version tracking, tags and more – check out the documentation here for all the details.

Ready to get Atatus?

Atatus makes error tracking easier on your live Ember.js applications with little effort along with user interactions that lead to the error. Try out the free 14 day trial – no credit card required. If you have any questions, drop us an email.