👀 Views: 39 💬 Answers: 1 📅 Created: 2025-06-01

react application-insights telemetry javascript

I've looked through the documentation and I'm still confused about I'm working on a React application and integrating Azure Application Insights using the SDK version 2.6.4. I want to customize the request names that are sent to Application Insights, as the default behavior is to log the full URL, which is not user-friendly for our analytics. I've tried using `TelemetryProcessor` for this, but the requests still show the full URL in the Application Insights dashboard instead of the customized name. Here's what I have in my code: ```javascript import { ApplicationInsights } from '@microsoft/applicationinsights-web'; const appInsights = new ApplicationInsights({ config: { instrumentationKey: 'YOUR_INSTRUMENTATION_KEY', disableAjaxTracking: false, telemetryInitializers: [customTelemetryInitializer] } }); function customTelemetryInitializer(envelope) { if (envelope.baseType === "RequestData") { envelope.name = 'Custom Request Name'; // This does not seem to take effect } } appInsights.loadAppInsights(); ``` However, when I check the logs in the Application Insights portal, the requests still show the original URL instead of 'Custom Request Name'. I verified that the `customTelemetryInitializer` function is being called by adding console logs within it, and it confirms that the envelope's name is being set correctly. I also checked that the telemetry initializer is not overridden elsewhere in my code. The only other tracking I’ve done is ensuring that I’m initializing the Application Insights instance before any HTTP requests are made. Can someone help me understand why the request name isn't being updated as expected? Is there a specific order or configuration setting I might be missing? What am I doing wrong?