applicationinsights-web-ts

What it does

Instructs the agent to set up Real User Monitoring (RUM) for browser/web applications using the Application Insights JavaScript SDK. It covers core telemetry (page views, AJAX/fetch dependencies, exceptions), optional plugins (click analytics, React, React Native, Angular), and GenAI agent traces that follow OpenTelemetry conventions. Includes guidance on installation, loader script usage, and framework extensions. Also defines how to emit and correlate GenAI-related dependencies with backend spans via distributed tracing.

How it works

The skill prescribes:

• Install core and optional plugins via npm commands, including creating and configuring an ApplicationInsights instance with a config object that enables features like enableAutoRouteTracking, enableCorsCorrelation, distributedTracingMode, and various tracking toggles.
• Use the Quick Start code to instantiate ApplicationInsights, load it, and call trackPageView and other track* methods as appropriate.
• Provide a Loader Script snippet to load the SDK from a CDN, with a queue of API methods that executes once the SDK is ready.
• Use Core Tracking APIs to send page views, events, exceptions, traces, metrics, and dependencies, including optional parameters for IDs, names, durations, and additional properties.
• Add Telemetry Initializers to enrich telemetry items and optionally drop items by returning false.
• Enable Click Analytics via the ClickAnalyticsPlugin and mark elements with data-ai-* attributes.
• Enable SPA route tracking via enableAutoRouteTracking or Manual trackPageView calls on route changes.
• Configure distributed tracing (distributedTracingMode: 2) to attach traceparent to outbound calls and correlate with backend OpenTelemetry spans.
• Emit GenAI agent traces using OpenTelemetry GenAI semantic conventions, with an opt-in environment variable and a pattern for invoking agents and nested tool/model spans; send GenAI-related dependencies and handle errors.
• Provide Kusto query example to analyze GenAI traces.
• Include framework-specific snippets for React (withAITracking) and references to framework extensions.

When to use it

Use when you need browser/web telemetry with automatic and manual tracking for user interactions, network calls, errors, and GenAI agent traces that should correlate with backend traces. Activate if you require cross-origin correlation, SPA route tracking, and optional ecosystem plugins (Click Analytics, React/Angular plugins).

What it can touch

• Core library: @microsoft/applicationinsights-web.
• Optional plugins: @microsoft/applicationinsights-clickanalytics-js, @microsoft/applicationinsights-react-js, @microsoft/applicationinsights-react-native, @microsoft/applicationinsights-angularplugin-js, @microsoft/applicationinsights-debugplugin-js, @microsoft/applicationinsights-perfmarkmeasure-js.
• It references environment variables (e.g., VITE_APPINSIGHTS_CONNECTION_STRING, NEXT_PUBLIC_APPINSIGHTS_CONNECTION_STRING) and code APIs like ApplicationInsights, trackPageView, trackEvent, trackException, trackDependencyData, setAuthenticatedUserContext, flush, and addTelemetryInitializer.

Caveats

• The browser SDK requires a plaintext connection string at init time; Entra ID auth is not supported for browser telemetry.
• GenAI traces require explicit opt-in and follow OpenTelemetry GenAI semantic conventions; sensitive content fields are opt-in and should be gated.
• Some features depend on build setup and framework integration (e.g., React Router or React Native plugins) and may require additional configuration per framework.
• Loader Script usage bypasses build pipelines and relies on CDN delivery; consider security and versioning implications.