Best way to track AngularJS and Ionic exceptions

If you are building single-page applications with AngularJS or mobile applications with Ionic framework, 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 Angular web app throws, and captures the contextual actions that triggers specific error such as what the user inputted and what the user clicked.

Since Ionic framework utilizes AngularJS in order to create a framework most suited to develop rich and robust application, error handling is exactly same for both frameworks.

Adding Atatus script

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 web application or mobile Ionic application in Atatus.
3. Copy and Paste the provided Atatus script 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.

AngularJS Error Handling

There are two ways to handle exceptions in AngularJS

1. Using Decorator
2. Using Factory

Angular provides a service called $exceptionHandler. Any uncaught exception in angular expressions is delegated to this service. The default implementation simply delegates to $log.error which logs it into the browser console.

Using a decorator

AngularJS has a great hidden feature $provider.decorator() that allows developers to intercept services and substitute, monitor, or modify features of those intercepted services. For handling exceptions, we will enhance the existing $exceptionHandler with extra functionality of sending exceptions to Atatus.

var myApp = angular.module("MyApp", []);
myApp.config(function ($provide) {
  $provide.decorator("$exceptionHandler", ['$delegate', '$window', function($delegate, $window) {
    return function (exception, cause) {
      if ($window.atatus) {
        $window.atatus.notify(exception);
      }
      // (Optional) Pass the error through to the delegate
      $delegate(exception, cause);
    }
  }]);
});

Using a factory

A quick way for getting Atatus into your app’s exception handler is to override it using a factory, although this removes the original console logging.

app.factory('$exceptionHandler', function ($window) {
  return function (exception) {
    if ($window.atatus) {
      $window.atatus.notify(exception);
    }
  }
});

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.

Start using Atatus now

Atatus makes error tracking easier on your live AngularJS applications and Ionic mobile 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.