Instrument browser apps with Application Insights telemetry

This is Real User Monitoring (RUM) for browser apps using @microsoft/applicationinsights-web. It auto-collects page views, AJAX/fetch dependencies, and unhandled exceptions, and - with the Click Analytics plugin - clicks; it also supports custom events, metrics, and GenAI agent traces that follow OpenTelemetry GenAI semantic conventions and correlate to backend spans via W3C Trace Context. The core tracking API covers page views, custom events, exceptions, severity-leveled traces, numeric metrics, manually tracked dependencies, and authenticated-user identity set once per session and cleared on logout; telemetry initializers run on every envelope before it's sent, letting you attach fields like app.version and ai.cloud.role, drop noisy items such as health-check page views, and scrub secrets out of query strings. SPA route tracking can be automatic (hooking history.pushState/popstate), via the React Router withAITracking HOC, or fully manual. Distributed tracing is enabled with distributedTracingMode: 2 (AI_AND_W3C), which adds a traceparent header to outbound fetch/XHR calls so an OpenTelemetry-instrumented backend links to the same operation. Core Web Vitals (CLS, LCP, INP) can be piped in via the web-vitals library.

Use it to instrument browser or web apps - and React Native - for RUM: page views, clicks, AJAX/fetch dependencies, exceptions, custom events, and browser-side GenAI agent traces correlated to backend telemetry. It is explicitly distinct from azure-monitor-opentelemetry-ts, which targets Node.js server apps; use this skill for client-side code only. Before implementing, it recommends searching the microsoft-docs MCP for current API patterns and verifying the installed package version. Its limitations restrict it to tasks that clearly match its upstream source and local project context, and generated code, dependencies, and external service behavior still need verification before being applied.

npm i --save @microsoft/applicationinsights-web

The SDK requires a connection string at init time, and that string ships in plaintext to every client - Microsoft Entra ID auth is not supported for browser telemetry, so a separate App Insights resource with local auth is recommended if browser RUM needs to be isolated from backend telemetry. loadAppInsights() is called exactly once, as early as possible, followed by an initial trackPageView(); with enableAutoRouteTracking on, later route changes are tracked automatically. GenAI agent invocations are emitted as Dependency telemetry with OpenTelemetry-standard attribute keys - gen_ai.operation.name (invoke_agent, create_agent, chat, execute_tool), gen_ai.provider.name, gen_ai.agent.name, gen_ai.request.model, and input/output token-usage counts - so they're queryable in KQL alongside backend agent spans; sensitive fields like gen_ai.input.messages and gen_ai.output.messages are opt-in only and should be gated behind an approved runtime flag.

Optional plugins extend the core SDK: applicationinsights-clickanalytics-js for auto-captured click telemetry tagged with data-ai-* attributes, applicationinsights-react-js for router instrumentation and the withAITracking HOC, applicationinsights-react-native for native crashes and sessions, applicationinsights-angularplugin-js for router events and error handling, and applicationinsights-perfmarkmeasure-js for User Timing integration. It correlates with OpenTelemetry-instrumented backends via W3C trace context, and its GenAI conventions recognize provider names including OpenAI, Azure AI OpenAI/Inference, Anthropic, AWS Bedrock, Google Gemini/Vertex AI, Cohere, Mistral, Groq, DeepSeek, Perplexity, xAI, and IBM watsonx.ai. Privacy controls include disabling cookies entirely or toggling consent dynamically, and either server-side ingestion sampling or an SDK-side sampling percentage.

Frontend and full-stack engineers instrumenting a browser, SPA, or React Native app for real user monitoring who need auto-collected page views, dependencies, and exceptions, plus GenAI agent observability that lines up with backend OpenTelemetry traces, instead of wiring custom telemetry and correlation IDs by hand.