End User Monitoring (EUM)

cancel
Showing results for 
Search instead for 
Did you mean: 

Example to enable AppDynamics EUM for Angular4 through manual reporting

Highlighted
Creator

Example to enable AppDynamics EUM for Angular4 through manual reporting

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

Tags (2)
Example to enable AppDynamics EUM for Angular4 through manual reporting
1 REPLY 1
Employee

Re: Example to enable AppDynamics EUM for Angular4 through manual reporting

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

 



Found something helpful? Click the Accept as Solution button to help others find answers faster.
Liked something? Click the Thumbs Up button.