Telemetry Initializer increases drastically number of calls to Application Inisghts

Question

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

• Scanned through all tutorials on microsoft: unable to find useful information
• Scanned through stack overflow: couldn't find a similar problem
• console.log(): They are exploding my debug console _ Tried to add a condition to only start the initializer under certain circumstances (especially envelope.baseType === "ExceptionData" but it didn't work)
• Harrassed ChatGPT trying to debug: unable to get useful tips or information

Answer 1

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.