Installation

JavaScript error and performance monitoring with Raygun is available using the Raygun4JS provider.

Raygun4JS is a library that you can easily add to your website or web application, which will then monitor your application and display all JavaScript errors and frontend performance issues affecting your users within your Raygun account. Installation is painless.

The provider is a single script which includes the sole dependency, allowing you to drop it straight in. It is also available as a script snippet which loads the library from Raygun’s CDN.

Step 1 - Add script

Add this snippet to your markup before the closing </head> tag and before any <scripts> tags on your website:

<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&&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. With Crash Reporting enabled it will also catch errors thrown while the page is loading.

Step 2 - Enable Real User Monitoring

Add the following lines underneath the previous code in Step 1 with your API key included.

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

Optional - Enable Crash Reporting

Enable Crash Reporting to also track errors and exceptions occurring in your website.

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

User Tracking

Setup user tracking by providing the following information to the Raygun4JS provider after the previous code snippet.

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

Single Page Applications

Raygun’s Real User Monitoring supports client-side single page apps 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 single page application, this function should be called with type being pageView and path set to a string representing the new view or route. Real User Monitoring will collect up all timing information that is available and send it to your Raygun dashboard. These are then viewable as ‘virtual pages’.

The following are a couple of configuration examples that you can use or adapt for your client-side view library/framework. Naturally, if you are using a more full-featured routing system, you should trigger a pageView inside there when the route changes.

jQuery

$(window).hashchange(function() {
  rg4js('trackEvent', {
      type: 'pageView',
      path: '/' + location.hash
  });
});

AngularJS

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

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.

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