Single-page applications (SPA)
Real user monitoring (RUM) is the performance industry's way to measure real user traffic. If you're not currently a RUM customer, you can follow the simple steps in the Getting started guide for RUM.
Using RUM in a typical separate-page website is pretty easy because each page view has a well-defined start and end (navigationStart and loadEventEnd). There's a little more work involved to make RUM work in a single-page application (SPA) because the definition of a "page view" varies depending on the SPA's implementation.
There are three main APIs involved in making RUM work with your SPA:
LUX.init - Call this function at the beginning of the SPA page transition (but not on the initial page load). For example, if the user clicked a button that causes a SPA transition, you would call
LUX.init()immediately after the button is clicked.
LUX.markLoadTime - Call this function at the end of the SPA page transition. For example, you would call
LUX.markLoadTime()after all JSON responses have been received and the DOM has been updated. If you don't call this function, the load time will be recorded as the time when
LUX.send()is called. This function is therefore optional, but recommended.
LUX.send - Call this function when you are ready to send the data that has been collected for the current page view.
LUX.auto - This variable tells RUM whether to gather the initial performance metrics as part of window.onload. The default is true and that value works in most cases for SPAs. But in some cases even the initial page view is handled by the SPA code and can occur after the onload event. If this is the case for your site, you would set
LUX.auto = falseand make sure to call
LUX.send()when that initial page view is complete.
Using page labels in a SPA
In a SPA, RUM page labels can be set at any point before
LUX.send() is called.
Using custom data in a SPA
Custom Datacan be added at any point in a SPA, and it will be associated with the current page view. Custom data values are persisted across all SPA page views.
Using user timing marks & measures in a SPA
For the initial page load, user timing marks and measures in a SPA work the same as they do in a regular web application. For subsequent SPA pages, measures continue to work the same but marks are taken relative to the previous
Recommended implementation for a SPA
LUX.auto = falseto gain full control over how data is collected and when the beacon is sent.
LUX.sendBeaconOnPageHidden = trueto reduce data loss due to page abandonment.
LUX.markLoadTime()when the current page or view has completely rendered — usually at the end of the "mounted" lifecycle callback of various frameworks (
mountedin Vue v2, etc).
LUX.send()as late in the page lifecycle as possible to maximize data collection. This can even be called directly before
LUX.init()as soon as the user navigates to a new page or view.
- (Optional) set
LUX.maxMeasureTime = 30000if the default time of 60 seconds results in noisy data.
Updated 10 days ago