[BUG] Snippet Setup example code error.

[zh-pan]

This code I can't debug because it confused.

Can you offer source code? Or help me debug the bug.

(It is random occurrence)

ai.2.min.js

[zh-pan]

Unfortunately, I used the latest example code ai.3.gbl.min.js and I got the same error.

[zh-pan]

It is very strange that it is preceded by: f.queue = []

So why can't I access push?

I solved the error by doing this, but I don't know if there are any side effects.

(f.queue&&f.queue.push(xxx))

[MSNev]

Hmm, this looks like the "snippet" (SDK Loader code) and not the main SDK.
Which "version" of the snippet are you including, it's denoted by the value of the sv:"#" value in the code (not the ai.2.min.js, or ai.3.gbl.min.js)

The "uncompressed" version of sv:"6" is located here https://github.com/microsoft/ApplicationInsights-JS/blob/main/AISKU/snippet/snippet.js

And the current version (sv:"7") we converted into TypeScript and is located here https://github.com/microsoft/ApplicationInsights-JS/blob/main/tools/applicationinsights-web-snippet/src/snippet.ts, it is unexpected that the queue is not defined as this is "assigned" as an empty array on line 40 of the snippet.ts

So it seems there might be something else going on for the sequence where the default (initial) "instance" (created on lines 38..44) doesn't seem to be running.

[zh-pan]

[zh-pan]

Hmm, this looks like the "snippet" (SDK Loader code) and not the main SDK. Which "version" of the snippet are you including, it's denoted by the value of the sv:"#" value in the code (not the ai.2.min.js, or ai.3.gbl.min.js)

The "uncompressed" version of sv:"6" is located here https://github.com/microsoft/ApplicationInsights-JS/blob/main/AISKU/snippet/snippet.js

And the current version (sv:"7") we converted into TypeScript and is located here https://github.com/microsoft/ApplicationInsights-JS/blob/main/tools/applicationinsights-web-snippet/src/snippet.ts, it is unexpected that the queue is not defined as this is "assigned" as an empty array on line 40 of the snippet.ts

So it seems there might be something else going on for the sequence where the default (initial) "instance" (created on lines 38..44) doesn't seem to be running.

Thanks. I will test the snippet with the source code.

[zh-pan]

I think it like the line:

ApplicationInsights-JS/tools/applicationinsights-web-snippet/src/snippet.ts

Line 304 in 36856e1

appInsights.queue.push(function () {

[MSNev]

Yes, that is the line I would expect matches the minified above, but, I would not expect the queue to be undefined...

@siyuniu-ms Can you see if you can reproduce this issue.

[siyuniu-ms]

Hi @zh-pan , I tried to reproduce it by running sv version 7:
<script type="text/javascript"> !(function (cfg){function e() ...... (removed for easier reading) // src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js", crossOrigin: "anonymous", cfg: { connectionString: "YOUR_CONNECTION_STRING" } }); </script>
here is the whole src code:

I commented out the src string for edge case and add breadpoint but didn't reproduce the problem.

Could you provide more detail about how to reproduce the problem? Thanks!

[zh-pan]

@siyuniu-ms I can't provide more because it is random. Sorry.

[MSNev]

Sounds like a race condition, where the instance object of the "ApplicaitonInsights" is being overwritten.

This can happen when

• The hosting environment is "loading" multiple versions (think v1 and v2) where the older code "replaces" the classes. We added some limited support to detect / workaround this issue in v3
• The hosting environment is loading the SDK which is embedded (using npm) into your own bundles as well as the snippet attempting to load the SDK -- again this (should) be a version mismatch issue only

Unless they are loading via the CDN where you can "see" the multiple network requests in the F12 network tab, this can be a difficult issue to detect.

Looking at the "names" of ms.post.js and ms.auth.js are these your classes? Or are these some other code as it might be an interaction where that code is "replacing" the implemenetations -- again generally not an easy issue to diagnose.

[zh-pan]

@MSNev Maybe you are right.
I check my code and note use "RemoteAuthenticatorView"(Blazor WASM Component) will handle authentication redirects(http code 302).
Will it create a race condition?

[MSNev]

Will it create a race condition?

A 302, itself won't necessarily cause the race condition, but because of the additional delay required for the round trips of the request / response, then it might aid in the triggering of the issue. But the basic issue is multiple instances.

I drilled into the code a little more and found the code inside of the SDK that once it initializes it calls the emptyQueue() function which will set the queue to undefined, which would then trigger this error (because it got changed under the covers).

So another possible possibility

• Snippet initializes and create the proxy functions (which cache the event call)
• Older version of the SDK loads, processes "it's" queue, reassigns the functions (it knows about) and clears the queue
• Because the snippet creates proxy methods for all of these, any older SDK which doesn't "reassign" all of the functions to itself (because the function didn't exist) will leave the proxy behind which when called will still attempt to "add" to the now empty queue.

A further possibility, would be that if you (or something) caches the "proxy" function and call it then it will also continue to call the old proxyy rather than the replaced instance function.