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

Angular 2+

Step 1: Install the Raygun4JS provider

Install the raygun4js library with NPM or Yarn:

npm install raygun4js --save

Step 2: Configure Raygun

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

Step 3: Import our setup script

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

Step 4: Track route changes and navigation errors

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

Step 5: Add user tracking (optional)

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.

View your data in Raygun!

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: