topic EUM cannot report fetch API with React SPA in Splunk AppDynamics

EUM cannot report fetch API with React SPA

Kit_Zhang — Thu, 08 Jul 2021 09:09:18 GMT

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>

Re: EUM cannot report fetch API with React SPA

Hiroki_Ito — Tue, 13 Jul 2021 01:21:44 GMT

Hi @Kit.Zhang ,

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.

https://docs.appdynamics.com/21.7/en/end-user-monitoring/browser-monitoring/browser-real-user-monitoring/configure-the-javascript-agent/disable-monitoring-of-fetch-api-calls

To investigate further, could you please share below?

Please share a HAR file which contains a page load and fetch API execution if it doesn't contain sensitive and personally-identifying information.
- https://community.appdynamics.com/t5/Knowledge-Base/How-do-I-create-a-HAR-File-to-troubleshoot-web-download-issues/ta-p/23373
- If it contains those information, you shouldn't upload such file here, so could you please check if there is an adrum post request after your fetch API request in the network tab of the DevTools? In addition, could you please confirm the adrum post request contains information of the executed fetch API ?
Please share a debug console log. Again, if it contains sensitive and personally-identifying information, could you please check if there is any error
- https://community.appdynamics.com/t5/Knowledge-Base/How-to-debug-a-browser-page-by-modifying-adrum-js/ta-p/23516

Best Regards,

Hiroki

Re: EUM cannot report fetch API with React SPA

Kit_Zhang — Tue, 13 Jul 2021 02:27:58 GMT

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.

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.

Re: EUM cannot report fetch API with React SPA

Hiroki_Ito — Tue, 13 Jul 2021 05:22:50 GMT

Hi @Kit.Zhang ,

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?

https://community.appdynamics.com/t5/Knowledge-Base/How-do-I-submit-a-Support-ticket-An-FAQ/ta-p/28959

Please attach HAR file and debug console log there.

Best Regards,

Hiroki

Re: EUM cannot report fetch API with React SPA

Kit_Zhang — Tue, 13 Jul 2021 06:16:18 GMT

Hi @Hiroki.Ito

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

Re: EUM cannot report fetch API with React SPA

Hiroki_Ito — Wed, 14 Jul 2021 00:04:31 GMT

Hi @Kit.Zhang,

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

Re: EUM cannot report fetch API with React SPA

Kit_Zhang — Mon, 19 Jul 2021 03:34:15 GMT

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.

Re: EUM cannot report fetch API with React SPA

Hiroki_Ito — Mon, 19 Jul 2021 08:46:47 GMT

Hi @Kit.Zhang ,

Thank you for letting us know!

Great to hear the issue is fixed!

Best Regards,

Hiroki