ApplicationInsights-JS latest version 3.1.1 giving TypeError: Cannot read properties of undefined (reading 'getCrypto')

[Garima-github-24]

Hi,

I am using ApplicationInsigts-JS SDK version in my angular application. Recently I updated my packages (which updated ApplicationInsights-JS to 3.1.1) and then the application starts breaking with the below error:
Uncaught TypeError: Cannot read properties of undefined (reading 'getCrypto')
at random32 (RandomHelper.js:57:13)
at newId (RandomHelper.js:119:18)
at 62304 (DataCacheHelper.js:13:31)
at webpack_require (runtime.js:23:42)
at 68323 (ConfigDefaults.js:171:1)
at webpack_require (runtime.js:23:42)
at 29513 (DbgExtensionUtils.js:48:1)
at webpack_require (runtime.js:23:42)
at 54984 (EventHelpers.js:481:1)
at webpack_require (runtime.js:23:42)

I also tried to revert to previous stable version 3.0.7 and reverted the dependent lib @microsoft/applicationinsights-angularplugin-js to 15.0.1 but then it's giving me other dependent lib issue : Type 'AngularPlugin' is not assignable to type 'ITelemetryPlugin'.
Types of property 'setNextPlugin' are incompatible.

Kindly let me know how I can resolve this issue.

[goodnic]

I encountered the same issue and the only quick solution that worked for me, was to manually revert

• @microsoft/applicationinsights-analytics-js
• @microsoft/applicationinsights-common
• @microsoft/applicationinsights-core-js
• @microsoft/applicationinsights-properties-js
• @microsoft/applicationinsights-web

back to the exact version 3.1.0.

This works for me together with @microsoft/applicationinsights-angularplugin-js version 15.1.0.

[Garima-github-24]

@goodnic Thanks for sharing, it worked for me also.

[benrhere]

Same issue.

[robrorijeloxia]

Same issue for us too

[MSNev]

@siyuniu-ms can you please investigate why we are getting interface issues as they should be compatible. And as a temporary workaround please push out a release with the updates

[MSNev]

Also please investigate why we are getting
Uncaught TypeError: Cannot read properties of undefined (reading 'getCrypto')
at random32 (RandomHelper.js:57:13)
at newId (RandomHelper.js:119:18)

As we didn't change this, so it seems like the runtime doesn't include something that the code is assuming

[mburumaxwell]

@siyuniu-ms can you please investigate why we are getting interface issues as they should be compatible. And as a temporary workaround please push out a release with the updates

The applicationinsights-react-js package uses a lower bound on the dependencies which means downgrading to the older versions or reinstalling them will result in the most recent version being installed. You can see this in your lock file. See https://github.com/microsoft/applicationinsights-react-js/blob/b00b683269ae35cd40b1c22b5b15015a72b52a8f/applicationinsights-react-js/package.json#L69-L70
I suspect the same happens to the angular one.

I have solved this by installing fixed versions i.e.

pnpm install @microsoft/[email protected] @microsoft/[email protected] @microsoft/[email protected] @microsoft/[email protected]

[div-42]

I encountered the same issue and the only quick solution that worked for me, was to manually revert

* `@microsoft/applicationinsights-analytics-js`

* `@microsoft/applicationinsights-common`

* `@microsoft/applicationinsights-core-js`

* `@microsoft/applicationinsights-properties-js`

* `@microsoft/applicationinsights-web`

back to the exact version 3.1.0.

This works for me together with @microsoft/applicationinsights-angularplugin-js version 15.1.0.

We have the same problem and unfortunately this suggestion does not work for us, even if I explicitly install all packages with version 3.1.0. It looks like the @microsoft/applicationinsights-angularplugin-js package still tries to use version 3.1.1 of @microsoft/applicationinsights-common.
We use Angular v15.
Does anyone have a different fix?

[lef-nicolas]

I encountered the same issue and the only quick solution that worked for me, was to manually revert

* `@microsoft/applicationinsights-analytics-js`

* `@microsoft/applicationinsights-common`

* `@microsoft/applicationinsights-core-js`

* `@microsoft/applicationinsights-properties-js`

* `@microsoft/applicationinsights-web`

back to the exact version 3.1.0.
This works for me together with @microsoft/applicationinsights-angularplugin-js version 15.1.0.

We have the same problem and unfortunately this suggestion does not work for us, even if I explicitly install all packages with version 3.1.0. It looks like the @microsoft/applicationinsights-angularplugin-js package still tries to use version 3.1.1 of @microsoft/applicationinsights-common. We use Angular v15. Does anyone have a different fix?

On my side with that in my package.json it works :

"@microsoft/applicationinsights-angularplugin-js": "^15.1.0",
"@microsoft/applicationinsights-analytics-js": "=3.1.0",
"@microsoft/applicationinsights-common": "=3.1.0",
"@microsoft/applicationinsights-core-js": "=3.1.0",
"@microsoft/applicationinsights-properties-js": "=3.1.0",
"@microsoft/applicationinsights-web": "=3.1.0",

[gary-rusher]

