AngularJS

Installation

On the command line

Install the raygun4js library with NPM:

$ npm install raygun4js --save

Step 2

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.

User tracking

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'
});

Ajax requests

You can hook failed Ajax requests with $http in AngularJS by providing an Interceptor that sends to Raygun on error. One possible simple implementation using custom data:

$httpProvider.interceptors.push(function($q, dependency1, dependency2) {
  return {
   'requestError': function(rejection) {
       rg4js('send', {
          error: 'Failed $http request',
          customData: { rejection: rejection }
       });
    },

    'responseError': function(rejection) {
       rg4js('send', {
          error: 'Failed $http response',
          customData: { rejection: rejection }
       });
    }
  };
});

For more information, see the official docs under Interceptors.