Tracking Errors in Backbone.js Single Page Applications

If you are building single-page applications with Backbone.js, client-side error logging has become essential in creating a stable application. But collecting the right error information, when it occurs, isn’t always easy. We set out to fix this by seamlessly track client-side errors with enough information to actually fix them!

Atatus makes this easy by receiving every exception that your Backbone.js web app throws, and captures the contextual actions that triggers specific error such as what the user inputted 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. You could also place the scripts in the footer or load asynchronously, but in the case of Atatus we want to load it in the HEAD synchronously so we can catch any potential onload or inline JavaScript errors.

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

Backbone with RequireJS

If an application uses requirejs, then you can set up as the following.

1. Download atatus from atatus site and copy to your web app folder. Lets say jquery and atatus are in vendorfolder.
2. Add Shim for atatus in requirejs configuration. Then initialize atatus with your API key.

requirejs.config({

  paths: {
   'jquery': './vendor/jquery-2.1.1',
   'atatus': './vendor/atatus'
  },

  shim: {
    'atatus': {
      deps: ['jquery'],
      exports: 'window.atatus'
    }
  }
});

define(['atatus'], function(atatus) {
    atatus.config('YOUR_API_KEY').install();
});

Sending custom data and tags

Atatus provides an option to pass custom data information and tags along with the exception. You can technically pass any data you want:

// custom data can be passed in options object in the config() call
    atatus.config('YOUR_API_KEY', { customData: { name: 'FlyBot' } }).install();

    (or)

    // Using set method
    atatus.setCustomData({ name: 'FlyBot' });

You can set tags as follows

atatus.setTags(['tag1', 'tag2']);

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.

Start using Atatus now

Atatus makes error tracking easier on your live Backbone.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, we’d love to hear from you.