Application Insights not tracking fetch calls

[vasalis]

Describe the bug
Enabling application insights does not track fetch requests, even by enabling them on App Insights configuration.

To Reproduce
Steps to reproduce the behavior:

1. Create a new Teams app with Application Insights enabled. For example a Tab using personal scope.

2. Change JavaScript snippet to enable tracking of fetch requests, like this:
   { instrumentationKey: "{{APPINSIGHTS_INSTRUMENTATIONKEY}}", disableFetchTracking: false, enableCorsCorrelation: true, distributedTracingMode: 2, });

3. Create a fetch request, for example:

4. useEffect(() => { fetch("https://backend", { method: "GET", headers: { Accept: "application/json", "Content-Type": "application/json" } }) .then(response => response.json()) }, []);

5. The request is not tracked on Application insights.

Expected behavior
The request should be logged on Application Insights as a dependency.

Detailed information

• Generator version (3.0.3)
• Build tools version (yoteams-build-core): [eg: 1.0.0]
• OS: Windows

Additional information
Also, when enabling Application Insights on the generator, I would expect to enable tracking of fetch requests and distributed tracing by default. Moreover, upgrading to the latest version of Application Insights did not solve the issue.

[wictorwilen]

Thanks for reporting this. Will take a look at this.

[vasalis]

In order to solve the issue I ended up using Application Insights for React https://docs.microsoft.com/en-us/azure/azure-monitor/app/javascript-react-plugin
It was very easy to do and at the same time it provides much more options for integration with App Insights (for example tracking custom events, metrics etc). Maybe this could be the approach for the next version.
Just a thought :)

[wictorwilen]

@vasalis - very good idea. I personally use the React plugin for many projects, based on yo teams.