Make AI JS SDK for with NativeScript-Angular

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]

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.)

[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?