We are trying to track page load latencies using Datadog RUM. Specifically, the trackViewsManually. The reason why the default view tracking doesn’t work for Ember app is because Ember only change the URL when ember data loaded, however, datadog only start the timer when URL changed, then stop the timer when page’s resource loading “stabilized”. So I thought I should be using trackViewsManually.
However, as Datadog only exposes the startView public API, so I am trying to find the perfect place to inject this call providing the most accurate “view” name.
So I tried to use willTransition or routeWillChange. The former however, does not trigger during the initial first page load. The second, though will be triggered multiple times as it involves some of the loading route (transition.to.name).
So I am kinda of stuck on what’s the best ONE way to do this. Seems combining both might yield some result, but seems quite complicated.
Does anyone have any suggestion on the general proper way to do this? Any insights will be greatly appreciated. Thanks!
This will ensure we have the initial load latencies:
this.router.on('routeWillChange', (transition) => {
// this will be triggered multiple times
// but only the first initial load will not have from property
// there is no way to get the initial route name hence we use the path name here
if (transition.from === null) {
const dd = getDatadog();
dd.startView({ name: window.location.pathname });
}
});
Then in the ApplicationRoute:
This will properly tracking route_change event, it will only trigger once, where routeWillChange will trigger multiple times.
Maybe there is some simplified way to do this? I am still a bit bothered by the fact that I can’t get the current route name on the initial routeWillChange event.
Turns out this is all we need to properly tracking Ember view latencies in Datadog. Now the data is much more clearer (proper Ember route name) and accurate (including resources, API requests etc).
this.router.on('routeWillChange', (transition) => {
// Ember initial_load always have transition.targetName to be 'loading'
// So we use Router service's recognize method to get the route name
if (transition.from === null) {
const routeName = this.router.recognize(window.location.pathname).name;
datadog.startView({ name: routeName });
}
// skip intermediate (loading) routes (For example: grow.loading)
if (!transition.isIntermediate) {
const routeName = transition.targetName;
datadog.startView({ name: routeName });
}
}