I encountered the same issue and the only quick solution that worked for me, was to manually revert

* `@microsoft/applicationinsights-analytics-js`

* `@microsoft/applicationinsights-common`

* `@microsoft/applicationinsights-core-js`

* `@microsoft/applicationinsights-properties-js`

* `@microsoft/applicationinsights-web`

back to the exact version 3.1.0.
This works for me together with @microsoft/applicationinsights-angularplugin-js version 15.1.0.

We have the same problem and unfortunately this suggestion does not work for us, even if I explicitly install all packages with version 3.1.0. It looks like the @microsoft/applicationinsights-angularplugin-js package still tries to use version 3.1.1 of @microsoft/applicationinsights-common. We use Angular v15. Does anyone have a different fix?

On my side with that in my package.json it works :

"@microsoft/applicationinsights-angularplugin-js": "^15.1.0",
"@microsoft/applicationinsights-analytics-js": "=3.1.0",
"@microsoft/applicationinsights-common": "=3.1.0",
"@microsoft/applicationinsights-core-js": "=3.1.0",
"@microsoft/applicationinsights-properties-js": "=3.1.0",
"@microsoft/applicationinsights-web": "=3.1.0",

nice this seems to fix my issue. thanks

[siyuniu-ms]

hi @gary-rusher @Garima-github-24 @goodnic @p2s @benrhere @robrorijeloxia @mburumaxwell
The new version 15.1.1 is released and the problem should be solved. Thanks!

[benrhere]

