Awesome error tracking solution for Angular2 Apps

Vaishnavi -

Tracking down a problem in a rich client application is hard when you can’t see what your user is seeing and experiencing. Worse, when the errors raised exist only in the context of the users browser, where we, as the developers of the code can’t get to them.

Managing server side errors is pretty easy compared with client side errors. For server errors all we need to do, is focus on our servers. But tracking client side errors is not that straightforward.

Also, we can’t really depend on stack traces because of the minified code. Even though we capture errors, it’s not as easy as server side errors due to the browser specific issues and constraints.

Atatus makes this easy by receiving every exception that your Angular2 web app throws, and captures the contextual actions that triggers specific error such as what the user gave as input and what the user clicked.

Installation

  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 Angular2 web 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>

Catching exceptions in Angular2

The default implementation of ErrorHandler prints error messages to the Console. To intercept error handling, write a custom exception handler that sends the error to atatus as follows

// /app/atatus.handler.ts
import { ErrorHandler } from '@angular/core';
declare var atatus: any;

class AtatusErrorHandler implements ErrorHandler {
  handleError(error:any) : void {
    if (atatus) {
      // Send the error to Atatus
      atatus.notify(error.originalError || error);
    }
  }
}

export default AtatusErrorHandler;

And then at bootstrap time, add a custom error handler to the providers in @NgModule.

// /app/app.module.ts
import { ErrorHandler } from '@angular/core';
import { AppComponent } from './app.component';
import AtatusErrorHandler from './atatus.handler';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    providers: [{provide: ErrorHandler, useClass: AtatusErrorHandler}]
})

export class AppModule { }

Manually sending errors

Atatus also gives you the ability to manually track errors easily at any time, like this:

atatus.notify(new Error('my custom error'));

There’s also a bunch of other useful options available including unique user tracking, version tracking, tags and more – check out the documentation for the details.

Start using Atatus now

Atatus makes error tracking easier on your web and 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.