Applicationinsights-js: Make AI JS SDK for with NativeScript-Angular

[dmytro-gokun]

I'm trying to make AI JS SDK work with my NativeScript-Angular application. It compiles fine, but then I get a runtime exception:

System.err: TypeError: Cannot assign to read only property '__extends' of object '[object global]'
System.err: File: (file: node_modules\@microsoft\applicationinsights-shims\dist-esm\applicationinsights-shims.js:96:0)
System.err: 
System.err: StackTrace:
System.err: (file: node_modules\@microsoft\applicationinsights-shims\dist-esm\applicationinsights-shims.js:96:0)
System.err:     at (file: node_modules\@microsoft\applicationinsights-shims\dist-esm\applicationinsights-shims.js:97:1)
System.err:     at ../node_modules/@microsoft/applicationinsights-shims/dist-esm/applicationinsights-shims.js(file:///data/data/com.mycompany.live/files/app/vendor.js:95073:30)     
System.err:     at __webpack_require__(file: src\webpack\bootstrap:753:0)
System.err:     at fn(file: src\webpack\bootstrap:120:0)
System.err:     at ../node_modules/@microsoft/applicationinsights-web/dist-esm/applicationinsights-web.js(file: node_modules\@microsoft\applicationinsights-web\dist-esm\applicationinsights-web.js:1:0)
System.err:     at __webpack_require__(file: src\webpack\bootstrap:753:0)
System.err:     at fn(file: src\webpack\bootstrap:120:0)
System.err:     at ./app/shared/tracking.service.ts(file:///data/data/com.mycompany.live/files/app/bundle.js:1681:92)
System.err:     at __webpack_require__(file: src\webpack\bootstrap:753:0)
System.err:     at fn(file: src\webpack\bootstrap:120:0)
System.err:     at ./app/shared/default-error-handler.service.ts(file:///data/data/com.mycompany.live/files/app/bundle.js:1316:75)
System.err:     at __webpack_require__(file: src\webpack\bootstrap:753:0)
System.err:     at fn(file: src\webpack\bootstrap:120:0)
System.err:     at ./app/shared/index.ts(file:///data/data/com.mycompany.live/files/app/bundle.js:1351:88)
System.err:     at __webpack_require__(file: src\webpack\bootstrap:753:0)
System.err:     at fn(file: src\webpack\bootstrap:120:0)
System.err:     at ./app/app.module.ts(file:///data/data/com.mycompany.live/files/app/bundle.js:214:66)
System.err:     at __webpack_require__(file: src\webpack\bootstrap:753:0)
System.err:     at fn(file: src\webpack\bootstrap:120:0)
System.err:     at (file:///data/data/com.mycompany.live/files/app/bundle.js:2027:73)
System.err:     at ./main.ts(file:///data/data/com.mycompany.live/files/app/bundle.js:2095:30)
System.err:     at __webpack_require__(file: src\webpack\bootstrap:753:0)
System.err:     at checkDeferredModules(file: src\webpack\bootstrap:43:0)
System.err:     at webpackJsonpCallback(file: src\webpack\bootstrap:30:0)
System.err:     at (file:///data/data/com.mycompany.live/files/app/bundle.js:2:57)
System.err:     at require(:1:266)

I've investigated it a bit and can say that it all boils down to these lines:

https://github.com/microsoft/ApplicationInsights-JS/blob/712f13e38c01f4e029d8fe73fc3ae7ce0b05f899/tools/shims/src/applicationinsights-shims.ts#L116

and

https://github.com/microsoft/ApplicationInsights-JS/blob/712f13e38c01f4e029d8fe73fc3ae7ce0b05f899/tools/shims/src/applicationinsights-shims.ts#L121

So, an attempt is made here to modify a read-only property. This can be easily worked around by checking if that property is falsy first. So, instead of:

root.__extends = root.__extends || extendsFn;

it should do:

if (!root.__extends) {
  root.__extends = extendsFn;
}

Also, instead of:

__extends = globalObj.__extends;

it should do:

if (__extends !== globalObj.__extends) {
  __extends = globalObj.__extends;
}

It is less idiomatic, but it does the job.

Does it all make sense or am I wasting time attempting to make AI & NS work together?

Thanks.

[MSNev]

I've published an updated shims package with the fix, but the dependencies for the existing published packages will need to wait for the next release.

[dmytro-gokun]

@MSNev Thanks a lot. Is there some kind of pre-release channel where i can grab this and test is with my app?

[MSNev]

We don't currently have a pre-release channel, but you should be able to clone the repo locally and build.
The bundle or dist folders will include the compiled code that gets packaged and uploaded to NPM / Cdn

[GlenCroft]

@dmytro-gokun Have you managed to get this working in your application? I've cloned the repo to get the updated shims as MSNev suggested, I get no compilation or runtime errors but nothing gets captured in my application insights

[dmytro-gokun]

@GlenCroft Yes, i gave it a try and got the same results as yours :(. Unfortunately, at the moment, I'm working on another task and this one has been postponed. So, I had no chance to dig deeper. If you have time and are willing to do that - I will send some rays of power your way 🔋

[GlenCroft]

I've traced it down to this check which is seemingly in place to fall back to XDomainRequest for IE8/9
https://github.com/microsoft/ApplicationInsights-JS/blob/b5d7743bb2673f19d831730bc77666292be836c5/channels/applicationinsights-channel-js/src/Sender.ts#L240

"withCredentials" isn't a property of XMLHttpRequest in the Nativescript application, my test output shows:

AI TEST XHR: {
"UNSENT": 0,
"OPENED": 1,
"HEADERS_RECEIVED": 2,
"LOADING": 3,
"DONE": 4,
"_responseType": "",
"_listeners": {},
"_readyState": 0
}

I modifed the code for this check and I got a successful pageView logged in application insights, albeit missing the session_id, user_id and timing information.

@MSNev Do you think there's any way we could add config to force the use of XMLHttpRequest or something?

[dmytro-gokun]

@GlenCroft Great job. I hope, this will finally work as expected.

[MSNev]

Looking at the code and the definition of XMLHttpRequest (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials) there is currently no config option to directly "bypass" that check.

However, the simplest option I can think of (as long as the XMLHttpRequest object is not read only) would be before initializing the SDK would be to just "add" a prototype property for withCredentials with a value of false, so that this check "if ("withCredentials" in testXhr)" would therefore be true...

The only option (which I'll add an Issue for) would be to add an "override" method, to allow you to completely take over the sending request. This was always part of a longer term option as part of merging some internal extensions, but we don't have an explicit timeline for this.

[MSNev]

OK, I've created the following feature request to provide this ability
[Feature Request] Provide an override option for the Sender #1399

I don't have a timeline at this point as I'm currently in the process of creating the current 2.5.9 release (core was released to NPM late yesterday -- I provide and update the detailed timeline as I do the release on the milestone instances.)

[MSNev]

Closing as 2.5.9 is now completely deployed to NPM and all CDN endpoints

[MSNev]

React v3.1.1 and ReactNative v2.3.1 are now published to NPM

[MSNev]

I've deprecated the react v3.1.1 and react-native v2.3.1 packages until I can publish an updated versions #1553

[MSNev]

I'm updating #1553 with the current state, please see comments there for additional info.

@xiao-lix For Angular, this will need a new release to address (remove the need for) __extends and __assigns without the globals or webpack ProviderPlugin work-arounds.
Steps require

• Update Angular to use v2.6.2
• Update rollup.config.js so that during packaging it calls the (updated) updateDistEsm script
• Remove the import of applicationinsights-shims in the index.ts

I can help you or work on it tomorrow.