Rollbar integration for the Ionic framework

Our friends at Cuttlesoft wanted to share how they use Rollbar to detect errors in Ionic built applications. Enjoy!

At Cuttlesoft, we use Rollbar's excellent full-stack error monitoring service for pinpointing and fixing tricky bugs. Our team loves Rollbar for its integrations with other popular services (we get our error notifications via Slack so we’re constantly in the know). For building hybrid mobile and progressive web apps, we generally rely on Ionic. Ionic is an open-source framework for hybrid mobile app development maintained by Drifty. Built with AngularJS and Cordova, Ionic is a popular tool for mobile developers everywhere. To combine these two, we've developed a method for integrating Rollbar error tracking with the Ionic stack.

We find it so useful that our co-founder and CTO Emily Morehouse wrote a tutorial for using our method of integration so that you too can harness the bug-squashing power of Rollbar + Ionic. Using just a few tools, we'll show you how to make Rollbar work in perfect sync with Ionic. Since Ionic is a hybrid framework, there are a few different services where Rollbar needs to be plugged in:

• Native iOS
• Native Android
• JavaScript

To do this, we'll use a few different plugins that help monitor each OS and stack layer. We'll use Emily Morehouse's fork of the Cordova Rollbar plugin to catch native errors, and the ng-rollbar AngularJS plugin to catch our Ionic application errors. Now, let's dive in. The first (and easiest) plugin to set up is the Cordova plugin, so let's knock that out first. We're assuming that you've already created an account and project on Rollbar's site but if you haven't, go do that first.

Catching Native Errors

Simply install the plugin:

cordova plugin add https://github.com/emilyemorehouse/cordova-plugins-rollbar.git --variable ROLLBAR_ACCESS_TOKEN="<rollbar_access_token>" --variable ROLLBAR_ENVIRONMENT="<rollbar_environment>"

Then, add the following code, probably in your run function and definitely after the device is ready. To use the Ionic platform ready trigger:

$ionicPlatform.ready(function() {
    window.cordova.plugins.Rollbar.init();
});

Or to use the Cordova deviceready listener:

document.addEventListener('deviceready', function () {
    window.cordova.plugins.Rollbar.init();
});

Either works fine, but we're a fan of the former. for a variety of reasons, it's generally not kosher to use variables through command line arguments (security of course, but also that running ionic platform reset can completely mess up your project setup as variables are not always persisted in your configuration files), so be aware of the caveats with this approach. And that's it! All native crashes and errors will now be reported. It should be noted that native crashes are typically not caused by your application, but are super helpful if you're developing or using a plugin that could have issues.

Catching Javascript errors

To catch Javascript errors (the most important ones and ones that you're usually the most responsible for), you have a bit more setup and a lot more control over when and how these errors are caught. First off, let's get the dependencies installed:

bower install ng-rollbar --save

Now, let's get them included (we have bower set up so it installs to lib, so adjust as necessary:

<script type="text/javascript" src="lib/ng-rollbar/ng-rollbar.min.js"></script>

Remember to include the module:

angular
.module('myApp', [
    'ionic',
    'tandibar/ng-rollbar'
]);

Initialization must occur in your config function, though we find that it would make more sense to keep it in the run function as that's where every other initialization occurs. But the earlier the initialization is called, the better - since any exceptions that occur prior to initialization won't be caught and configuration happens before running. Place this in your config function:

myApp.config(['RollbarProvider', function(RollbarProvider) {
    RollbarProvider.init({
        accessToken: '<your-application-token>',
        captureUncaught: true,
        payload: {
            environment: '<rollbar_environment>'
        }
    });
}]);</rollbar_environment> </your-application-token>

That's it! Any error that's thrown will now be caught. This does not, however, work automatically with "console.error"s. If you'd like to manually throw a Rollbar exception, you can use any of the following severities as long as you inject Rollbar:

// Rollbar severities
Rollbar.critical("some critical error");
Rollbar.error("some error");
Rollbar.warning("some warning");
Rollbar.info("some info");
Rollbar.debug("some debug message");

Another trick we like to use is to simply override the console.* functions and replace them with the Rollbar functions. Toss this into your run function if you want to convert all console logs into Rollbar messages, though we only use the error override in production and all others in development:

console.error = Rollbar.error;
console.warn = Rollbar.warning;
console.info = Rollbar.info;
console.debug = Rollbar.debug;

// Duplicated use of Rollbar.info for console.log since an equivalent does not exist
console.log = Rollbar.info;

There you have it, Rollbar support for the Ionic Framework. If you're a fan of this tutorial, visit cuttlesoft.com/blog for other helpful guides, open-source projects, and blog posts about all aspects of software development. Big thanks to Rollbar for building such a great service, and for letting us share our tutorial with you.

If you haven’t already, sign up for a 14-day free trial of Rollbar and let us help you take control of your application errors.