Rollbar - Automated Error Logging for Angular Apps

Posted May 13, 2016

Guest post by Mike Smith, Head of Growth at Rollbar, an Angular Attack service sponsor

We have all been there. Fixing errors and debugging can take up to half of your time, or more if you're working on that hard-to-repo edge case exception. It can be particularly tricky when you're in a hackathon situation and quickly assembling code into a MVP app. It's hard to know what errors your app will throw in production and what sort of experience or performance impact they might cause.

That's where Rollbar comes in. No need to be anxious about any unknown exceptions in your Angular Attack project. By including the ng-rollbar library in your Angular application, errors are automatically logged and reported before they become critical issues and ruin your day. With Rollbar, you can spend more time hackathon-ing, writing new code and building new features (the fun stuff) instead of fixing bugs (the not-so-fun stuff).

Getting Started

The first thing you'll want to do is sign up for a Rollbar account. When you signup, Angular Attack participants get 100,000 error events tracked for free. :) This should help you become familiar with Rollbar and see if it is right for your Angular application. Also, Angular Attack hackathon winners will receive 3 months of Rollbar free (a $300 value), per team member.

Once you're signed up, you'll create a new Rollbar Project.

project creation

Since we're using Angular, we'll select JavaScript for our language. On the next page, you'll receive a client-side access token which you'll need to save for later. Don't worry about the <script> tag provided. We'll be installing the ng-rollbar library instead to use Rollbar with Angular 1.x (ng-rollbar is not currently compatible with Angular 2).

Installing ng-rollbar

Installing ng-rollbar is easy.

Simply run:

bower install ng-rollbar --save

Then, include the library in your application with this script tag:

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

Inject the library into your app.js file:

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

Configuring ng-rollbar

The last thing you'll need to do is update your application's configuration:

app.config(function(RollbarProvider) {
  RollbarProvider.init({
    accessToken: "YOUR_ACCESS_TOKEN",
    captureUncaught: true,
    payload: {
      environment: 'YOUR_ENVIRONMENT'
    }
  });
}); 

You can test if everything was set up correctly by opening a console window and entering this:

window.onerror("TestRollbarError: testing window.onerror", window.location.href);

Once everything is installed correctly, you should see the TestRollbarError in your Rollbar Dashboard.

Rollbar Dashboard

Working with Rollbar

Now that you have Rollbar integrated into your Angular app, any errors that occur will be automatically captured and viewable from your Rollbar Dashboard and Error Items page. You'll be able to easily see what errors are occurring, how often they occur and the full context and analytics into your exceptions.

Rollbar provides a full stack trace of every exception allowing you to see exactly what's happening in your application when an error occurs. You can also view the user's browser and OS where the error occurred.

Errors are grouped by frequency so that you can prioritize which ones to work on first. You'll be able to view trends over time. If a certain error spikes in frequency, you'll know about it right away.

Rollbar also allows you to manually handle errors in your application and prioritize which errors are the most critical to your application's health.

Manually Handling Angular Errors with Rollbar

To manually handle errors, just inject Rollbar into the corresponding Angular component. This code looks something like this:

myApp.controller('MainCtrl', function($scope, Rollbar) {
  $scope.onSomeEvent = function() {
    Rollbar.error('this is an error with special handling');
  };
});

You can also flag errors by severity, so that you can make sure the most critical errors are known and handled first.

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

Moving Forward

Now that you have Rollbar integrated into your Angular app, you can rest assured that you'll know about any bugs you accidentally write into your Angular Attack project. No worries, it happens.:)

We're excited to sponsor Angular Attack and can't wait to see all of the amazing projects that are built this weekend! For more information about ng-rollbar, view the docs. Happy hacking!