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.
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:
- Edit the application code and locate that section in the code where the route change of interest to you is initiated.
- 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.
Between these two checkpoints, call the vPage function in the format shown below:
<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:
- 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:
Note that variable names should always be specified without single quotes (').