[BUG] window.appInsights is `undefined`

Edit

So apparantly this isn’t a bug, but it’s still very confusing since it doesn’t work the way that’s described in the deocumentation. The documentation needs to be updated to mention that the npm version doesn’t populate window.appInsights, so it needs to be exported to be used in other components. See this comment below for an example: https://github.com/microsoft/ApplicationInsights-JS/issues/1951#issuecomment-1329154828

Original description

Description/Screenshot window.appInsights is undefined, so I’m unable to use any appInsights methods in other files than the one where I declared appInsights. I’m using Svelte if that matters, and appInsights is initialized in App.svelte

in vscode:

in google chrome:

code:

    const appInsights = new ApplicationInsights({
      config: {
        connectionString:
          process.env.AZURE_APPLICATION_INNSIGHTS_CONNECTION_STRING,
      },
    });
    appInsights.loadAppInsights();
    appInsights.trackPageView(); // Manually call trackPageView to establish the current user/session/pageview

    window.appInsights.trackEvent('Test');

error messages:

Property ‘appInsights’ does not exist on type ‘Window & typeof globalThis’.ts(2339)

App.svelte:29 Uncaught TypeError: Cannot read properties of undefined (reading ‘trackEvent’) at instance (App.svelte:29:24) at init (index.mjs:1997:11) at new App (App.svelte:45:40) at main.js:3:13 at main.js:5:2

Steps to Reproduce

• OS/Browser: Windows 10 / Chrome Version 107.0.5304.107 (Official Build) (64-bit)
• SDK Version [e.g. 22]: 2.8.9
• How you initialized the SDK: npm-based

Expected behavior window.appInsights is NOT undefined

Additional context Add any other context about the problem here.

[Karlie-777]

@Snailedlt

I only replaced the connectionString with process.env.AZURE_APPLICATION_INNSIGHTS_CONNECTION_STRING from our .env file. But I get an error saying ReferenceError: “process is not defined”. I assume the error comes because the file is accessed before the .env is initialized, so process is undefined at that moment.

for many website structures, process.env can’t be referenced directly in index.html, for example, if you are using React, you have to use env variables like this: connectionString: `%REACT_APP_CONNECTION_STRING%`. so using env variables in correct ways might help.

[Snailedlt]

I ended up just exporting appInsights like so:

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

export const appInsights = new ApplicationInsights({
  config: {
    connectionString: process.env.AZURE_APPLICATION_INNSIGHTS_CONNECTION_STRING,
  },
});

And then loading it in App.svelte

  import { appInsights } from './util/appInsights';

  appInsights.loadAppInsights();
  appInsights.trackPageView(); // Manually call trackPageView to establish the current user/session/pageview

And finally using it in any other file by importing it:

  import { appInsights } from '../util/appInsights';
  ...
  ...
    // Log to Azure Application Insights
    if (
      process.env.isProd ||
      process.env.AZURE_APPLICATION_INNSIGHTS_CONNECTION_STRING
    ) {
      appInsights.trackEvent(
        {
          name: `FeatureForm${featureName}`,
        },
        {
          feature: {
            featureName: featureName,
            featureDescription: description,
          },
          userInput: {
            userHasOpinion: userHasOpinion,
            selectedAnswer: selectedAnswer,
            text: userText,
            email: userEmail,
          },
        }
      );
    } else {
      console.log('Application Insights is NOT active!');
    }