Cloudwatch RUM for single page applications?

Question

I have recently started using Cloudwatch RUM to monitor performance of my web app. I'm currently getting an Average page load speed of about 2 seconds, which I want to reduce.

However, my app is an SPA (Vue.js), and I assume that 2 second average is for full page loads.... this is ok, as this is an important metric, but in normal use, my users mostly experience app page transitions, and those load times are far lower than 2 seconds.

Is there an way to configure RUM to measure and report on these two types of page loads separately?

Thanks

Accepted Answer

Hello,

If this was a multiple page application, you will need to add the script from RUM on each and every page that you want to monitor. So if #page1 and #page2 are in separate HTML files then the script needs to be added on all HTML pages on the  tag. So, every time that page is called the script is executed [1].

However, in regards to a Single page applications, where it consist only of one html page with no page reloads, the route change might be handled by a soft navigation. Note that Single-page updates are not recorded by the browser timing API, but instead use route change timing.

Hence, to answer the query, the CloudWatch RUM supports the monitoring of both full page loads from the server and single-page updates with the following differences:

- For route change timing, there are no browser-provided metrics such as tlsTime, timeToFirstByte, and so on.

- For route change timing, the initiatorType field will be route_change.

The duration of a route change event is calculated as the following: 
(time of latest completed activity) - (latest user interaction timestamp)

Please feel free to read more about it here on our AWS Docs 
> https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM-route-change-timing.html

Additionally, the RUM web client [2] has been designed such that you can call recordPageView with a custom, meaningful path when you want to trigger a page view event within a single page.  There are examples in the doc for this as well.
`cwr('recordPageView', '/home');`

References:

[1] Step 4: Insert the code snippet into your application - https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM-get-started-insert-code-snippet.html

[2] https://github.com/aws-observability/aws-rum-web/blob/main/docs/cdn_commands.md

Cloudwatch RUM for single page applications?

Relevant content