What is single page application monitoring?
Single page application monitoring is the practice of tracking performance, errors, and user interactions in web applications that dynamically rewrite a single HTML page instead of loading new pages. It uses Real User Monitoring (RUM) to capture metrics like AJAX response times, JavaScript errors, route change latency, and Core Web Vitals from real browser sessions.
Unlike traditional multi-page websites where each user action loads a new page from the server, SPAs rely heavily on asynchronous AJAX calls and client-side rendering to fetch and display content. This means the standard browser page load event does not capture the full user experience. SPA monitoring bridges this gap by detecting route changes through a combination of network activity (XHR calls), DOM changes (mutation observer), and browser history state changes (pushState, replaceState, or hash changes).
With Site24x7 RUM for SPAs, you get visibility into every soft navigation, the response time of individual AJAX calls, JavaScript error trends with full stack traces, and Core Web Vitals scores — all broken down by browser, geography, ISP, and platform. This data helps development and operations teams identify front-end bottlenecks, prioritize performance improvements, and ensure a fast, reliable experience for every user session.
How to set up SPA monitoring with Site24x7
1. Add a RUM monitor
Log in to Site24x7, navigate to the RUM section, and select Add Application. Enter your application name and set the performance threshold.
2. Choose SPA framework
Select SPA as the application framework type. Site24x7 uses framework-agnostic event listeners, so it works across Angular, React, Ember, Backbone, and custom SPA implementations.
3. Install the RUM script
Copy the JavaScript snippet provided by Site24x7 and paste it into the header of your web application. No changes to your application router are required.
4. Monitor your SPA dashboard
Perform transactions in your application and view real-time performance data in the Site24x7 RUM dashboard — including page load times, AJAX calls, errors, and user sessions.
Supported SPA frameworks
SPA framework monitoring: Angular, React, Ember & Backbone
Site24x7 RUM uses a framework-agnostic approach to SPA monitoring. Instead of requiring framework-specific router integration, the monitoring script listens to three types of browser events to detect route changes automatically:
- Network activity (XHR calls): Detects when AJAX requests are initiated during a route transition, capturing individual request response times and status codes.
- DOM changes (mutation observer): Monitors the Document Object Model for significant changes that indicate new content rendering after a navigation event.
- History state changes: Listens for pushState, replaceState, and hash change events that signal URL updates without full page reloads.
A transaction is identified as a single page transaction when a state change occurs alongside significant network or DOM activity. This approach accurately captures start and end times for each SPA transaction without requiring modifications to your application's routing code — whether you use Angular's ngRoute or ui-Router, React Router, Ember's router, or any other routing library.
Key SPA performance metrics
Page load & resource timing
Track throughput, average response time, and response time breakdowns including DNS time, redirection time, and document rendering time for every SPA page view.
AJAX call performance
Monitor every AJAX request triggered by your SPA — including response time, status codes, throughput, and error rates — to identify slow or failing API endpoints.
JavaScript error analysis
Identify JS error trends and frequency over time. Use full stack traces to debug errors at their source and reduce their impact on user experience.
Core Web Vitals
Measure Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) to understand how your SPA performs against Google's user experience benchmarks.
Session replay
Play back real user sessions to see exactly how users interact with your SPA. Capture user actions, DOM events, console logs, network requests, and memory usage trends to troubleshoot issues visually.
Route change latency
Measure the time taken for each soft navigation in your SPA. Track the total page view count and response time per route to identify the slowest transitions in your application.
SPA monitoring as part of Digital Experience Monitoring
SPA monitoring is a core capability of Site24x7's Digital Experience Monitoring (DEM) platform. DEM combines real user monitoring, synthetic monitoring, and application performance monitoring to provide complete visibility into the end-user experience across every digital touchpoint.
By integrating SPA monitoring with APM Insight, you can connect front-end performance data with back-end application metrics for end-to-end visibility — from the browser to the server. Pair it with synthetic monitoring to proactively test SPA performance from global monitoring locations, even before real users encounter issues.
SPA monitoring pricing
Real User Monitoring for SPAs is included in all Site24x7 plans. RUM licensing is based on page views, with each web page impression counting as a page view regardless of the number of resources loaded. All plans include default RUM page views, and additional page view add-ons can be purchased as needed.
Frequently asked questions
1. What is single page application monitoring?
Single page application (SPA) monitoring is the process of tracking the performance and availability of web applications that dynamically update a single HTML page instead of loading new pages from the server. Because SPAs rely heavily on AJAX calls and client-side rendering, traditional page load metrics do not capture the full user experience. SPA monitoring with Site24x7 Real User Monitoring (RUM) tracks soft navigations, route changes, AJAX response times, and JavaScript errors to give you complete visibility into front-end performance.
2. Which SPA frameworks does Site24x7 RUM support?
Site24x7 RUM supports popular SPA frameworks including Angular, Ember, and React. The monitoring script uses framework-agnostic event listeners for network activity (XHR calls), DOM mutations, and browser history state changes to detect route changes, so it also works with other SPA frameworks like Backbone and custom implementations.
3. How does Site24x7 detect route changes in SPAs?
Site24x7 RUM identifies SPA route changes by listening to three event types: network activity (XHR calls), DOM changes (mutation observer), and history state changes (pushState, replaceState, or hash changes). A transaction is considered a single page transaction when there is a state change accompanied by significant network or DOM activity. This approach captures accurate start and end times for each SPA transaction without requiring changes to your application's router.
4. Can I integrate SPA monitoring with back-end APM?
Yes. Site24x7 RUM integrates with APM Insight to connect front-end SPA performance data with back-end application metrics. This gives you end-to-end visibility from the browser to the server, helping you identify whether performance issues originate on the client side or in your back-end services.
5. Does Site24x7 support Core Web Vitals for SPAs?
Yes. Site24x7 RUM measures Core Web Vitals — including Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — for your SPA pages. You can filter and analyze Web Vitals data by browser, geography, and page URL to identify performance issues affecting specific user segments.
6. How does RUM differ from synthetic monitoring for SPAs?
Real User Monitoring (RUM) captures performance data from actual user sessions in real browsers, reflecting genuine user experience across diverse devices, networks, and locations. Synthetic monitoring uses scripted tests run from predefined monitoring locations to simulate user interactions and detect issues proactively — even when no real users are active. For complete SPA visibility, Site24x7 offers both RUM and synthetic monitoring as part of its Digital Experience Monitoring (DEM) platform.
7. Can I monitor AJAX calls and API requests in my SPA?
Yes. Site24x7 RUM tracks every AJAX call made by your SPA, including the request URL, response time, status code, and throughput. For each SPA route change, the corresponding AJAX calls are captured along with their individual performance metrics, helping you identify slow or failing API endpoints that impact user experience.