Real User Monitoring for Single Page Applications
With Site24x7 Real User Monitoring, you can monitor the performance of applications built on SPA framework and optimize them for better customer experience.
What is Single Page Application (SPA)?
Single-Page Applications are Web applications that load a single HTML page and dynamically update that page as the user interacts with the application. The most notable difference between a traditional website and an SPA is the reduced amount of page refreshes. Single Page Applications have a heavier usage of AJAX — a way to communicate with back-end servers without doing a full page refresh — to get data loaded into application.
Challenges in monitoring Single Page Applications:
In regular web applications, time taken for page load completion is obtained by listening to the page onload event in browser.
In case of Single Page Applications, the time taken for page load completion cannot be obtained by page onload event since the data are dynamically obtained from the server using AJAX calls.
Hence, for each SPA framework, the page load metrics are calculated by listening to particular events specific to the framework.
Currently, Site24x7 RUM has three event listeners in order to capture the route changes in all SPA frameworks. We listen to Network (XHR calls), DOM (mutation observer), and History changes (state changes or URL changes).
Identifying route changes in different SPA frameworks using the three event listeners:
A transaction is considered a single page transaction if there is a state change (indicated by pushState, replaceState, or hash change) and high network (XHR calls) or DOM activity (mutation observer).
A SPA transaction is identified by significant network and DOM activity (i.e., if multiple requests start at almost the same time) and a state change, rather than detecting route changes to gather network and DOM performance metrics. The Site24x7 script no longer needs to be included in the routers of various frameworks. This also aids in collecting appropriate start and end times for SPA transactions by relying on Browser history APIs.
A transaction is not considered an SPA transaction if a route change occurs without the completion of the current route change.
The load times of route changes in SPA Frameworks:
Start time: When the URL changes, when there is additional network activity, or when the DOM changes, the start time is set based on the lowest start time sent from the three listeners (Network, DOM, or History).
End time: When there is no activity for a threshold time limit, the end time is calculated by listening to the mutation observer and network activity and choosing the highest end time from the listeners.
Total Load time: Start time - End time.
Network time: Network performance, often known as network time, is calculated using the resources (XHR calls) that are called through the browser's performance object at the start and end times.
Document processing time: Total Load time - Network time.
Metrics captured:
For every dynamic page load, the corresponding URL, it's respective AJAX calls, response time of each AJAX call, response codes and errors (if any) are captured.
Check out the following installation instructions to enable RUM for Single Page Applications: