RUM-Enabling Single Page Applications (SPAs)

A single page web application, as the name suggests, is a web application that fits itself on to a single web page with the goal of providing its users an experience similar to that of desktop applications.

In traditional websites, when a user navigates from one page to another, the associated HTML, Javascript, CSS etc is rendered each time a new page loads. In single page applications, all of the necessary code is loaded once and changed when needed in response to user actions. The page does not reload during the entire user session.

Because of these characteristics, SPAs lend themselves to the following benefits:

  • Provides the user better experience- The web pages are extremely fast and responsive.

  • Allows users to work offline- Even if the user loses internet connectivity, he/she can still continue working because all the pages are already loaded in a SPA.

eG RUM is capable of monitoring user experience with single-page applications created using the following frameworks: React, Angular, AngularJS, and Vue. For SPAs, eG RUM monitors 'virtual page views', in addition to base pages, iFrames, and AJAX page views. A virtual page view / page transition, also known as a soft navigation, is a hit that is tracked as a page view, even when no new web page has actually been loaded into the browser. Typically, virtual page views are fired by calling a Javascript - for instance, when route changes - presenting the user with a different view of the application, but without any change in the main URL. Using eG RUM, administrators can track the load time of virtual pages and capture virtual page errors. Detailed diagnostics lead administrators to the exact virtual pages that are slow/erroneous, and also indicate the underlying application component name and its execution status. This greatly helps in troubleshooting the poor performance of virtual pages.

Follow the steps below to RUM-enable an SPA:

  1. Figure 1 will then appear. From the CONFIGURED TESTS list, select the Website test, and click the Configure button.

    Figure 1 : Selecting the eG RUM test to configure

  2. Figure 2 will then appear listing the parameters of Website test. Keep scrolling down the list until the Enable SPA Monitoring parameter becomes visible (see Figure 2).

    Figure 2 : Enabling SPA monitoring for the target RUM component

  3. By default, the Enable SPA Monitoring slider is set to No by default. Set this flag to Yes to turn on SPA monitoring, and then click the Update button in Figure 2 to save the changes.

  4. Figure 3 will then appear.

    Figure 3 : Copying the HTML code snippet

  5. Set the Select the source file type on which eG RUM JavaScript code snippet is to be included parameter to HTML. Then, copy the HTML code snippet that is displayed in the text area below and paste it the target web application's index.html after the head tag, but before any other script tags.

 .