On this page:
Browser RUM's single-page application (SPA) monitoring enables you to:
- Monitor the performance/throughput of user experiences of SPAs.
- Troubleshoot and resolve SPA problems within the context of the page load.
- Assist with business decisions by analyzing SPA data through analytics.
- Enable developers to quickly ship better web applications to the marketplace.
What Is SPA?
Base Pages vs. Virtual Pages
For SPAs, you will have base pages, virtual pages, and Ajax requests. From Pages & AJAX Requests, you are able to view all three types and details for each as shown below.
SPA1 and SPA2 Monitoring
From 4.4.3 and later, Browser RUM supports auto-instrumentation for all SPA frameworks and has been certified to correctly auto-instrument Angular 1-5 and React SPAs. This support for the auto-instrumentation for all SPA frameworks is known as SPA2 monitoring.
The table below describes the support for SPA1 and SPA2 monitoring:
|SPA1||AngularJS 1 only||Yes|
|SPA2||All SPA frameworks. Auto-instrumentation is certified for Angular 1-5 and React.||No|
Which SPA Monitoring to Use?
Only use SPA1 monitoring in the following cases:
- You are still using AngularJS 1 and require Browser RUM page timing metrics for virtual pages.
View SPA2 Monitoring Data
You can view end user response time (EURT) for SPAs in many places in the Controller. The EURT measures the time from when the user navigates to a virtual page until all resources are downloaded for the page. To learn how the EURT is calculated, see How the End-User Response Time Is Measured.
The Browser Snapshots tab displays a list of different types of pages as shown below. You can view the EURT for all the pages and other metrics for base pages and Ajax requests.
Snapshot Details: Summary
To get to the Snapshot Details dialog shown below, you double-click one of the browser snapshots in the Browser Snapshots page. The Summary tab is the default tab for the dialog, and it gives some additional information such as the parent page URL.
Snapshot Details: Resource Details
The Resource Details tab shown below provides details about resources such as the number and type of resources, the domains where the resources were requested, and resource load times.
Pages & AJAX Requests
The Pages & AJAX Requests page as shown below enables you to view the number of requests for each type of page and the average metrics per page. You can also select which page types to view, such as virtual pages.
Page, Ajax, and Iframe Dashboards
From the Pages & AJAX Requests page, you can double-click a page to view the Page and IFrame Dashboards. Dashboards for each page type will have a Summary section displaying the average metrics as well as a Key Performance Time section showing the requests and the metrics on a timeline.
The tabs below show the differences in the dashboard for each page type.
Base Pages Base pages contain timing metrics such as HTML download time, resource fetch time, etc. Virtual Pages Virtual pages provide the resources requested. AJAX Requests Ajax Requests include a more limited set of timing metrics as well as Ajax-specific section for the AJAX Response Download Time and the AJAX Callback Execution Time.
Base pages contain timing metrics such as HTML download time, resource fetch time, etc.
Virtual pages provide the resources requested.
Ajax Requests include a more limited set of timing metrics as well as Ajax-specific section for the AJAX Response Download Time and the AJAX Callback Execution Time.
From Browser Analyze, you can filter by criteria, such as page types shown in the screenshot below, and configure the fields you want to view.
The Analyze Details dialog has a Summary tab showing metrics and details about the page, and in cases where there are resources, a Resource Details tab displaying information about the resources and the domains where the resources were fetched.