How SPA2 Monitoring Works
The diagram below demonstrates how the JavaScript Agent defines the start and end points for the End User Response Time (EURT) metric and correlates with Ajax requests, resources, and JavaScript errors.
| Step | Browser Activity | JavaScript Agent Actions |
|---|---|---|
|
|
The user navigates to the base page of a SPA. The HTML skeleton, core CSS, and JavaScript are loaded into the browser. |
The JavaScript Agent sends a beacon for the base page. |
|
|
From the base page, the user clicks a button to view products. The URL changes as the virtual page is loaded through a combination of previously downloaded content and from new content fetched through Ajax requests. |
The JavaScript marks the user action as the start time of the virtual page. |
|
|
User actions and the browser activity cease for five seconds. The browser activity includes requesting resources, making Ajax calls, and so on. |
The JavaScript Agent or your code using the JavaScript API marks the end time of the virtual page as the last time browser activity was seen after the URL changed. The JavaScript Agent then sends a beacon for the virtual page; however, if the virtual-page load stalls on one slow activity, the JavaScript Agent waits eight seconds before marking the end of the virtual page. Any activities such as Ajax requests, resource loads, and JavaScript errors that happened during the virtual page load will be correlated to that virtual page. There are some kinds of browser activities that aren't accessible to JavaScript. For example, the time that the browser takes render the DOM to the screen after the DOM has been updated. Therefore, if your virtual pages don’t request any resources, you will likely see a very fast EURT (<10ms). |