[BUG] Snippet does not work with SystemJS

[Tiberriver256]

Description/Screenshot

When using SystemJS, the Application Insights snippet fails to load silently. There seems to be a conflict with their extras/AMD plugin:

https://cdn.jsdelivr.net/npm/[email protected]/dist/extras/amd.min.js

Steps to Reproduce

Sample codepen: https://codepen.io/tiberriver256/pen/jOBvqPK

• OS/Browser: Chrome 91
• SDK Version [e.g. 22]:
• How you initialized the SDK: Snippet

Expected behavior App Insights should load regardless of if other modules are using window.define

[MSNev]

Using the sample above there is not an issue and it loads, initializes and calls track the 10 times I tried refreshing the page.

Having said that we are aware of an issue (conflict) with sites that use requireJS and when this is loaded before the Sdk. For those sites we publish an alternative module format (iife) which does "check" for the existence of define() and require(), when they are available the rollup module initialization correctly handles waiting for define() and require usage.

So it use this alternate format simply change the url from

• https://js.monitor.azure.com/scripts/b/ai.2.min.js to https://js.monitor.azure.com/scripts/b/ai.2.gbl.min.js

We have not yet documented this alternate format as it was generally limited to Sharepoint hosted users, I'm going to tag this issue as a documentation one so that we include "SystemJS" as also affected by this (assuming this is the case -- please let us know if this resolves your problem)

[Tiberriver256]

Hmm... well very odd that it seems to work for you with the standard. All I can get without commenting out the amd line is a single track with the following:

The ai.2.gbl.min.js definitely got things working though! Thanks for the quick response!

[welou]

Adding to the discussion that we encountered this issue with Magento 2 (Adobe Commerce). Its frontend uses require.js and switching to that alternate version of the snippet resolved the problem for us.

[MSNev]

Yes, if your runtime is using requirejs you need to update the "src" to use the ".gbl" version...

As part of the upcoming beta release (v3.x.x) we are considering changing the default documented version for the snippet to be the .gbl version as requirejs is becoming more and more prevalent, resulting in the default snippet failing to initialize the SDK.

The other option we have is for the snippet to be requirejs aware (more code) and to use it to initialize the SDK when present.

[siyuniu-ms]

The explanation for using gbl to solve requireJS problem could be find here. We will add FAQ page later. This issue will be open until then as a reminder.

[siyuniu-ms]

added in the FAQ page: https://github.com/microsoft/ApplicationInsights-JS/blob/main/docs/SdkLoadFailure.md#sdk-initialization-failure-due-to-requirejs