Instrument browser apps with Application Insights telemetry

Instruments browser and web apps with the Application Insights JavaScript SDK (@microsoft/applicationinsights-web) for Real User Monitoring: auto-collecting page views, AJAX/fetch dependencies, unhandled exceptions, and (with the Click Analytics plugin) clicks, plus custom events, custom metrics, and GenAI agent traces that follow OpenTelemetry GenAI semantic conventions and correlate to backend spans via W3C Trace Context. It is distinct from a companion skill for azure-monitor-opentelemetry-ts, which targets Node.js server apps - this one covers browser/web code and React Native.

Before implementation it recommends searching the microsoft-docs MCP for current setup, configuration, and framework-extension patterns, and verifying the package version with npm view @microsoft/applicationinsights-web version.

Setup installs the core RUM package (npm i --save @microsoft/applicationinsights-web) plus optional plugins only as needed: Click Analytics, React, React Native, and Angular plugins, a dev-only debug plugin, and a User Timing (performance.mark/measure) integration. Typings ship with the package. The connection string is required at init time and ships in plaintext to clients - Microsoft Entra ID auth is not supported for browser telemetry, so a separate App Insights resource with local auth enabled is recommended to isolate browser RUM from backend telemetry.

A minimal setup constructs ApplicationInsights with connectionString, enableAutoRouteTracking for SPA route changes, enableCorsCorrelation and header-tracking flags for cross-origin AJAX, distributedTracingMode: 2 (AI_AND_W3C) to emit traceparent for backend correlation, and autoTrackPageVisitTime; loadAppInsights() is called exactly once, as early as possible, followed by an initial trackPageView(). An alternative SDK Loader Script path pastes a snippet as the first <script> in <head> for an auto-updating, zero-build-pipeline setup, exposing a queued loader-only API (trackEvent, trackPageView, trackException, trackTrace, trackDependencyData, trackMetric, and related start/stop and initializer methods) until the full SDK loads.

Use it to instrument RUM for page views, clicks, AJAX/fetch dependencies, exceptions, custom events, and browser-side GenAI agent traces correlated to a backend.

It is not the right skill for Node.js server-side instrumentation - that is the separate azure-monitor-opentelemetry-ts skill.

Core tracking APIs cover page views, custom events, caught exceptions (with a severity level), traces (severity 0 Verbose through 4 Critical), custom numeric metrics, manually tracked dependencies (fetch/XHR are auto-tracked), and authenticated-user context (set once per session, values are PII, so emails should not be passed) with an explicit clear on logout; flush() forces a send before unload. Telemetry initializers run for every envelope before send and can enrich data (cloud role tags, app version/build), drop noisy items such as health-check page views by returning false, or scrub secrets out of query strings. The Click Analytics plugin auto-captures clicks tagged with data-ai-* attributes as custom events. SPA route tracking can be built-in (enableAutoRouteTracking, hooking history.pushState/popstate), via the React Router withAITracking HOC, or manual trackPageView calls on route change - picking one avoids duplicate page views.

For GenAI agent traces, the browser emits Dependency telemetry whose attributes follow OpenTelemetry GenAI semantic conventions, gated behind OTEL_SEMCONV_STABILITY_OPT_IN=gen_ai_latest_experimental so backend instrumentations agree on the schema version. Required attribute keys differ per span type: invoke_agent/create_agent need gen_ai.operation.name, gen_ai.provider.name, and agent identity fields; chat needs model and token-usage fields; execute_tool needs tool name, type, and call id. Well-known gen_ai.provider.name values include openai, azure.ai.openai, azure.ai.inference, anthropic, aws.bedrock, gcp.gemini, gcp.vertex_ai, cohere, mistral_ai, groq, deepseek, perplexity, x_ai, and ibm.watsonx.ai. Sensitive-content attributes such as system instructions and input/output messages are opt-in by default and should be gated behind a runtime flag with approved data handling. A KQL query pattern is given for summarizing GenAI dependency calls by operation, agent, model, latency percentile, and average token usage.

Distributed tracing sets distributedTracingMode: 2 so the SDK adds traceparent (and legacy Request-Id) to outbound fetch/XHR calls, auto-linking to OpenTelemetry-instrumented backends via the browser's operation_Id; cross-origin calls additionally need enableCorsCorrelation: true and the calling origin exposed in the API's CORS headers. Framework recipes cover React, React Native, Angular, Next.js, and Vite. Core Web Vitals (CLS, LCP, INP) can be piped in via the web-vitals package into trackMetric. Cookie and privacy controls include isCookieUseDisabled, a configurable cookieCfg, and a runtime getCookieMgr().setEnabled() plus disableTelemetry toggle for dynamic consent. Sampling can be configured server-side on the resource or client-side via samplingPercentage, with per-type dropping available through telemetry initializers. The SDK flushes via sendBeacon on pagehide/unload, and SPAs should call flush() before destructive transitions like logout. The full minified SDK is roughly 110 KB (about 36 KB gzipped); the Loader Script path or plugin tree-shaking helps aggressive size budgets.

Frontend and full-stack developers instrumenting browser or React Native apps for Real User Monitoring and GenAI agent observability that needs to correlate with backend OpenTelemetry traces.