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.
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.
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.
Using Raygun with Server Side Rendering
Because server side rendering does not have access to the client-side window
object, the setup needs to be a little different.
Step 1. Update index.html
Use the regular js setup as described here in your index.html file
Step 2. Update app.raygun.setup.ts
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,
});
}
}
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.