Applicationinsights-js: Error Mismatched anonymous define() module

[mayong43111]

Dear,
I have a angularjs + requirejs website, I use Pasting a script snippet at the tag for monitor. but some boy is error when he access this view. It's only the first access on new tab.

[mayong43111]

Dear,
I have a angularjs + requirejs website, I use Pasting a script snippet at the tag for monitor. but some boy is error when he access this view. It's only the first access on new tab.

It's only IE 11.

[markwolff]

Which script snippet are you using?

[mayong43111]

Which script snippet are you using?

<script type="text/javascript"> var sdkInstance="appInsightsSDK";window[sdkInstance]="appInsights";var aiName=window[sdkInstance],aisdk=window[aiName]||function(e){function n(e){t[e]=function(){var n=arguments;t.queue.push(function(){t[e].apply(t,n)})}}var t={config:e};t.initialize=!0;var i=document,a=window;setTimeout(function(){var n=i.createElement("script");n.src=e.url||"https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js",i.getElementsByTagName("script")[0].parentNode.appendChild(n)});try{t.cookie=i.cookie}catch(e){}t.queue=[],t.version=2;for(var r=["Event","PageView","Exception","Trace","DependencyData","Metric","PageViewPerformance"];r.length;)n("track"+r.pop());n("startTrackPage"),n("stopTrackPage");var s="Track"+r[0];if(n("start"+s),n("stop"+s),n("setAuthenticatedUserContext"),n("clearAuthenticatedUserContext"),n("flush"),!(!0===e.disableExceptionTracking||e.extensionConfig&&e.extensionConfig.ApplicationInsightsAnalytics&&!0===e.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)){n("_"+(r="onerror"));var o=a[r];a[r]=function(e,n,i,a,s){var c=o&&o(e,n,i,a,s);return!0!==c&&t["_"+r]({message:e,url:n,lineNumber:i,columnNumber:a,error:s}),c},e.autoExceptionInstrumented=!0}return t}( { instrumentationKey:"INSTRUMENTATION_KEY" } );window[aiName]=aisdk,aisdk.queue&&0===aisdk.queue.length&&aisdk.trackPageView({}); </script>

[Maus3rVonDutch]

I'm also experiencing this error, but it's not browser specific. I got the error when upgrading applicationinsights from version 1.0.20 to 2.2.2.
So instead of using
https://az416426.vo.msecnd.net/scripts/a/ai.0.js
we replaced that script with:
https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js

[Maus3rVonDutch]

I tried downgrading to version 2.0.0, but it seems to error occurs there as well, this screenshot might be useful:

[markwolff]

@Maus3rVonDutch Can you explain how you are importing and setting up the SDK? You shouldn't need to grab the SDK from the CDN since you seem already be using the npm module which contains the SDK as an ES6 module. This is a difference from 1.0.20, which did not include the modules (the sdk entry point was downloadAndSetup). 2.0.0+ now includes them as both UMD (dist/) and ESM (dist-esm/).

[Maus3rVonDutch]

Hi @markwolff ,

Thnx for the reply. In this case we are using the snippet setup:

 appInsights = window.appInsights || function (a) {
            function b(a) { c[a] = function () { var b = arguments; c.queue.push(function () { c[a].apply(c, b) }) } } var c = { config: a }, d = document, e = window; setTimeout(function () { var b = d.createElement("script"); b.src = a.url || "https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js", d.getElementsByTagName("script")[0].parentNode.appendChild(b) }); try { c.cookie = d.cookie } catch (a) { } c.queue = []; for (var f = ["Event", "Exception", "Metric", "PageView", "Trace", "Dependency"]; f.length;)b("track" + f.pop()); if (b("setAuthenticatedUserContext"), b("clearAuthenticatedUserContext"), b("startTrackEvent"), b("stopTrackEvent"), b("startTrackPage"), b("stopTrackPage"), b("flush"), !a.disableExceptionTracking) { f = "onerror", b("_" + f); var g = e[f]; e[f] = function (a, b, d, e, h) { var i = g && g(a, b, d, e, h); return !0 !== i && c["_" + f](a, b, d, e, h), i } } return c
        }({
            instrumentationKey: instrumentationKey,
            //samplingPercentage: 10 // disabled due to some AI / browser bug
        });

NB we currently have 2 different implementations, one for legacy code (snippet setup) and an intergrated NPM setup for an AngularJS solution. NB the legacy pages contain some requireJS with plain vanilla JS/Telerik kendo code. Some legacy pages also contain a mix of both, so vanilla JS (requireJS) code and some code (or hacks) to supply some AngularJS features (which as packaged the npm setup with webpack). Could it be that the latter creates the conflict?

[madaz]

Im also experiencing the same problem upgrading from v1 to v2.(at time of writing).

Im testing on Windows 10 Chrome Version 77.0.3865.90 (Official Build) (64-bit)/ Microsoft Edge 44.18362.329.0.

The first load of the page in a new session/window would work, the subsequent reloads of the page/site would fail.

Sometimes a HARD RELOAD of the page would make it work again.

Firefox seemed ok and couldnt reproduce error.

Also tested IE11 and would get it the error, not as often.

It would work on a fresh page session, then if i reloaded page i get the define error, if i do a HARD RELOAD of the page to clear cache it would mostly work, sometimes not.

