Application Insights (External NPM Dependency): Error packaging

[safalkishore]

We tried to add the App Insights (https://www.npmjs.com/package/applicationinsights) npm package to our custom visual in order to track all logs/events from the same.

However we ran into issues (shown below) when we try to run or package the visual. This seems related to how pbiviz uses webpack internally and bundles files, in addition to including external dependencies.

We also did try to add external dependencies on the 'pbiviz.json' file as shown below. Yet we face the same errors.

In addition we did add other npm packages on our 'package.json' that the app inisghts npm makes use of, so for example :

-applicationinsights-native-metrics
-async_hook
-async-listener

etc..

Is this allowed in the first place ? Is there anyone who has done this before and has a fix or suggestions ?

Below are the changes made to the project :

package.json (removed other dependicies for now)
---------------

"dependencies": {
"applicationinsights": "^1.7.3"
}

visual.ts
---------------

import * as appInsights from 'applicationinsights';

constructor(options: VisualConstructorOptions) {
// App Insights Set-up
appInsights.setup(config.instrumentKey);
}

pbiviz.json
---------------

,
"externalJS": [
"node_modules/async-listener/index.js",
"node_modules/continuation-local-storage/context.js",
"node_modules/applicationinsights/out/AutoCollection/CorrelationContextManager.js",
"node_modules/applicationinsights/out/applicationinsights.js"
],

Errors:
===================
WARNING in ./node_modules/applicationinsights/out/AutoCollection/NativePerformance.js
Module not found: Error: Can't resolve 'applicationinsights-native-metrics' in 'C:\Users\safalk\Source\Repos\FUN-ESF-FE-OCVPowerBIVisual\node_modules\applicationinsights\out\AutoCollection'
@ ./node_modules/applicationinsights/out/AutoCollection/NativePerformance.js
@ ./node_modules/applicationinsights/out/applicationinsights.js
@ ./src/visual.ts
@ ./.tmp/precompile/visualPlugin.ts
@ multi ./.tmp/precompile/visualPlugin.ts

ERROR in ./node_modules/cls-hooked/context.js
Module not found: Error: Can't resolve 'async_hooks' in 'C:\Users\safalk\Source\Repos\FUN-ESF-FE-OCVPowerBIVisual\node_modules\cls-hooked'
@ ./node_modules/cls-hooked/context.js 10:18-40
@ ./node_modules/cls-hooked/index.js
@ ./node_modules/applicationinsights/out/AutoCollection/CorrelationContextManager.js
@ ./node_modules/applicationinsights/out/applicationinsights.js
@ ./src/visual.ts
@ ./.tmp/precompile/visualPlugin.ts
@ multi ./.tmp/precompile/visualPlugin.ts

ERROR in ./node_modules/applicationinsights/out/Library/Sender.js
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\safalk\Source\Repos\FUN-ESF-FE-OCVPowerBIVisual\node_modules\applicationinsights\out\Library'
@ ./node_modules/applicationinsights/out/Library/Sender.js 11:20-44
@ ./node_modules/applicationinsights/out/Library/TelemetryClient.js
@ ./node_modules/applicationinsights/out/Library/NodeClient.js
@ ./node_modules/applicationinsights/out/applicationinsights.js
@ ./src/visual.ts
@ ./.tmp/precompile/visualPlugin.ts
@ multi ./.tmp/precompile/visualPlugin.ts

[safalkishore · Accepted solution]

Application Insights has mutiple NPM package versions for the WEB. The one shown above is primarily meant for a NODE SERVER applciation, as it has built in capability to show LIVE METRICS etc.

The 'PBIVIZ' package ingternally uses WEBPACK to bundle, and hence with the original NPM package we ran into mutiple issues as it has a dependency of plenty of packages.

What we ended up using is the App Insights for Web - https://github.com/microsoft/ApplicationInsights-JS

We simply followed sample on the above GITHUB page above and we were able to set it up.