Capturing Custom Diagnostics from Generic Single Page Applications (SPA)

When monitoring a single page application, by default, eG RUM captures useful information such as virtual page names and component names of every route that is tracked. These details are displayed as part of detailed diagnostics, and greatly aid in troubleshooting slow/erroneous virtual page navigations.

If required, you can fine-tune the eG RUM JavaScript API, so that you can capture additional diagnostic information that you may require for troubleshooting performance issues with single page applications.

For this, the JavaScript API provides the vPage function. This function takes a key and a value as arguments. The key represents the column in the detailed diagnostics that should capture the diagnostic information. Using the value argument, you can either explicitly configure the exact value that you want displayed in that column, or indicate the variable from which the value is to be fetched at run-time.

For instance, say the single page application being monitored is a shopping web site. Whenever a route change occurs, you want the route to be captured and its load time to be computed. Additionally, you want the detailed diagnosis to display the name of the product purchased in a column called Product Name. Say, for one particular route, you want to explicitly set this Product Name as Gold. To achieve this, do the following:

  1. Edit the application code and locate that section in the code where the route change of interest to you is initiated.
  2. Once you locate the section, ensure that the markVirtualPageStart and markVirtualPageEnd checkpoints are inserted therein to compute the time taken by the virtual page navigation.
  3. Between these two checkpoints, call the vPage function in the format shown below:

    EGRUM.vPage('meta', '<key>','<value>')

    Here:

    <key> refers to the column in the detailed diagnosis where the product name is to be displayed. In the case of our example, this is Product Name.

    <value> refers to the value to be displayed in the column. In the case of our example, this is Gold.

    Therefore, the vPage function call for our example will be as follows:

    EGRUM.vPage('meta','Product Name','Gold')

  4. Once this specification is entered between the markVirtualPageStart and markVirtualPageEndcheckpoints, save the application code and restart the target application.

Now, assume that the product name to be displayed in the detailed diagnosis has to be retrieved from the pname variable in the application code. In this case, you have to pass this variable name as the value argument of the vPage function call. The vPage function call will therefore be as follows:

EGRUM.vPage('meta','Product Name',pname)

Note that variable names should always be specified without single quotes (').