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.