1. Home
  2. Language Guides
  3. JavaScript
  4. Crash Reporting
  5. Angular

Angular

The following docs are applicable to Angular 2+ only. Angular 1 (also known as AngularJS) has reached its EOL in January 2022 which, therefore, we no longer support.

Step 1 - Install the Raygun4JS provider

Install the raygun4js library with NPM:

npm install raygun4js --save

Or with Yarn:

yarn add raygun4js

For Typescript you will also need the types:

npm i --save-dev @types/raygun4js

Step 2 - Configure Raygun

Create a new script named app.raygun.setup.ts. This script will store our configuration, which enables Crash Reporting.

Create a custom error handler to send errors to Raygun instead of logging them to the console. If you want to maintain console logging, you can add a console.error line to your handler.

import rg4js from 'raygun4js';
import { ErrorHandler } from '@angular/core';

rg4js('apiKey', 'paste_your_api_key_here');
rg4js('enableCrashReporting', true);

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

Step 3 - Import the setup script

Import the RaygunErrorHandler from app.raygun.setup into 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: [...]
})

Step 4 - Release

Deploy Raygun into your production environment for best results, or raise a test exception. Once we detect your first error event, the Raygun app will automatically update.

For advanced setup instructions please refer to the Advanced Features documentation page.

For troubleshooting tips please refer to the Troubleshooting documentation page.

In your app.module.ts file, extend the AppModule component to subscribe to Router events. Using Angular's NavigationError event we can track any navigation errors a user has encountered.

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

export class AppModule implements OnInit {
  constructor(private router: Router) {}
  ngOnInit() {
    this.router.events.subscribe(event => {
      // Track navigation errors when the NavigationError event occurs
      if (event instanceof NavigationError) {
        // Track navigation error
        rg4js('send', {
          error: event.error
        });
      }
    });
  }
}

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

Step 1 - Set up the Raygun4JS provider

Ensure you have added the Raygun4JS CDN or NPM package and have enabled Crash Reporting using the instructions above before continuing.

Step 2 - Update app.raygun.setup.ts

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

import rg4js from 'raygun4js';
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,
    });
  }
}

Step 3 - Inject a fake ErrorHandler For SSR

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.

Step 4 - Inject the real ErrorHandler to be rendered on the client side

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.

Optional - Enable Real User Monitoring

Enable Real User Monitoring to also track your website's performance.

<script type="text/javascript">
  rg4js('enablePulse', true); // Enables Real User Monitoring
</script>

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

On this page: