Report Events with the JavaScript API

angular.module('myApp.controllers', [])
    .controller('VPCtrl', ['$scope', '$http', function ($scope, $http) {
            $scope.manualMarkVPEnd = function () {
                console.log("Mark the beginning of the virtual page and wait for markVirtualPageEnd() to be called.");
                ADRUM.markVirtualPageBegin("VPExample-ManuallyMarkEnd");
            }
            $scope.allowJSAgentMarkVPEnd = function () {
                console.log("Mark the beginning of the virtual page and allow the JS Agent to mark the virtual page end.");
                ADRUM.markVirtualPageBegin("virtualPageExample-JSAgentMarksEnd", false);
            }
            $scope.endVirtualPage = function () {
                console.log("Mark the end of the virtual page.");
                ADRUM.markVirtualPageEnd();
            }
            ...
        }
    ]
);

Report a custom Error event by passing properties via setters

var errorT = new ADRUM.events.Error();
errorT.msg('I am a custom error at line 100');
errorT.line(100);
ADRUM.report(errorT);

Report a custom Error event by passing properties via the constructor

var errorT = new ADRUM.events.Error({
msg: 'I am a custom error at line 100',
line: 100
});
ADRUM.report(errorT);

Report a custom Ajax event passing properties via setters

var ajaxT = new ADRUM.events.Ajax();
  
// set url
ajaxT.url('your xhr Url');
  
// mark timings
ajaxT.markSendTime(100);
ajaxT.markFirstByteTime(200);
ajaxT.markRespAvailTime(300);
ajaxT.markRespProcTime(400);
ADRUM.report(ajaxT);

Set up backbone SPA monitoring

var AppRouter = Backbone.Router.extend({
    routes: {
        "wines/:id": "wineDetails"
    },
    wineDetails: function (id) {
        var vpView = new ADRUM.events.VPageView();
        vpView.markVirtualPageStart();
        // vpView.markViewChangeStart();
        var wine = new Wine({id: id});
        wine.fetch({success: function(){
            vpView.markXhrRequestsCompleted();
            $("#content").html(new WineView({model: wine}).el);
            vpView.markViewDOMLoaded();
            vpView.markVirtualPageEnd();
            ADRUM.report(vpView);
        }});
        this.headerView.selectMenuItem();
    }
});

Correlate Ajax requests wih VPageView Events

var vPageView = new ADRUM.events.VPageView({
    url: 'http://localhost/#virtualpage1',
});
 
vPageView.start();
 
// SPA view routing and HTML partials fetching
vPageView.markViewChangeStart()
// AJAX requests for the HTML partials are automatically correlated with the VPageView
...
vPageView.markViewChangeEnd();
 
// HTML partials inserted into Browser DOM tree
...
vPageView.markViewDOMLoaded();
 
// SPA HTML AJAX data fetching
// Data AJAX requests are automatically correlated with the VPageView
...
 
vPageView.markXhrRequestsCompleted();
 
// call this when ending a new virtual page
vPageView.end();
 
ADRUM.report(vPageView);

Exclude Ajax from VPageView using ADRUM configuration

window['adrum-config'] = {
  "spa": {
    "angular": {
      "vp": {
        "xhr": {
          "exclude": {
            "urls": [{
              "pattern": 'heartBeatAjax'
            }]
          }
        }
      }
    }
  }
}

Exclude Ajax from VPageView event manually

var vPageView = new ADRUM.events.VPageView();
vPageView.stopCorrelatingXhrs();
  
var xhr = new XMLHttpRequest();
xhr.open('GET', '/heartBeatAjax');
xhr.send();
  
vPageView.startCorrelatingXhrs();