Snippet used first tag inside <head>

      <script type="text/javascript">
        var sdkInstance="appInsightsSDK";window[sdkInstance]="appInsights";var aiName=window[sdkInstance],aisdk=window[aiName]||function(e){function n(e){t[e]=function(){var n=arguments;t.queue.push(function(){t[e].apply(t,n)})}}var t={config:e};t.initialize=!0;var i=document,a=window;setTimeout(function(){var n=i.createElement("script");n.src=e.url||"https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js",i.getElementsByTagName("script")[0].parentNode.appendChild(n)});try{t.cookie=i.cookie}catch(e){}t.queue=[],t.version=2;for(var r=["Event","PageView","Exception","Trace","DependencyData","Metric","PageViewPerformance"];r.length;)n("track"+r.pop());n("startTrackPage"),n("stopTrackPage");var s="Track"+r[0];if(n("start"+s),n("stop"+s),n("addTelemetryInitializer"),n("setAuthenticatedUserContext"),n("clearAuthenticatedUserContext"),n("flush"),!(!0===e.disableExceptionTracking||e.extensionConfig&&e.extensionConfig.ApplicationInsightsAnalytics&&!0===e.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)){n("_"+(r="onerror"));var o=a[r];a[r]=function(e,n,i,a,s){var c=o&&o(e,n,i,a,s);return!0!==c&&t["_"+r]({message:e,url:n,lineNumber:i,columnNumber:a,error:s}),c},e.autoExceptionInstrumented=!0}return t}(
        {
          instrumentationKey:"xxx"
        }
        );window[aiName]=aisdk,aisdk.queue&&0===aisdk.queue.length&&aisdk.trackPageView({});
      </script>

The requirejs (v2.3.5) script tag and other scripts tags are at the end of the <body> after all of the page content html

<script src="https://our-azure-cdn.foo/npmpkg/requirejs/2.3.5/require.js" crossorigin="anonymous"></script>

[joonakokkola]

We are also seeing this issue after updating AppInsights JS instrumentation.

[Maus3rVonDutch]

I’m sorry, I forgot to followup on this issue.
I averted the problem by working around it. Instead of having 2 implementations, I modified our code to use a single implementation. In other words, now I have added the ApplicationInsights npm package only to my angularjs project (which is build with webpack) and I am exposing the relevant code on the global window object, so I can also use it in the legacy code as well.
Maybe this solutions works for others as well.

[joonakokkola]

We only have a snippet implementation, and our case is very similar to what @madaz describes above. We see this happening randomly on latest versions of IE, Firefox and Chrome. Hard reload helps.

[madaz]

@markwolff we need to use the requirejs pattern because of the way we inject micro frontends.

I have create a repo with example of problem, i was getting the error in Chrome 78 at the time of authoring example.

https://github.com/madaz/microsoft-ApplicationInsights-JS-Issue-1018

would appreciate your help on this.

thanks

[ShawnC7208]

Seeing the same behavior that @joonakokkola is describing as well. We have just the snippet and it occurs randomly for users but constantly when trying to run an automation test in the browser.

[ShawnC7208]

If anyone is wondering and does want a workout on this, the script that the app insights snippet was referencing was:
https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js

I was able to pull down a local copy and change the following in the JS to have a named define:

Changed this inside of the file
define(["exports"],t):
to this:
define('exports',["exports"],t):

Not sure if this is the best fix but we are no longer seeing the error.

Thanks.

[madaz]

@markwolff Is this issue on your radar? This is blocking us from upgrading to v2

[markwolff]

@madaz Sorry for the delay. I'll add it to my queue and look into it when I get the chance!

[TIllingworth]

Hey, we've also run into this issue. Currently we're looking at a workaround involving ShawnC7208's comment. Is this still on anyone's radar?

[karlsandin]

We are also facing this issue. From the require.js documentation:

_"MISMATCHED ANONYMOUS DEFINE() MODULES ..."_

• _If you manually code a script tag in HTML to load a script with an anonymous define() call, this error can occur._

I guess this is what is happening here and what @ShawnC7208 mentioned.

Any update on this @markwolff ?

[APErebus]

We just ran into this error as well. My workaround was to use a hard-coded script tag to JS on the CDN, then to load AppInsights manually and set it against window.appInsights.

    <script src="https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js"></script>
    <script type="text/javascript">
        var init = new Microsoft.ApplicationInsights.ApplicationInsights({
            config:{
                instrumentationKey: /* my-instrumentation-key */
            }
        });
        window.appInsights = init.loadAppInsights();
    </script>

The trick is to force the app insights code to run before the requirejs code runs, hence this code all code is in the <head> before requirejs

[stephanbakker]

We run into the same problem, on our legacy RequireJS pages. We do use the inline script snippet, but after updating to the latest one, we get the same Error Mismatched anonymous define() module issue.

I decided to use the latest snippet, but use the older ai.0.js file.

Any update on a fix @markwolff ?

[MSNev]

To address this we are planning on publishing a common js (cjs) version to the CDN and thus avoid the requirejs issues and the described work arounds / hacks (such as undefining and redefining define or attempting to load before requrejs is)

The only required change will be to reference the cjs version as the URL for the snippet, this will be
ai.2.cjs.min.js

The PR for this is #1352

[MSNev]

We are also going to publish a set of iife formated files to the CDN as well as the cjs versions really only solve the issue if you want to load it as a module.

So the new URL (once v2.5.8 is fully deployed) will be
https://az416426.vo.msecnd.net/scripts/b/ai.2.gbl.min.js

[MSNev]

v2.5.8 is now fully deployed

This includes the new endpoint file https://az416426.vo.msecnd.net/scripts/b/ai.2.gbl.min.js