Application Insights Web Monitoring
Instrument browser and React Native apps with Application Insights for user behavior, requests, errors, and GenAI trace visibility.
The documentation explicitly discloses that the browser connection string is plaintext, warns against reusing backend resources, and provides cookie, consent, sampling, sensitive-GenAI opt-in, and query-string scrubbing guidance. However, the quick-start enables request/response header tracking and sends telemetry externally by design, without a unified user-confirmation flow, complete data-flow inventory, least-privilege guidance, or rollback procedure, so points are deducted.
The material is organized and covers npm, Loader, frameworks, configuration, pitfalls, and failure telemetry patterns. However, there are no skill-specific tests, pinned compatibility checks, API verification, or reproducible abnormal-input cases; several SDK and OTel mappings depend on current external documentation. Under static calibration the score is capped below 10 and further reduced for uncertainty.
The target is clearly browser/Web and React Native Application Insights RUM, and it distinguishes the Node.js skill. Multiple frameworks and scenarios are covered and browser limitations are noted, but non-fit boundaries, semantic trigger rules, Chinese-language support, and mainland-China network reachability are not specified. Loader, Azure endpoints, and external MCP dependencies may also be network-sensitive, so points are deducted.
The skill has clear progressive sections, installation notes, dependency tables, examples, reference files, pitfalls, a license, and a version field. It lacks a changelog and explicit maintenance owner/update process, and its claimed complete references still depend on external Microsoft documentation, so it does not receive full marks.
The skill covers initialization, auto-collection, framework integration, privacy, sampling, distributed tracing, and GenAI queries, which plausibly addresses the core coding task. Because no examples were executed or validated here, actual API compatibility and completeness remain uncertain; users must still configure Azure, CORS, and consent controls and review generated code. It reaches the static-review ceiling of 7 but not higher.
The source includes auditable files, references to Microsoft Learn, the SDK, and OTel, plus repository-level CI and test signals. It lacks skill-specific coverage and independently reproducible execution evidence in this review; evidence URLs are intentionally omitted, so only limited credit is justified.
- Do not treat the browser connection string or client telemetry resource as a backend secret; use an isolated resource with constrained access.
- The example enables request and response header tracking; review and disable it in production if headers may contain PII or credentials.
- Implement explicit consent, withdrawal, and retention controls before telemetry collection, especially for GenAI messages, tool arguments, and results.
- Before deployment, verify SDK versions, OTel attribute names, CORS headers, Azure endpoints, and mainland-China reachability; this review did not execute those checks.
What does this skill do, and when should you use it?
This skill guides TypeScript browser applications through real user monitoring with the Application Insights JavaScript SDK. It covers npm and SDK Loader Script setup, page views, clicks, AJAX/fetch dependencies, exceptions, custom events, and metrics. It also covers React, React Native, and Angular extensions, telemetry initializers, privacy controls, sampling, and unload delivery. For browser-side AI agents, it describes GenAI semantic-convention attributes for agent, model, and tool dependencies and correlation with backend traces.
It explains how to install @microsoft/applicationinsights-web and optional plugins, configure the connection string and automatic collection, and emit telemetry with trackPageView, trackEvent, trackException, trackTrace, trackMetric, and trackDependencyData. It shows how to enrich, filter, and scrub telemetry with initializers; correlate browser requests with backend spans using W3C trace context and CORS; record agent, chat, and tool spans with GenAI attributes; and query those spans with KQL.
- A frontend engineer needs automatic page-view and SPA route tracking without double-counting manual page views.
- A product team needs browser click analytics, custom business events, page performance data, and Web Vitals.
- A full-stack team needs browser fetch/XHR requests correlated with OpenTelemetry-instrumented backend spans.
- An AI application developer needs browser-side visibility into agent invocations, model calls, tool execution, latency, and token usage.
- A privacy or security team needs cookie controls, consent-based telemetry enablement, and query-string secret scrubbing.
What are this skill's strengths and limitations?
- Covers browser RUM, click analytics, exceptions, dependencies, custom metrics, and Web Vitals.
- Includes guidance for React, React Native, Angular, Next.js, and Vite integrations.
- Supports W3C traceparent correlation with backend OpenTelemetry spans.
- Provides GenAI agent, model, and tool span examples plus a KQL query.
- MIT-licensed and supports both npm and Loader Script setup.
- The browser connection string is exposed to clients, and Microsoft Entra ID authentication is not supported for browser telemetry.
- Cross-origin distributed tracing requires specific CORS request and response header configuration on the API.
- GenAI messages, tool arguments, and tool results are opt-in sensitive content and require an approved runtime data-handling policy.
- The supplied source does not provide a skill-specific test scenario or test result.
- Current API guidance depends on the `microsoft-docs` MCP and npm version lookup, which may require separate verification in offline environments.
How do you install this skill?
Run npx skills add microsoft/skills in the project and select this skill in the installation wizard; for GitHub Copilot, skills are installed under .github/skills/. Install the application package with npm i --save @microsoft/applicationinsights-web, then add optional plugins only when needed. The source does not document exact installation steps for every other Agent client.
How do you use this skill?
Give the coding Agent a request such as: “Add Application Insights to this TypeScript browser SPA, enable automatic route tracking and W3C distributed tracing, and scrub sensitive URL parameters.” Use @microsoft/applicationinsights-web, call loadAppInsights() once as early as possible, and call trackPageView() for the initial load. For current API patterns, the skill instructs the Agent to search the microsoft-docs MCP and verify the package version with npm view @microsoft/applicationinsights-web version.
How does this skill compare with similar options?
This skill targets browser/web code and React Native. The source explicitly distinguishes it from azure-monitor-opentelemetry-ts, which targets Node.js server applications.