1. Home
  2. Language Guides
  3. JavaScript
  4. Angular 2+

Angular 2+

Install the raygun4js library with NPM or Yarn:

npm install raygun4js --save

Create a new script named app.raygun.setup.ts. This script will store our configuration, enabling both Crash Reporting and Real User Monitoring.

For Crash Reporting we will create a new error handler to send any error straight to Raygun. Creating an error handler will overwrite the default error handler behavior, which logs the error to the console. If you wish to retain this behavior, you can also add a console.error line to your handler.

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

// Create a new ErrorHandler and report and an issue straight to Raygun
export class RaygunErrorHandler implements ErrorHandler {
  handleError(e: any) {
    rg4js('send', {
      error: e,
    });
  }
}

The next step is to import the app.raygun.setup script alongside our RaygunErrorHandler in our main app module.

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: [...]
})

Using Angular's NavigationEnd and NavigationError events we can track the exact pages a user has viewed and any navigation errors they encountered. Below is an example of how you can add route tracking to our main app component.

import { Component, OnInit } from '@angular/core';
import { Router, NavigationError, NavigationEnd } from '@angular/router';
import * as rg4js from 'raygun4js';

// ...

export class AppComponent implements OnInit {
  constructor(private router: Router) {}
  ngOnInit() {
    this.router.events.subscribe(event => {
      // Track page views when the NavigationEnd event occurs
      if (event instanceof NavigationEnd) {
        rg4js('trackEvent', {
          type: 'pageView',
          path: event.url
        });
      }

      // Track navigation errors when the NavigationError event occurs
      if (event instanceof NavigationError) {
        // Track navigation error
        rg4js('send', {
          error: event.error
        });
      }
    });
  }
}

You can setup user tracking to have a better idea of who is using your web application. To do so call the setUser method after your authentication step succeeds.

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

note:

The identifier field is the only mandatory field and is used to uniquely identify the user within Raygun.

The string properties on a User have a maximum length of 255 characters. Users who have fields that exceed this amount will not be processed.

Congratulations, you have successfully implemented Raygun into your application!

tip: We recommend raising a test exception from your application right now to view your dashboard and test that everything is wired up correctly. If your setup is not working get in touch.

The provider is open source and available at the Raygun4js repository.

On this page: