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.

Because server side rendering does not have access to the client-side window object, the setup needs to be a little different.

Use the regular js setup as described here in your index.html file

Replace the contents of app.raygun.setup.ts with:


import { ErrorHandler } from '@angular/core';
import { Injectable } from '@angular/core';

//To be injected at Client Side Render time
@Injectable()
export class RaygunErrorHandler implements ErrorHandler {
  handleError(e: any) {
    // @ts-ignore
    window.rg4js('send', {
      error: e,
    });
  }
}

//To be injected at Server Side Render time
@Injectable()
export class FakeRaygunErrorHandler implements ErrorHandler {
  handleError(e: any) {
    console.error('send', {
      error: e,
    });
  }
}

Update your app.server.module.ts to look something like this:


import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

import { ErrorHandler } from '@angular/core'; // <- Add this
import { FakeRaygunErrorHandler } from './app.raygun.setup';// <- Add this

@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  providers: [
  {
    provide: ErrorHandler, // <- Add this
    useClass: FakeRaygunErrorHandler // <- Add this
  }
],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

This will inject an ErrorHandler which reports errors to the console and does not need access to the window object.

Modify the app.module.ts file to look like this:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './modules/general/home/home.component';
import { NotFoundComponent } from './modules/general/not-found/not-found.component';
import { AppRoutingModule } from './app-routing.module';

import { ErrorHandler } from '@angular/core'; // <- Add this
import { RaygunErrorHandler } from './app.raygun.setup'; // <- Add this

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NotFoundComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    AppRoutingModule,
  ],
  providers: [
   {
     provide: ErrorHandler, // <- Add this
     useClass: RaygunErrorHandler // <- Add this
   }
],
  bootstrap: [AppComponent]
})
export class AppModule { }

This will inject an ErrorHandler when the page is rendered on the client side, which has access to the window object. So it is able to use the rg4js to send monitoring events.

On this page: