Single page apps

Overview

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 pathset 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 the 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
  });
});

On this page: