Consider accessing ApplicationInsights instance via import

Currently the recommended way to access to access the ApplicationInsights instance seems to be to set it as a global, if I want to access it from another module, or to pass it to every module that needs it.

I would love it if I could simply do something like this: index.js:

import { ApplicationInsights } from '@microsoft/applicationinsights-web';

var appInsights = new ApplicationInsights({
    config: {
        instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE'
    }
});
appInsights.loadAppInsights();

other-module.js:

// This imports the appInsights instance that was configured with `loadAppInsights()` in index.js
import appInsights from '@microsoft/applicationinsights-web';

// appInsights.trackX();

Ideally index.js would probably looks something like this, but this would be very breaking, so probably not possible:

import { initAppInsights } from '@microsoft/applicationinsights-web';

initAppInsights({
    config: {
        instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE'
    }
});

[bryantee]

This is how I’ve gone about implementing it and seems to be good. Basically moving away from the revealing module pattern used in the demo in favor of a class singleton-ish pattern.

import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';

class TelemetryService {
  reactPlugin = new ReactPlugin();
  appInsights = null;

  /**
   * Initialize the Application Insights class
   * @param {string} instrumentationKey - Application Insights Instrumentation Key
   * @param {Object} browserHistory - client's browser history, supplied by the withRouter HOC
   * @return {void}
   */
  initialize = (instrumentationKey, browserHistory) => {
    if (!instrumentationKey || !browserHistory) {
      throw new Error('Could not initialize Telemetry Service');
    }

    this.appInsights = new ApplicationInsights({
      config: {
        instrumentationKey,
        maxBatchInterval: 0,
        enableCorsCorrelation: true,
        disableFetchTracking: false,
        extensions: [this.reactPlugin],
        extensionConfig: {
          [this.reactPlugin.identifier]: {
            history: browserHistory,
          },
        },
      },
    });

    this.appInsights.loadAppInsights();
  };
}

const ai = new TelemetryService();

export { ai };

Then any module can get access to the appInsights singleton.

import { ai } from './TelemetryService'

function trackEvent(event) {
  ai.appInsights.trackEvent({ name: event });
}

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.