Go to All Forums

RUM in a Angular 2+ application only showing 1 Path/page load.

I've set up my angular 6 App with a modified version of the AngularJS snippet to monitor it. I believe it basically does the same thing the snippet does (see below).

But i'm not seeing the navigations of the user through the app (in the web pages tab of my RUM monitor). Only the first page/url is listed.

Is it possible to show all user navigation/paths in the web pages tab?.

 

@Injectable()
export class Site24x7Service {

private site24x7RumBeacon: HTMLScriptElement;
private readonly onLoadCallback: EventListenerObject;
private router: Router;


constructor(private readonly winRef: WindowRef) {
this.onLoadCallback = this.handleSite24x7Loaded.bind(this);
}

init(router: Router) {
this.router = router;

if (environment.site24x7RumKey && window.performance && window.performance.timing && window.performance.navigation) {
this.winRef.nativeWindow.rumMOKey = environment.site24x7RumKey;
this.site24x7RumBeacon = document.createElement('script');
this.site24x7RumBeacon.async = true;
this.site24x7RumBeacon.setAttribute('src', '//static.site24x7rum.com/beacon/site24x7rum.js?appKey=' + environment.site24x7RumKey);
this.site24x7RumBeacon.addEventListener('load', this.onLoadCallback);
document.getElementsByTagName('head')[0].appendChild(this.site24x7RumBeacon);
}
}

private handleSite24x7Loaded() {
this.site24x7RumBeacon.removeEventListener('load', this.onLoadCallback);
const site24x7rum = this.winRef.nativeWindow['site24x7rum'];
const insightRUM = this.winRef.nativeWindow['insightRUM'];

const changes = {time: performance.now()};
site24x7rum.routeChanges.push(changes);
insightRUM.storeLastAjax('spa');

this.router.events.pipe(
observableFilter(value => value instanceof NavigationStart),
observableMap(value => value as NavigationStart)
).subscribe(value => {
const changes = {
time: performance.now(),
url: value.url
};
site24x7rum.routeChanges.push(changes);
insightRUM.storeLastAjax('spa');
});

}
}
Like (5) Reply
Replies (2)

Hi Bob,

Currently Real User Monitoring (RUM) angular support is for 1.x versions, We are about to roll out an update for this functionality which will cover all SPA frameworks. We are expecting this update in couple of weeks time. We will keep you posted on this, once we release it.

Thanks and Regards,

- Hemachand

Like (0) Reply

Hello Bob ,

We have released new update in Real User Monitoring where you can monitor all your Single Page Applications irrespective of frameworks. You can start monitoring your single page application by adding a RUM monitor and choosing Application Framework type as SPA and paste the provided script in your common page where your SPA runs or all available Web Pages.

Regards,

Jaya Simha

Like (0) Reply

Was this post helpful?