Angular 1

Step 1: Add Raygun4JS

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&&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: Configure Raygun4JS

To enable Crash Reporting and Real User Monitoring monitoring 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);
  rg4js('enablePulse', true);
</script>

Step 3: Setup a custom error handler

You will need to add a custom $exceptionHandler in Angular. This is to capture any errors that happen in your Angular code and send them to Raygun.

angular
  .module('exceptionOverride', [])
  .factory('$exceptionHandler', function() {
    return function(exception, cause) {
      rg4js('send', { error: exception, customData: { cause: cause }, tags: ['Angular'] });
    };
  });

Step 4: Tracking Single Page Application (SPA) events

Real User Monitoring supports SPA’s by calling a trackEvent method when a page transition occurs. In Angular we can listen to the $routeChangeSuccess event listener and call the trackEvent method to notify Raygun that the user is viewing a new page.

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

More documentation about the trackEvent method and how to track SPAs can be found here.


Step 5: Capture failed Ajax requests (optional)

You can track failed Ajax requests by adding a new interceptor on the $httpProvider. This new interceptor will then send an error to Raygun when a requestError or responseError event occurs.

$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 on interceptors see the official docs.


Step 6: Tracking custom timings (optional)

Custom timings enables you to track up to 10 additional performance metrics of your choosing with each full page load.

You can find more information about our custom timings feature here.


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.