reactjsazureazure-application-insightstelemetryappinsights

Telemetry Initializer increases drastically number of calls to Application Inisghts


I didn't find a similar problem on Stack or on Google so I am asking here. I am a very Junior Developer and I work with Azure AppInsights. I added a telemetry Initializer to be able to check the user ID for debugging purposes (similar reasons: Azure - App Insights - how to track the logged-in Username in Auth Id?). However, I realized that this telemetry provider increased drastically the number of calls to App Insights. I added some console.logs() to check what was going on and they went through the roof (+500 messages in one call). Here is the file AppInisghts.js:

import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
import { ClickAnalyticsPlugin } from '@microsoft/applicationinsights-clickanalytics-js';
import { createBrowserHistory } from "history";

const initializeAppInsights = (username) => {
const browserHistory = createBrowserHistory({ basename: '' });
const reactPlugin = new ReactPlugin();
const clickPluginInstance = new ClickAnalyticsPlugin();
const clickPluginConfig = { autoCapture: true }; 

const appInsights = new ApplicationInsights({
  config: {
    connectionString: process.env.REACT_APP_FRONTEND_APP_INSIGHT_CONNECTION_STRING,
    enableAutoRouteTracking: true,
    extensions: [reactPlugin, clickPluginInstance],
    extensionConfig: {
      [reactPlugin.identifier]: { history: browserHistory },
      [clickPluginInstance.identifier]: clickPluginConfig
    }
  }
});
 // ----- this console.log() is only called once -----
console.log("Test appInsights") 

const telemetryInitializer = (envelope) => {
    envelope.data.username = username;
 // ------ this is where the nightmare begins -----
    console.log("test", envelope.baseType); 
    console.log("envelope", envelope);
  }

appInsights.addTelemetryInitializer(telemetryInitializer);

appInsights.loadAppInsights();


return { reactPlugin, appInsights };
};

export default initializeAppInsights;

The username is a prop passed from App.js. I basically followed this tutorial: https://learn.microsoft.com/en-us/azure/azure-monitor/app/api-filtering-sampling?tabs=npmpackage. I also tried this without success: Disable Application Insights Browser Telemetry for a Recurring JavaScript call

Can you please help me? Why are there so many calls and can I stop them from happening? Thank you so much in advance!

Cheers


Solution

  • It looks like that in this language Application Insights uploads console logs. Which results in recursion in your case:

    1. The first console log triggers Telemetry Initializer
    2. It outputs more console logs, they trigger Telemetry Initializer
    3. Vicious cycle

    Note, it doesn't result in stack overflow because Telemetry Initializer is called not when console.log invoked. But it does result in exponential amplification.