RUM-Enabling Generic Single Page Applications (SPA)

To RUM-enable any SPA, do the following:

1. Edit the application code and locate that section of the code where the route change you want to track is initiated. Inside that section, call the vPage function of the eG RUM API and insert the markVirtualPageStart and markVirtualPageEnd checkpoints, as shown in the sample below:

   // Application Code which routes to another view. ….

   //Manual Reporting of Virtual Page Starts here.

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

   EGRUM.vPage('markVirtualPageStart');

   }

   // Application Code … after completing the route finishes mark the success or error.

   // For successful completion of Virtual Page Navigation

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

   EGRUM.vPage('markVirtualPageEnd', {

   status: ‘success’,

   url: ‘<URL or Identifier for the transaction >’

   });

   }

   The markVirtualPageStart checkpoint records the time at which the route change begins. The markVirtualPageEnd checkpoint records the time at which you are successfully routed to a different view of the application. Typically, eG RUM computes the time that elapsed between these two checkpoints, and reports that difference as the load time of that virtual page.

2. Once you insert the code block containing the two checkpoints, save the file and restart the target application. You will then find eG RUM capturing and reporting metrics related to the custom route.

Likewise, the JavaScript API can also be used to capture errors in an SPA. For that, edit the application code and locate that section of the code governing the virtual page navigation of interest to you. Inside this section, insert the markVirtualPageStart and markVirtualPageEnd checkpoints as described above to measure the load time for a successful virtual page navigation. Additionally, insert another markVirtualPageEnd checkpoint, as shown by the sample below, for capturing navigation failures/errors:

// For Failed Virtual Page Navigation

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

EGRUM.vPage('markVirtualPageEnd', {

status: 'error',

url: ‘<URL or Identifier for the transaction >’,

explanation: ‘Error message details’

});

}

Once this is done, save the file and restart the target application for the changes to take effect.