Hi @siyuniu-ms , I think you're referring to "microsoft/applicationinsights-angularplugin-js" receiving a new version. I'm not referencing this package. (I'm directly referencing "@microsoft/applicationinsights-web" and "@microsoft/applicationinsights-react-js".

I've run npm update to update transient dependencies, but the problem persists for me.

[siyuniu-ms]

Hi @siyuniu-ms , I think you're referring to "microsoft/applicationinsights-angularplugin-js" receiving a new version. I'm not referencing this package. (I'm directly referencing "@microsoft/applicationinsights-web" and "@microsoft/applicationinsights-react-js".

I've run npm update to update transient dependencies, but the problem persists for me.

Hi, we also did a quick fix for react-js, the current version is 17.1.1. Could you check whether that helped solve your problem?

[benrhere]

Hi, we also did a quick fix for react-js, the current version is 17.1.1. Could you check whether that helped solve your problem?

Hi again, yes, the problem persists with applicationinsights-react-js 17.1.1. Just to confirm, I show that as released 5 days ago,

[siyuniu-ms]

@benrhere Thanks for checking. I will look into it.

[MSNev]

Looking at the code for this part of the trace

Uncaught TypeError: Cannot read properties of undefined (reading 'getCrypto')
at random32 (RandomHelper.js:57:13)

This maps to the following code let c = getCrypto() || getMsCrypto(); which shows that the getCrypto() function is "treated" as a global within the context of the SDK.

What I suspect is occurring is that your packaging system is "referencing" the loaded "module" to the above is becoming something like let c = aiModule.getCrypto() || aiModule.getMsCrypto() BUT the module (called aiModule here) either

• has not been loaded (it's undefined) or
• it's loading a different (older) version that didn't export the getCrypto() function.

Either way, I believe that this part of the exception is due to your packaging system and/or dependency issues. And if your still getting the TypeError with v17.1.1 then this even further suggests (to me) that somewhere in your dependency stack there is a mismatch of versions or perhaps even multiple versions.

I'd start by performing a full clean and checking your package-lock (or equivelent), it may also be some sort of mismatch where your packages (if your exporting the global namespaces Microsoft.ApplicationInsights) is getting overwritten by something also loading the SDK from the CDN (again this would need to be an older version).

As part of v3.x when loading from the CDN, we added some additional "debugging" objects during initialization and we also "set" 2 namespaces Microsoft.ApplicationInsights and Microsoft.ApplicationInsights3 and we only "set" the base version if the objects / properties we are setting don't always exist (first write wins) -- while the older versions operate on the last write wins)

[Garima-github-24]

@siyuniu-ms Yesterday we got below issue after installing the latest version 15.1.1:
error TS2322: Type 'AngularPlugin' is not assignable to type 'ITelemetryPlugin'

For the time being we have reverted @microsoft/applicationinsights-angularplugin-js to 15.0.1 and @microsoft/applicationinsights-web to 3.0.7 to get our application running.

[div-42]

hi @gary-rusher @Garima-github-24 @goodnic @p2s @benrhere @robrorijeloxia @mburumaxwell The new version 15.1.1 is released and the problem should be solved. Thanks!

I tried version 15.1.1 of the @microsoft/applicationinsights-angularplugin-js package but it seems there is another error, it can't find the AngularPlugin. I compared the files in the node_modules folder and it looks like there was some problem with the release (or at least that's what I suspect).

v15.0.1

vs
v15.1.1

[MSNev]

Looking at the internal office build system, yes, it appears that it did not generate the correct output, resulting in the above. (missing esm2020, fesm2015 fesm2020 folders :-( )

[MSNev]

I've just "fixed" the build pipeline (to generate the *.tgz from the correct folder again), however, we are currently having an infrastructure issue which is blocking the "re-generation" of the build structure -- I don't have a timeline at this point.

@siyuniu-ms can you please prepare (release PR) for 15.1.2, as we won't be able to delete / replace the existing 15.1.1. I'll see if the infra is able to mark 15.1.1 as "bad".

[MSNev]

Ok, I've deprecated 15.1.1, tagged as "invalid" and promoted 15.1.0 back to the latest.

[Jase7]

Anyone with Angular 17 has achieved to make it work? If so, what packages did you install? I'm unable to make it work, I've tried all the solutions in this issue 😅

[div-42]

Anyone with Angular 17 has achieved to make it work? If so, what packages did you install? I'm unable to make it work, I've tried all the solutions in this issue 😅

Unfortunately not, I have also tried all solutions (although we are using Angular 15, but I don't think this changes much).
We temporarily removed the @microsoft/applicationinsights-angularplugin-js package, the @microsoft/applicationinsights-web package is working fine for us.

[bwateratmsft]

This issue is making VSCode extension development challenging due to a transitive dependency through @vscode/extension-telemetry. Can 3.1.1 be removed from NPM or a 3.1.2 that's identical to 3.1.0 published?

[siyuniu-ms]

This issue is making VSCode extension development challenging due to a transitive dependency through @vscode/extension-telemetry. Can 3.1.1 be removed from NPM or a 3.1.2 that's identical to 3.1.0 published?

Hi, can you try use 15.1.0 angular with 3.1.0 applicationinsights-web?

[MSNev]

Can 3.1.1 be removed from NPM

No as this will cause other published dependent packages to fail because of the required version.

3.1.2 that's identical

This would also cause issues due the above as it would revert some functions that are required for the related packages, (this basically represents forward compatibility -- components "wanting" to use a newer version but working with older core versions -- we don't support this as we can't guarentee that all "future" interfaces / functions already exist in the current version -- because they don't exist yet).

In 3.1.1 we did add some additional functions / interfaces, but they were all created as backward compatible (all older interfaces / functions still exist)

And at the moment, our infrastructure pipeline (for releases) has some challenges which is blocking our ability to release anything (we are escalating this to try and get releases (specifically the angular release) to address this extremely annoying issue with 15.1.1.

If your environment you should be able to either (as a short-term workaround)

• enable skipLibCheck
• cast the compile failure as any (or unknown) -- as 3.1.1 is fully backward compatible with consumers who want older versions

[MSNev]

on the getCrypto() issue, we have been (still are) working with an internal team who has the same issue and for them, they are using webpack 5.80.0 which is generating the following within the bundle

function random32(signed) {
    var value = 0;
    var c = (0,_EnvUtils__WEBPACK_IMPORTED_MODULE_1__.getCrypto)() || (0,_EnvUtils__WEBPACK_IMPORTED_MODULE_1__.getMsCrypto)();

So the issue is occurring (for them ) because the webpack required "bundle" _EnvUtils__WEBPACK_IMPORTED_MODULE_1__ is undefined (for some reason)... So this appears to be a specific issue with the way webpack is loading / initializing.

Has anyone been able to identify a root cause as to why webpack is failing to load / run the instances?

[MSNev]

For the getcrypto this (may -- unconfirmed) be occurring because of #2306 (which was fixed this morning)... As the cyclic sequence does include EnvUtils which is where the getCrypto function is located...

[siyuniu-ms]

@bwateratmsft @div-42 @Jase7
Please hardcode the following in your package.json for a temp walk around before we lease 15.1.2
"@microsoft/applicationinsights-analytics-js": "3.1.0",
"@microsoft/applicationinsights-angularplugin-js": "15.1.0",
"@microsoft/applicationinsights-common": "3.1.0",
"@microsoft/applicationinsights-core-js": "3.1.0",
"@microsoft/applicationinsights-properties-js": "3.1.0",
"@microsoft/applicationinsights-web": "3.1.0"

This will at least make the angular app to build and work.
I've tested this in our sample app also microsoft/applicationinsights-angularplugin-js#156
Hopefully this could help.

[MSNev]

Tagging as an issue that (should) be fixed in v3.1.2, where the linked issue #2306 should address the getCrypto portion of this while we will release an updated angular plugin to match AI v3.1.2 when available.

[chad-stewart]

Problem persists for @microsoft/[email protected] -- is the react package also fixed w/ v 3.1.2?

├─ @microsoft/[email protected]
├─ @microsoft/[email protected]
├─ @microsoft/[email protected]
├─ @microsoft/[email protected]
├─ @microsoft/[email protected]
├─ @microsoft/[email protected]
├─ @microsoft/[email protected]
├─ @microsoft/[email protected]
├─ @microsoft/[email protected]
└─ @microsoft/[email protected]

[MSNev]

Yes, it should be but because of both the getCrypto and the #2311 we will not only be publishing a 3.1.2 (which we should be able to achieve today) but we will also publish all components to shift the min version up to 3.1.2 to avoid the memory issue.