Agent skill · Backend & API

applicationinsights-web-ts

Instrument browser/web apps with the Application Insights JavaScript SDK (@microsoft/applicationinsights-web). Use for Real User Monitoring (RUM) — page views, clicks, AJAX/fetch dependencies, exceptions, custom events, and browser-side GenAI agent traces correlated to backend...

Nick44,086★ · +407/wk · 1 repos on radarProfile →
claude-codecodexcursorMIT
Install
npx skills add sickn33/agentic-awesome-skills --skill applicationinsights-web-ts --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 1
SKILL.md size: 22 KB
Bundled scripts: none
Path: skills/applicationinsights-web-ts/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 44,414 · +328 this week
Language: Python
Read our review of the source →

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

Review
written from the skill's own SKILL.md · Aug 5, 2026

What it does

Instructs the agent to instrument browser/web applications using the Application Insights JavaScript SDK to enable Real User Monitoring (RUM). It covers page views, AJAX/fetch dependencies, unhandled exceptions, custom events, and GenAI agent traces that correlate to backend telemetry.

How it works

  • It recommends installing and configuring the core SDK @microsoft/applicationinsights-web and optional plugins such as @microsoft/applicationinsights-clickanalytics-js, @microsoft/applicationinsights-react-js, @microsoft/applicationinsights-angularplugin-js, and related packages.
  • The skill specifies creating an ApplicationInsights instance with a config object that includes a connection string, route tracking, correlation, header tracking, distributed tracing mode, and page visit timing options.
  • It shows usage patterns: initialize with new ApplicationInsights({ config: { ... } }), then call loadAppInsights() and trackPageView() accordingly.
  • It provides core APIs for page views, events, exceptions, traces, metrics, and manual dependency tracking, including how to set authenticated user context and how to flush telemetry.
  • It includes telemetry initializers to enrich data, and a dedicated GenAI tracing example that emits GenAI-spanning telemetry following OpenTelemetry conventions, with a pattern for starting and ending nested spans and attaching attributes.
  • It demonstrates how traceparent is attached to outbound requests when distributed tracing is enabled and outlines how to visualize GenAI traces in Kusto queries.

When to use it

Use this skill when instrumenting browser/web apps with the Application Insights JavaScript SDK for Real User Monitoring, including GenAI agent traces that correlate to backend spans.

What it can touch

  • Core package: @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-based configuration values (e.g., import.meta.env.VITE_APPINSIGHTS_CONNECTION_STRING).

Caveats

  • The browser SDK requires a plaintext connection string at init time; Entra ID authentication is not supported for browser telemetry.
  • GenAI traces require opt-in environment settings and careful handling of potentially sensitive telemetry attributes.
  • The provided snippets assume the deployment of the appropriate resource and permissions.
From the SKILL.md

# Application Insights JavaScript SDK (Web) for TypeScript ## When to Use Use this skill when you need instrument browser/web apps with the Application Insights JavaScript SDK (@microsoft/applicationinsights-web). Use for Real User Monitoring (RUM) — page views, clicks, AJAX/fetch dependencies, exceptions, custom events, and browser-side GenAI agent traces correlated to backend... Real User Monitoring (RUM) for browser apps with `@microsoft/applicationinsights-web`. Auto-collects page views, AJAX/fetch dependencies, unhandled exceptions, and (with the Click Analytics plugin) clicks. Supports custom events, metrics, and **GenAI agent traces** that follow OpenTelemetry GenAI semantic conventions and correlate to backend spans via W3C Trace Context. > **Distinct from `azure-monitor-opentelemetry-ts`**, which is for Node.js server apps. This skill is for **browser/web** code (and React Native). ## Before Implementation Search `microsoft-docs` MCP for current API patterns: - Query: "Application Insights JavaScript SDK setup" - Query: "Application Insights JavaScript SDK configuration" - Query: "Application Insights JavaScript framework extensions React Angular" - Verify package version:

What's inside
Steps it walks through
  1. When to Use
  2. Before Implementation
  3. Packages
  4. Installation
  5. Connection String
  6. Quick Start (npm)
  7. Quick Start (SDK Loader Script)
  8. Core Tracking APIs
  9. Telemetry Initializers (enrichment & filtering)
  10. Click Analytics
  11. SPA Route Tracking
  12. Distributed Tracing (correlate to backend)
  13. GenAI Agent Traces (OTel semantic conventions)
  14. Required attribute keys (use the OTel names verbatim)
Commands it runs
npm i --save @microsoft/applicationinsights-web
Optional plugins (install only what you use):
npm i --save @microsoft/applicationinsights-clickanalytics-js
npm i --save @microsoft/applicationinsights-react-js @microsoft/applicationinsights-react-native @microsoft/applicationinsights-angularplugin-js
Vite / CRA / Next.js — expose to client via the public env prefix
More from agentic-awesome-skills
All skills →
leiloeiro-editalAnalise e auditoria de editais de leilao judicial e extrajudicial. Riscos ocultos, clausulas…Otherdiagnosing-bugsDiagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug…Code Review & Qualityfind-complementary-foundersUse when an owner explicitly asks for a cofounder or project partner, or explicitly says they need…AI & Agentslinkedin-content-generatorAI-powered LinkedIn content suite: generate posts, carousels, newsletters, and 30-day calendars…Content & Marketingagent-orchestratorMeta-skill que orquestra todos os agentes do ecossistema. Scan automatico de skills, match por…AI & Agentsseo-fundamentalsCore principles of SEO including E-E-A-T, Core Web Vitals, technical foundations, content quality…Code Review & Quality
About this skill
What does the applicationinsights-web-ts skill do?

Instrument browser/web apps with the Application Insights JavaScript SDK (@microsoft/applicationinsights-web). Use for Real User Monitoring (RUM) — page views, clicks, AJAX/fetch dependencies, exceptions, custom events, and browser-side GenAI agent traces correlated to backend...

How do I install it?

Run `npx skills add sickn33/agentic-awesome-skills --skill applicationinsights-web-ts --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going
All skills →
The full catalog, by category and by tool.
Open Source Radar →
The repositories these skills come from, watched daily.
The people behind them →
Makers and builders across the ecosystem.