Angular

Angular 2+

Step 1

Install the client library

On the command line,
Install the raygun4js library with NPM:

npm install raygun4js --save

Step 2

Setup

Add the following lines of setup code to your Angular application.
This is our recommended setup for Angular + TypeScript.

Enable Crash Reporting
For this example, we’ll add a new script: app.raygun.setup.ts

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);
export class RaygunErrorHandler implements ErrorHandler {
  handleError(e: any) {
    rg4js('send', {
      error: e,
    });
  }
}

In the main app module script (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: [...]
})

Tracking route changes In the main app component script (app.component.ts):

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

// ...

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

Enable Real User Monitoring
Continuing on from the previous previous example, to enable RUM you just need to add the following line to your Raygun configuration:

rg4js('enablePulse', true);

To track route changes we just need to add the following conditional to our main app component script (app.component.ts):

import { NavigationEnd } from '@angular/router';
// ...

if (event instanceof NavigationEnd) {
  // Track navigation end
  rg4js('trackEvent', {
    type: 'pageView',
    path: event.url
  });
}

Here’s an example with both Crash Reporting and Real User Monitoring configured together:

app.raygun.setup.ts

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);
export class RaygunErrorHandler implements ErrorHandler {
  handleError(e: any) {
    rg4js('send', {
      error: e,
    });
  }
}

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

app.component.ts

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

// ...

export class AppComponent implements OnInit {
  constructor(private router: Router) {}
  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // Track navigation end
        rg4js('trackEvent', {
          type: 'pageView',
          path: event.url
        });
      } else if (event instanceof NavigationError) {
        // Track navigation error
        rg4js('send', {
          error: event.error
        });
      }
    });
  }
}

This is just a simple example of the type of routing events you can track, see the Angular routing events documentation for all of the types of events you can track.

Step 3

Add user data

To set up the library to transmit data for the currently logged-in user, add the following lines of JS code inside the end of the script block from the previous step.
(optional, but highly recommended):

rg4js('setUser', {
  identifier: 'users_email_address_or_unique_id',
  isAnonymous: false,
  email: 'users_email_address@domain.com',
  firstName: 'Firstname',
  fullName: 'Firstname Lastname'
});

Done!

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.

note: This provider is open source and available at the Raygun4js repository.


Angular 1.x

Step 1

Add script

Add this snippet to your markup, before the closing </head> tag:

<script type="text/javascript">
  !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
  (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
  f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
  h&amp;&amp;h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
  e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
</script>

This will fetch the Raygun4JS script from our CDN asynchronously, so it doesn’t block the page load. It will also catch errors that are thrown while the page is loading, and send them when the script is ready.

Step 2

Enable Crash Reporting

Complete step 1 then add the following configuration lines to your JavaScript site code, just before the closing </body> tag with your API key included.

<script type="text/javascript">
  rg4js('apiKey', 'paste_your_api_key_here');
  rg4js('enableCrashReporting', true);
</script>

This will configure the provider to automatically send all unhandled JavaScript errors to Raygun.

Enable Real User Monitoring

To enable Real User Monitoring you just need to add the following line to your Javascript configuration:

rg4js('enablePulse', true);

Here’s an example of a correct configuration with both Crash Reporting & Real User Monitoring enabled:

<script type="text/javascript">
  rg4js('apiKey', 'paste_your_api_key_here');
  rg4js('enableCrashReporting', true);
  rg4js('enablePulse', true);
</script>

Step 3

Failed Ajax requests

You can hook failed Ajax requests with $http in AngularJS by providing an Interceptor that sends to Raygun on error.
Below is one simple possible implimentation using custom data:

$httpProvider.interceptors.push(function($q, dependency1, dependency2) {
  return {
   'requestError': function(rejection) {
       rg4js('send', {
          error: 'Failed $http request',
          customData: { rejection: rejection }
       });
    },

    'responseError': function(rejection) {
       rg4js('send', {
          error: 'Failed $http response',
          customData: { rejection: rejection}
       });
    }
  };
});

For more information, see the official docs under Interceptors.

Step 4

Tracking Single Page Application (SPA) events

Raygun Real User Monitoring supports client-side SPAs through the trackEvent function:

rg4js('trackEvent', {
    type: 'pageView',
    path: '/' + window.location.pathname // Or perhaps window.location.hash
});

When a route or view change is triggered in your SPA, this function should be called with type being pageView and path set to a string representing the new view or route.
RUM will collect up all timing information that is available and send it to the dashboard. These are then viewable as ‘virtual pages’.

Here’s a configuration example that you can use or adapt for your client-side view inside Angular.

$scope.$on('$routeChangeSuccess', function () {
  rg4js('trackEvent', {
      type: 'pageView',
      path: '/' + $scope.area
  });
});

Naturally, if you are using a more full-featured routing system, you should trigger a pageView inside this when the route changes.

Tracking custom timings

You can override the time when Raygun4JS considers your page to be loaded at, as well as send up to 10 custom timings of your choosing, with the Custom Timings capability.
For more information you can read our Custom timings documentation.

Done!

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.

note: This provider is open source and available at the Raygun4js repository.