Angular

Angular error tracking

Angular (v2+)


Step 1

Install the client library

On the command line

Install the raygun4js library with NPM:

$ npm install raygun4js --save

Step 2

Setup

Add the following setup code. For this example, we’ll add a new script: app.raygun.setup.ts

This is our recommended setup for Angular + TypeScript.

Error handling

import * as rg4js from 'raygun4js';
import { ErrorHandler } from '@angular/core';
const VERSION_NUMBER = '1.0.0.0';
rg4js('apiKey', 'INSERT_API_KEY_HERE');
rg4js('setVersion', VERSION_NUMBER);
rg4js('enableCrashReporting', true);
rg4js('enablePulse', true);
export class RaygunErrorHandler implements ErrorHandler {
  handleError(e: any) {
    rg4js('send', {
      error: e,
    });
  }
}

In the main app module script (app.module.ts):

import { ErrorHandler } from '@angular/core';
import { RaygunErrorHandler } from './app.raygun.setup';
// Add the custom error handler to the providers array
@NgModule({
  imports: [...],
  declarations: [...],
  providers: [{...}, { 
    provide: ErrorHandler, 
    useClass: RaygunErrorHandler 
  }],
  bootstrap: [...]
})

Tracking route changes In the main app component script (app.component.ts):

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, NavigationError } from '@angular/router';
import * as rg4js from 'raygun4js';
export class AppComponent implements OnInit {
  constructor(private router: Router) {}
  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // Track navigation end
        rg4js('trackEvent', {
          type: 'pageView',
          path: event.url
        });
      } else if (event instanceof NavigationError) {
        // Track navigation error
        rg4js('send', {
          error: event.error
        });
      }
    });
  }
}

This is just a simple example of the type of routing events you can track, see the Angular routing events documentation for all of the types of events you can track.

Step 3

Add user data:

To set up the library to transmit data for the currently logged-in user, add the following lines of JS code inside the end of the script block from the previous step. (optional, but highly recommended):

rg4js('setUser', {
  identifier: 'users_email_address_or_unique_id',
  isAnonymous: false,
  email: 'users_email_address@domain.com',
  firstName: 'Firstname',
  fullName: 'Firstname Lastname'
});

Step 4

Done! We recommend raising a test exception from your application right now to view your dashboard and test that everything is wired up correctly.

Documentation missing?

If we don't have documentation about your desired topic, send us a message and we'll create it for you.