Example to enable AppDynamics EUM for Angular4 through manual reporting

[CommunityUser]

Hello,

I have an application developed with Angular4. I am trying to enable AppDynamics EUM using documentation.

According to the AppDynamics documentation you have mentioned that for Angular 2 and 4 need to report the events manually.

Here the listed below events that you mentioned in the documentation

• start()
• end()

• startCorrelatingXhrs()
• stopCorrelatingXhrs()

• stopCorrelatingXhrs()
• markVirtualPageEnd()
• startCorrelatingXhrs()
• stopCorrelatingXhrs()
• markViewChangeStart()
• markViewChangeEnd()
• markViewDOMLoaded()
• markXhrRequestsCompleted()
• markViewResourcesLoaded()
• markVirtualPageStart()
• markVirtualPageEnd()

I got confused where to inject this above event whether in typescript or in JavaScript code.

Can you explain which place to call the above ADRUM Event API functions in application code?

Its better if you explain each event call with a sample application developed with Angular 4.

Thanks in Advance,

Martin

[Gaurav_Soni]

Hi Martin,

Ideally, I would recommend placing the code(Javascript) in the hook which gets called before and after the request is handled and responded. 

In the method that gets call before the request is made add following code

var vPageView = new ADRUM.events.VPageView({
    url: 'http://localhost/#virtualpage1',
});
vPageView.start();

and then when the response is complete,

vPageView.end();
ADRUM.report(vPageView);

other methods like below and other(non-mandatory) 

// SPA view routing and HTML partials fetching
vPageView.markViewChangeStart()
vPageView.markViewChangeEnd();
  
// HTML partials inserted into Browser DOM tree
vPageView.markViewDOMLoaded();
  
// SPA HTML AJAX data fetching
// Data AJAX requests are automatically correlated with the VPageView
vPageView.markXhrRequestsCompleted();

They can be called in between wherever you can identify their best spot.

Regards,

Gaurav Soni