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)

EUM cannot report fetch API with React SPA

SOLVED
Kit.Zhang
Creator

EUM cannot report fetch API with React SPA

I have a Single Page Application (SPA) written in React.

The SPA is using fetch API instead of AJAX to communicate CORS endpoints.

 

I am trying to add below EUM codes into my SPA, it is able to report the first page load time.

However, it is not able to capture any fetch API which I made from this page.

 

I can see "Configure JavaScript Agent" mentions "Monitor Fetch API calls" with a tick.

But I still cannot make it works, can anyone please advise what I have missed? Thanks.

 

<script charset="UTF-8" type="text/javascript">
window["adrum-use-strict-domain-cookies"] = true;
window["adrum-start-time"] = new Date().getTime();
(function(config){
config.appKey = "AD-AAB-ABF-ASU";
config.adrumExtUrlHttp = "http://cdn.appdynamics.com";
config.adrumExtUrlHttps = "https://cdn.appdynamics.com";
config.beaconUrlHttp = "http://pdx-col.eum-appdynamics.com";
config.beaconUrlHttps = "https://pdx-col.eum-appdynamics.com";
config.useHTTPSAlways = true;
config.urlCapture = {"filterURLQuery":true};
config.xd = {"enable":true};
config.resTiming = {"bufSize":200,"clearResTimingOnBeaconSend":true};
config.maxUrlLength = 512;
config.spa = {"spa2":true};
})(window["adrum-config"] || (window["adrum-config"] = {}));
</script>
<script src="//cdn.appdynamics.com/adrum/adrum-latest.js"></script>

 

Tags (3)
By replying you agree to the Terms and Conditions of the AppDynamics Community.
EUM cannot report fetch API with React SPA
7 REPLIES 7
Hiroki.Ito
AppDynamics Team

Re: EUM cannot report fetch API with React SPA

 

Thank you for posting to the community.

By default, the JavaScript Agent reports Ajax requests made with XMLHttpRequest object (XHR) and the Fetch API, and you are not disabling fetch API, so the setting should be fine.

 

To investigate further, could you please share below?

 

 

Best Regards,
Hiroki

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

Re: EUM cannot report fetch API with React SPA

Dear @Hiroki.Ito 

 

An adrum post request was sent after page load,  but there is no adrum post request after a fetch API request made on the same page.

KitZhang_1-1626142813834.png

 

Console log haven't any error, and can you advise how I can upload the output of ADRUM.dumpLog() here?

I cannot found any button for upload log/zip file.

Hiroki.Ito
AppDynamics Team

Re: EUM cannot report fetch API with React SPA


Thank you for sharing the network information.
Sorry it seems it is not possible to upload a log file.
Could you just copy and paste it?

Or if it is very long and not pasteable, could you raise a support ticket?

Please attach HAR file and debug console log there.

Best Regards,
Hiroki

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

Re: EUM cannot report fetch API with React SPA

Hi @Hiroki.Ito 

Thanks for your advice. I have created a ticket with Request ID #291245. Thanks.

Hiroki.Ito
AppDynamics Team

Re: EUM cannot report fetch API with React SPA


Thank you for sharing.
When you get the answer, would you please share the results/learnings back on this post?
Knowledge sharing is what drives this community forward.

Best Regards,
Hiroki

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

Re: EUM cannot report fetch API with React SPA

As checked with AppD support,  the issue is due to I was dynamically injecting AppD script segments after page loaded.  
It is working fine now after moving the AppD script segment before page loaded.

Hiroki.Ito
AppDynamics Team

Re: EUM cannot report fetch API with React SPA

Hi @Kit.Zhang ,

 

Thank you for letting us know!

Great to hear the issue is fixed!

 

Best Regards,

Hiroki


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