RUM-Enabling Virtual Pages in SPA

The procedure for this varies according to the Angular JS framework in use.

On Angular JS v1.x, do the following:

1. Login to the system hosting the single page application.

2. You need to track route changes, so you can capture virtual page navigations. For that, edit the the app.component.ts file in the <APP_HOME>\src\app directory, and insert the following code block inside the ngOnInit() function invocation:

   // declare after all the import statements.

   declare var EGRUM: any;

   // The following code need to be placed inside ngOnInit function

   // eG RUM SPA Monitoring Starts

    

   (function(baseApp){

   if(baseApp){

   var reqArr = baseApp.requires;

   if(reqArr){

   var ngIndex = reqArr.indexOf("ngRoute");

   if(ngIndex > -1){

   baseApp.run(function($rootScope) {

   $rootScope.$on('$routeChangeStart', function(event, next, current) {

   var EGRUM = window.EGRUM;

   if(EGRUM){

   if (next && next.$$route) {

   EGRUM.vPage('page', next.$$route.controller);

   }

   EGRUM.vPage('markVirtualPageStart');

   }

   });

   $rootScope.$on('$routeChangeSuccess', function(event, next, current) {

   var EGRUM = window.EGRUM;

   if(EGRUM){

   EGRUM.vPage('meta', 'controller', next && next.$$route ? next.$$route.controller : '');

   EGRUM.vPage('markVirtualPageEnd', {

   status: 'completed',

   url: window.location.href

   });

   }

   });

   $rootScope.$on('$routeChangeError', function(event, next, current, rejection) {

   var EGRUM = window.EGRUM;

   if(EGRUM){

   EGRUM.vPage('markVirtualPageEnd', {

   status: 'error',

   url: window.location.href,

   explaination: rejection.toString()

   });

   }

   });

   });

   }

   var uiIndex = reqArr.indexOf("ui.router");

   if(uiIndex > -1){

   baseApp.run(function($transitions){

   $transitions.onStart({}, function(trans){

   var EGRUM = window.EGRUM;

   if(EGRUM){

   EGRUM.vPage('page', trans.to().name);

   EGRUM.vPage('markVirtualPageStart');

   }

   });

   $transitions.onSuccess({}, function(trans){

   var EGRUM = window.EGRUM;

   if(EGRUM){

   EGRUM.vPage('meta', 'controller', trans.to().name);

   EGRUM.vPage('markVirtualPageEnd', {

   status: 'completed',

   url: $transitions.router.stateService.href($transitions.to().name, {}, {absolute: true})

   });

   }

   });

   $transitions.onError({}, function(trans){

   var EGRUM = window.EGRUM;

   if(EGRUM){

   EGRUM.vPage('markVirtualPageEnd', {

   status: 'error',

   url: $transitions.router.stateService.href($transitions.to().name, {}, {absolute: true}),

   explanation: trans.error().toString()

   });

   }

   });

   });

   }

   }

   }

   })(mainApp);

    

   // eG RUM SPA Monitoring Ends

3. Then, save the file.

4. For capturing error events in virtual pages, edit the app.module.ts file in the <APP_HOME>\src\app directory, and insert the following code block after all the import statements in that file:

   mainApp.config(["$provide", function ($provide) {

   $provide.decorator("$exceptionHandler", ["$delegate", function($delegate) {

   return function (exception, cause) {

   var egrum = window.EGRUM;

   if( egrum && egrum.onerror){

   EGRUM.onerror({

   message: err.message,

   filename: err.filename,

   lineNumber: err.lineNumber,

   columnNumber: err. columnNumber,

   stack: err.stack,

   meta: {key1:value1, key2:value2}

   });

   }

   };

   }]);

   }]);

5. Then, save the file.
6. Finally, restart the target application.

On Angular JS v2 to v9.x, do the following:

1. Login to the system hosting the single page application.

2. Edit the the app.component.ts file in the <APP_HOME>\src\app directory, and insert the following code block inside the ngOnInit() function invocation:

   // declare after all the import statements.

   declare var EGRUM: any;

   // The following code need to be placed inside ngOnInit() function

   // eG RUM SPA Monitoring Starts

   this.router.events.subscribe(event => {

   let componentName = (this.activatedRoute.component !== null) ? this.activatedRoute.component['name'] : 'default';

   if (event instanceof RoutesRecognized) {

   let actSnap = event.state.root;

   const childLength = actSnap.children.length;

   while (actSnap && childLength > 0) {

   actSnap = actSnap.children[0];

   if (actSnap && actSnap.component && actSnap.component['name']) {

   componentName = actSnap.component['name'] || componentName;

   }

   }

   }

   if (event instanceof NavigationStart) {

   if (typeof EGRUM !== 'undefined') {

   EGRUM.vPage('markVirtualPageStart');

   EGRUM.vPage('page', componentName);

   EGRUM.vPage('meta', 'component', componentName);

   }

   } else if (event instanceof NavigationEnd) {

   if (typeof EGRUM !== 'undefined') {

   EGRUM.vPage('markVirtualPageEnd', {status: 'completed', url: window.location.href});

   }

   } else if (event instanceof NavigationError) {

   if (typeof EGRUM !== 'undefined') {

   EGRUM.vPage('markVirtualPageEnd', {

   status: 'error',

   url: window.location.href,

   explanation: event['error'] && event['error'].toString()

   });

   }

   } else if (event instanceof NavigationCancel) {

   if (typeof EGRUM !== 'undefined') {

   EGRUM.vPage('markVirtualPageEnd', {

   status: 'aborted',

   url: window.location.href,

   explanation: event['reason'] || ''

   });

   } the

   }

   });

   // eG RUM SPA Monitoring Ends

3. Then, save the file.

4. For capturing error events in virtual pages, edit the app.module.ts file in the <APP_HOME>\src\app directory, and insert the following code block after all the import statements in that file:

   // Place the following code in app.module.ts after all import statements

   declare var EGRUM: any;

   @Injectable()

   export class EGRUMErrorHandler implements ErrorHandler {

   handleError(err:any) : void {

   EGRUM.onerror({

   message: err.message,

   filename: err.filename,

   lineNumber: err.lineNumber,

   columnNumber: err. columnNumber,

   stack: err.stack,

   meta: {type:"Internal Error."}

   });

   }

5. Then, save the file.
6. Finally, restart the target application.