Angular

Monitor and Fix Angular Errors with Rollbar

Real-time logging, alerting, and analytics for Angular errors

Adding Rollbar is easy!

Install ng-rollbar, or for Bower run the following:

bower install ng-rollbar --save

Add the SDK to your application.

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

Add to your app.js file.

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

Update and configure Rollbar with YOUR_ACCESS_TOKEN.

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

Send a test to your console.

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

Run the following on npm:

npm install rollbar --save

Configure Rollbar using your account POST_CLIENT_ITEM_ACCESS_TOKEN.

import * as Rollbar from 'rollbar';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { AppComponent } from './app.component';

const rollbarConfig = {
  accessToken: 'POST_CLIENT_ITEM_ACCESS_TOKEN',
  captureUncaught: true,
  captureUnhandledRejections: true,
};

@Injectable()
export class RollbarErrorHandler implements ErrorHandler {
  constructor(private injector: Injector) { }
  handleError(err:any) : void {
    var rollbar = this.injector.get(Rollbar);
    rollbar.error(err.originalError || err);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
  providers: [
    { provide: ErrorHandler, useClass: RollbarErrorHandler },
    { provide: Rollbar,
      useFactory: () => {
        return new Rollbar(rollbarConfig)
      }
    }
  ]
})
export class AppModule { }  

Send a test to your console.

window.onerror("TestError: Hello World", window.location.href)

Powerful application error monitoring

Smart error grouping and alerting

Spend less time debugging, searching logs, recreating issues and triaging hundreds of alerts. Get error notifications in real-time, grouped by root cause, with rich contextual data. Including detailed stack traces, request params, URL, environment, and affected users.

JavaScript error logging reporting tool

Easy-to-use workflows

Take control of errors with easy-to-use workflow controls. Get notified of regressions when Resolved errors reoccur. See what matters and Mute to hide items from your view. Override the Severity of errors. Distribute tasks by assigning errors to members of your team. And create issues in your preferred issue tracker (JIRA, Trello, Asana, Pivotal Tracker, more).

JavaScript debugging and logging workflow

X-ray vision for poor experiences

Ignored errors, negatively impact your customers experience. Identify 1 user issue before it affects 1,000. Get visibility into the types of errors seen by specific users and the number of users for each error. Be more informed and proactive when things break.

client-side javascript tracking for app users

Track errors to code deployments

Rollbar keeps a history of your deploys, commits, and undeployed changes. For each error, Rollbar automatically identifies the suspect deploy, that caused the issue. See which commits were included in each deploy and view full diffs for even more insight and context.

code deployment error tracking

Handling errors in Angular

Without Rollbar With Rollbar
Find errors after users complain Catch errors before users are impacted
Searching for clues in logs Automatically identify root cause w/ data
Failing to debug minified code Use source maps to broken code
No insight into which client state lead to errors Telemetry; know the breadcrumbs that led to errors
Time to resolution: days, weeks Time to resolution: seconds, minutes

Detect, diagnose, and debug Angular errors with ease

Source maps

Rollbar supports Angular source maps to get meaningful stack traces when using minified Angular JS. Once you enable source mapping, you'll see the original source filename, line number, method name, and code snippet in the error stack trace.

source maps and minified angular javascript

Telemetry

Telemetry provides a timeline of events in the browser leading up to when an Angular error occurred. This helps to identify the root cause of Angular errors faster by providing critical information on user behavior, network activity, and more.

Angular Telemetry Data for Errors

Cross browser support

Rollbar.js, is compatible with all major browsers, including the latest versions of IE. Analyze errors broken down by browser, and identify problems caused by specific browsers. Or, choose to ignore errors from browsers that your application does not support.

cross browser support for angular 2 exceptions

Contextual data

Get insight into users who've experienced errors, or which deployments are suspected to have caused the error. See what environments experience each error to identify patterns affecting specific browsers, operating systems, IPs, etc.

get contextual error data with rollbar

Reduce noise

Rollbar offers a handful of options to help, reduce the noise and focus on impactful Angular errors. Rollbar automatically groups errors using fingerprints, merge similar JavaScript errors, and custom rules to ignore specific errors.

merge duplicate angular errors

Rollbar works where you do

Server-Side

Messaging

Issue Tracking

IT Alerting

Source Control

Before Rollbar we were flying blind. Now when errors occur, we go from problem identified to root cause to resolution within minutes. Before users notice.

Arnaud Ferreri

Engineering Lead, Instacart

Want to learn more about how Rollbar can help your team?

Give us a few details and we'll get in touch!