cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Not a customer? Start a free trial

Click the Start a free trial link to start a 15-day SaaS trial of our product and join our community as a trial user. If you are an existing customer do not start a free trial.

AppDynamics customers and established members should click the sign in button to authenticate.

End User Monitoring (EUM)

Example to enable AppDynamics EUM for Angular4 through manual reporting

s2288370
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)
By replying you agree to the Terms and Conditions of the AppDynamics Community.
Example to enable AppDynamics EUM for Angular4 through manual reporting
1 REPLY 1
Gaurav.Soni
AppDynamics Team

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.