[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7A2ZKPCDNAM4SWMJ37ZX03V":3,"skill-same:01M7A2ZKPCDNAM4SWMJ37ZX03V":53},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":30,"commitSha":31,"skillDirectory":32,"forksCount":33,"repositoryHtmlUrl":34,"repositoryHomepageUrl":6,"ownerHtmlUrl":35,"ownerBlogUrl":36,"ownerDescription":37,"updatedAt":38,"install":39,"resources":52},"01M7A2ZKPCDNAM4SWMJ37ZX03V","applicationinsights-web-ts",null,"Instrument browser\u002Fweb apps with the Application Insights JavaScript SDK (@microsoft\u002Fapplicationinsights-web). Use for Real User Monitoring (RUM) — page views, clicks, AJAX\u002Ffetch dependencies, exceptions, custom events, and browser-side GenAI agent traces correlated to backend...","MHassan0000\u002FSkills","MHassan0000","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F224296448?v=4","01M7A14DTC1EZCRN04582533RD","Muhammad Hassan Yousaf","01M7A14DV10KTW8NHQTJPD08X0",1,"MIT","https:\u002F\u002Fgithub.com\u002FMHassan0000\u002FSkills\u002Fblob\u002Fmain\u002FClaude\u002Fantigravity skills\u002Fagentic-awesome-skills\u002Fskills\u002Fapplicationinsights-web-ts\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: applicationinsights-web-ts\ndescription: Instrument browser\u002Fweb apps with the Application Insights JavaScript SDK (@microsoft\u002Fapplicationinsights-web). Use for Real User Monitoring (RUM) — page views, clicks, AJAX\u002Ffetch dependencies, exceptions, custom events, and browser-side GenAI agent traces correlated to backend...\nrisk: critical\nsource: https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\nsource_repo: microsoft\u002Fskills\nsource_type: official\ndate_added: 2026-07-01\nlicense: MIT\nlicense_source: https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Fblob\u002Fmain\u002FLICENSE\n---\n\n# Application Insights JavaScript SDK (Web) for TypeScript\n## When to Use\n\nUse this skill when you need instrument browser\u002Fweb apps with the Application Insights JavaScript SDK (@microsoft\u002Fapplicationinsights-web). Use for Real User Monitoring (RUM) — page views, clicks, AJAX\u002Ffetch dependencies, exceptions, custom events, and browser-side GenAI agent traces correlated to backend...\n\n\nReal User Monitoring (RUM) for browser apps with `@microsoft\u002Fapplicationinsights-web`. Auto-collects page views, AJAX\u002Ffetch 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.\n\n> **Distinct from `azure-monitor-opentelemetry-ts`**, which is for Node.js server apps. This skill is for **browser\u002Fweb** code (and React Native).\n\n## Before Implementation\n\nSearch `microsoft-docs` MCP for current API patterns:\n\n- Query: \"Application Insights JavaScript SDK setup\"\n- Query: \"Application Insights JavaScript SDK configuration\"\n- Query: \"Application Insights JavaScript framework extensions React Angular\"\n- Verify package version: `npm view @microsoft\u002Fapplicationinsights-web version`\n\n## Packages\n\n| Package | Purpose |\n| --- | --- |\n| `@microsoft\u002Fapplicationinsights-web` | Core RUM SDK (page views, AJAX, exceptions). |\n| `@microsoft\u002Fapplicationinsights-clickanalytics-js` | Auto-collect click telemetry. |\n| `@microsoft\u002Fapplicationinsights-react-js` | React plugin (router instrumentation, hooks, HOC, ErrorBoundary). |\n| `@microsoft\u002Fapplicationinsights-react-native` | React Native plugin (native crashes, sessions). |\n| `@microsoft\u002Fapplicationinsights-angularplugin-js` | Angular plugin (router events, ErrorHandler). |\n| `@microsoft\u002Fapplicationinsights-debugplugin-js` | Dev-only telemetry inspector. |\n| `@microsoft\u002Fapplicationinsights-perfmarkmeasure-js` | User Timing (`performance.mark\u002Fmeasure`) integration. |\n\n## Installation\n\n```bash\nnpm i --save @microsoft\u002Fapplicationinsights-web\n# Optional plugins (install only what you use):\nnpm i --save @microsoft\u002Fapplicationinsights-clickanalytics-js\nnpm i --save @microsoft\u002Fapplicationinsights-react-js @microsoft\u002Fapplicationinsights-react-native @microsoft\u002Fapplicationinsights-angularplugin-js\n```\n\nTypings ship with the package — no separate `@types\u002F...` install needed.\n\n## Connection String\n\nThe browser SDK requires a connection string at init time. **It ships in plaintext to clients** — Microsoft Entra ID auth is not supported for browser telemetry. Use a separate App Insights resource with local auth enabled for browser RUM if you need to isolate it from backend telemetry.\n\n```bash\n# Vite \u002F CRA \u002F Next.js — expose to client via the public env prefix\nVITE_APPINSIGHTS_CONNECTION_STRING=\"InstrumentationKey=...;IngestionEndpoint=https:\u002F\u002F...;LiveEndpoint=https:\u002F\u002F...\"\nNEXT_PUBLIC_APPINSIGHTS_CONNECTION_STRING=\"InstrumentationKey=...\"\n```\n\n## Quick Start (npm)\n\n```typescript\nimport { ApplicationInsights } from \"@microsoft\u002Fapplicationinsights-web\";\n\nexport const appInsights = new ApplicationInsights({\n  config: {\n    connectionString: import.meta.env.VITE_APPINSIGHTS_CONNECTION_STRING,\n    enableAutoRouteTracking: true,        \u002F\u002F SPA route changes -> page views\n    enableCorsCorrelation: true,          \u002F\u002F propagate Request-Id \u002F traceparent to cross-origin AJAX\n    enableRequestHeaderTracking: true,\n    enableResponseHeaderTracking: true,\n    distributedTracingMode: 2,            \u002F\u002F DistributedTracingModes.AI_AND_W3C — emit traceparent for backend correlation\n    autoTrackPageVisitTime: true,\n    disableFetchTracking: false,          \u002F\u002F fetch() is auto-instrumented by default\n    excludeRequestFromAutoTrackingPatterns: [\u002Flivemetrics\\.azure\\.com\u002Fi]\n  }\n});\n\nappInsights.loadAppInsights();\nappInsights.trackPageView();\n```\n\nCall `loadAppInsights()` exactly once, as early as possible (before user interactions you want tracked). Then `trackPageView()` for the initial load — when `enableAutoRouteTracking` is on, subsequent route changes are automatic.\n\n## Quick Start (SDK Loader Script)\n\nRecommended when you want auto-updating SDK and zero build pipeline. Paste this as the **first** `\u003Cscript>` in `\u003Chead>`:\n\n```html\n\u003Cscript type=\"text\u002Fjavascript\" src=\"https:\u002F\u002Fjs.monitor.azure.com\u002Fscripts\u002Fb\u002Fai.3.gbl.min.js\" crossorigin=\"anonymous\">\u003C\u002Fscript>\n\u003Cscript type=\"text\u002Fjavascript\">\n  var appInsights = window.appInsights || function (cfg) {\n    \u002F* See: https:\u002F\u002Flearn.microsoft.com\u002Fazure\u002Fazure-monitor\u002Fapp\u002Fjavascript-sdk\n       Use the latest snippet from the Microsoft Learn page above — it includes\n       backup-CDN failover (cr), SDK-load-failure reporting, and the queue shim\n       so calls before SDK ready are not lost. *\u002F\n  }({ src: \"https:\u002F\u002Fjs.monitor.azure.com\u002Fscripts\u002Fb\u002Fai.3.gbl.min.js\",\n      crossOrigin: \"anonymous\",\n      cfg: { connectionString: \"YOUR_CONNECTION_STRING\" } });\n\u003C\u002Fscript>\n```\n\nLoader-only API (queued until SDK loads): `trackEvent`, `trackPageView`, `trackException`, `trackTrace`, `trackDependencyData`, `trackMetric`, `trackPageViewPerformance`, `startTrackPage`, `stopTrackPage`, `startTrackEvent`, `stopTrackEvent`, `addTelemetryInitializer`, `setAuthenticatedUserContext`, `clearAuthenticatedUserContext`, `flush`.\n\n## Core Tracking APIs\n\n```typescript\n\u002F\u002F Page views (SPAs that disable enableAutoRouteTracking)\nappInsights.trackPageView({ name: \"Checkout\", uri: \"\u002Fcheckout\", properties: { cartSize: 3 } });\n\n\u002F\u002F Custom events (user actions, business events)\nappInsights.trackEvent({ name: \"PurchaseCompleted\" }, { orderId: \"ord_123\", amountUsd: 49.95 });\n\n\u002F\u002F Exceptions (caught errors)\ntry {\n  await pay(order);\n} catch (err) {\n  appInsights.trackException({ exception: err as Error, severityLevel: 3, properties: { orderId: order.id } });\n}\n\n\u002F\u002F Traces (logs, severity 0=Verbose, 1=Info, 2=Warning, 3=Error, 4=Critical)\nappInsights.trackTrace({ message: \"Cart hydrated from local storage\", severityLevel: 1 });\n\n\u002F\u002F Custom metrics (numeric)\nappInsights.trackMetric({ name: \"checkout.duration_ms\", average: 1234 });\n\n\u002F\u002F Dependencies (manually-tracked outbound calls — fetch\u002FXHR are auto-tracked)\nappInsights.trackDependencyData({\n  id: crypto.randomUUID(),\n  name: \"GET \u002Fapi\u002Forders\",\n  duration: 87, success: true, responseCode: 200,\n  data: \"https:\u002F\u002Fapi.example.com\u002Fapi\u002Forders\", target: \"api.example.com\", type: \"Fetch\"\n});\n\n\u002F\u002F User identity (set ONCE per authenticated session — values are PII; do not pass emails)\nappInsights.setAuthenticatedUserContext(\"user-id-123\", \"tenant-456\", \u002F*storeInCookie*\u002F true);\nappInsights.clearAuthenticatedUserContext(); \u002F\u002F on logout\n\n\u002F\u002F Force send before unload\nappInsights.flush();\n```\n\n## Telemetry Initializers (enrichment & filtering)\n\nRun for every envelope before send. Return `false` to drop.\n\n```typescript\nimport type { ITelemetryItem } from \"@microsoft\u002Fapplicationinsights-web\";\n\nappInsights.addTelemetryInitializer((item: ITelemetryItem) => {\n  item.tags ??= {};\n  item.tags[\"ai.cloud.role\"] = \"web-shop\";\n  item.tags[\"ai.cloud.roleInstance\"] = window.location.hostname;\n  item.data ??= {};\n  item.data[\"app.version\"] = import.meta.env.VITE_APP_VERSION;\n  item.data[\"app.build\"] = import.meta.env.VITE_BUILD_SHA;\n\n  \u002F\u002F Drop noisy health-check page views\n  if (item.baseType === \"PageviewData\" && item.baseData?.uri?.endsWith(\"\u002Fhealthz\")) return false;\n\n  \u002F\u002F Scrub query-string secrets\n  if (item.baseData?.uri) {\n    item.baseData.uri = item.baseData.uri.replace(\u002F([?&](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\u002Ftoken|sig|key)=)[^&]+\u002Fgi, \"$1REDACTED\");\n  }\n});\n```\n\n## Click Analytics\n\n```typescript\nimport { ClickAnalyticsPlugin } from \"@microsoft\u002Fapplicationinsights-clickanalytics-js\";\n\nconst clickPlugin = new ClickAnalyticsPlugin();\nconst appInsights = new ApplicationInsights({\n  config: {\n    connectionString: import.meta.env.VITE_APPINSIGHTS_CONNECTION_STRING,\n    extensions: [clickPlugin],\n    extensionConfig: {\n      [clickPlugin.identifier]: {\n        autoCapture: true,\n        dataTags: { useDefaultContentNameOrId: true, customDataPrefix: \"data-ai-\" },\n        urlCollectHash: false,\n        behaviorValidator: (b: string) => \u002F^[a-z0-9_]+$\u002F.test(b) ? b : \"\"\n      }\n    }\n  }\n});\nappInsights.loadAppInsights();\n```\n\nMark elements with `data-ai-*` attributes; clicks are emitted as Custom Events with parent-content metadata.\n\n## SPA Route Tracking\n\n- **Built-in:** set `enableAutoRouteTracking: true`. Hooks `history.pushState\u002FreplaceState` and `popstate`.\n- **React Router:** use `@microsoft\u002Fapplicationinsights-react-js` `withAITracking` HOC (see [references\u002Fframework-extensions.md](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\u002Freferences\u002Fframework-extensions.md)).\n- **Manual:** call `appInsights.trackPageView({ name, uri })` in your router's `useEffect` on route change. Disable `enableAutoRouteTracking` to avoid double counting.\n\n## Distributed Tracing (correlate to backend)\n\nSet `distributedTracingMode: 2` (`DistributedTracingModes.AI_AND_W3C`). The SDK adds `traceparent` (and legacy `Request-Id`) to outbound `fetch`\u002F`XHR`. Backends instrumented with **OpenTelemetry** (e.g. `@azure\u002Fmonitor-opentelemetry`) auto-link to the browser's operation_Id.\n\nFor cross-origin calls, also set `enableCorsCorrelation: true` and add the calling origin to the **CORS exposed headers** on the API.\n\n## GenAI Agent Traces (OTel semantic conventions)\n\nWhen the browser invokes an AI agent (function-calling, tool-use, model calls direct from the client), emit App Insights **Dependency** telemetry whose attributes follow the OpenTelemetry **GenAI semantic conventions** so they are queryable alongside backend agent spans in App Insights \u002F Log Analytics.\n\n**Set the opt-in env first** so backend instrumentations agree on the same schema version:\n\n```bash\nOTEL_SEMCONV_STABILITY_OPT_IN=gen_ai_latest_experimental\n```\n\n### Required attribute keys (use the OTel names verbatim)\n\n| Span \u002F op | Required attributes |\n| --- | --- |\n| `invoke_agent {agent.name}` | `gen_ai.operation.name=invoke_agent`, `gen_ai.provider.name`, `gen_ai.agent.name`, `gen_ai.agent.id` (when known) |\n| `create_agent {agent.name}` | `gen_ai.operation.name=create_agent`, `gen_ai.provider.name`, `gen_ai.agent.name`, `gen_ai.request.model` |\n| `chat {model}` | `gen_ai.operation.name=chat`, `gen_ai.provider.name`, `gen_ai.request.model`, `gen_ai.response.model`, `gen_ai.usage.input_tokens`, `gen_ai.usage.output_tokens` |\n| `execute_tool {tool.name}` | `gen_ai.operation.name=execute_tool`, `gen_ai.tool.name`, `gen_ai.tool.type` (`function` \\| `extension` \\| `datastore`), `gen_ai.tool.call.id` |\n\n`gen_ai.provider.name` well-known values: `openai`, `azure.ai.openai`, `azure.ai.inference`, `anthropic`, `aws.bedrock`, `gcp.gemini`, `gcp.vertex_ai`, `cohere`, `mistral_ai`, `groq`, `deepseek`, `perplexity`, `x_ai`, `ibm.watsonx.ai`.\n\n> **Sensitive content opt-in.** `gen_ai.system_instructions`, `gen_ai.input.messages`, `gen_ai.output.messages`, `gen_ai.tool.call.arguments`, `gen_ai.tool.call.result` are **Opt-In** by default. Gate them behind a runtime flag and avoid them in production unless you have approved data handling.\n\n### Pattern: invoke_agent + nested tool\u002Fmodel spans\n\n```typescript\nimport { ApplicationInsights, SeverityLevel } from \"@microsoft\u002Fapplicationinsights-web\";\n\ntype GenAiAttrs = Record\u003Cstring, string | number | boolean | undefined>;\n\nfunction startGenAiSpan(name: string, attrs: GenAiAttrs) {\n  const id = crypto.randomUUID();\n  const start = performance.now();\n  const baseProps: GenAiAttrs = { \"gen_ai.span.id\": id, ...attrs };\n  return {\n    end(success: boolean, extra: GenAiAttrs = {}, error?: Error) {\n      const duration = Math.round(performance.now() - start);\n      const properties = { ...baseProps, ...extra };\n      appInsights.trackDependencyData({\n        id, name, duration, success,\n        responseCode: error ? 500 : 200,\n        type: \"GenAI\",\n        target: String(attrs[\"gen_ai.provider.name\"] ?? \"genai\"),\n        properties: properties as Record\u003Cstring, string>\n      });\n      if (error) {\n        appInsights.trackException({\n          exception: error,\n          severityLevel: SeverityLevel.Error,\n          properties: { ...properties, \"error.type\": error.name } as Record\u003Cstring, string>\n        });\n      }\n    }\n  };\n}\n\n\u002F\u002F Agent invocation\nconst agentSpan = startGenAiSpan(\"invoke_agent ResearchAssistant\", {\n  \"gen_ai.operation.name\": \"invoke_agent\",\n  \"gen_ai.provider.name\": \"azure.ai.openai\",\n  \"gen_ai.agent.name\": \"ResearchAssistant\",\n  \"gen_ai.agent.id\": \"asst_5j66UpCpwteGg4YSxUnt7lPY\",\n  \"gen_ai.request.model\": \"gpt-4o-mini\",\n  \"server.address\": \"myresource.openai.azure.com\"\n});\n\ntry {\n  \u002F\u002F Nested chat completion span\n  const chat = startGenAiSpan(\"chat gpt-4o-mini\", {\n    \"gen_ai.operation.name\": \"chat\",\n    \"gen_ai.provider.name\": \"azure.ai.openai\",\n    \"gen_ai.request.model\": \"gpt-4o-mini\"\n  });\n  const res = await callAzureOpenAi(\u002F* ... *\u002F);\n  chat.end(true, {\n    \"gen_ai.response.model\": res.model,\n    \"gen_ai.response.id\": res.id,\n    \"gen_ai.response.finish_reasons\": JSON.stringify(res.choices.map(c => c.finish_reason)),\n    \"gen_ai.usage.input_tokens\": res.usage.prompt_tokens,\n    \"gen_ai.usage.output_tokens\": res.usage.completion_tokens,\n    \"gen_ai.output.type\": \"text\"\n  });\n\n  \u002F\u002F Nested tool execution span\n  const tool = startGenAiSpan(\"execute_tool getWeather\", {\n    \"gen_ai.operation.name\": \"execute_tool\",\n    \"gen_ai.tool.name\": \"getWeather\",\n    \"gen_ai.tool.type\": \"function\",\n    \"gen_ai.tool.call.id\": \"call_abc123\"\n  });\n  const toolResult = await runGetWeather({ location: \"SF\" });\n  tool.end(true);\n\n  agentSpan.end(true, {\n    \"gen_ai.usage.input_tokens\": res.usage.prompt_tokens,\n    \"gen_ai.usage.output_tokens\": res.usage.completion_tokens\n  });\n} catch (err) {\n  agentSpan.end(false, { \"error.type\": (err as Error).name }, err as Error);\n}\n```\n\nThe browser's `traceparent` is automatically attached to outbound `fetch` (when `distributedTracingMode: 2`), so downstream Azure OpenAI \u002F agent backend spans hang under the same operation_Id in App Insights.\n\nFor the full attribute reference, well-known values, and content-capture guidance, see [references\u002Fagent-traces.md](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\u002Freferences\u002Fagent-traces.md).\n\n### KQL: query GenAI traces in App Insights\n\n```kusto\ndependencies\n| where type == \"GenAI\"\n| extend op   = tostring(customDimensions[\"gen_ai.operation.name\"]),\n         agent = tostring(customDimensions[\"gen_ai.agent.name\"]),\n         model = tostring(customDimensions[\"gen_ai.request.model\"]),\n         tin   = toint(customDimensions[\"gen_ai.usage.input_tokens\"]),\n         tout  = toint(customDimensions[\"gen_ai.usage.output_tokens\"])\n| summarize calls=count(), p95_ms=percentile(duration, 95),\n            avg_in=avg(tin), avg_out=avg(tout) by op, agent, model, bin(timestamp, 5m)\n```\n\n## React (TypeScript)\n\nSee [references\u002Fframework-extensions.md](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\u002Freferences\u002Fframework-extensions.md) for full React, React Native, Angular, Next.js, and Vite recipes.\n\n```typescript\nimport { ApplicationInsights } from \"@microsoft\u002Fapplicationinsights-web\";\nimport { ReactPlugin, withAITracking } from \"@microsoft\u002Fapplicationinsights-react-js\";\nimport { createBrowserHistory } from \"history\";\n\nconst reactPlugin = new ReactPlugin();\nconst browserHistory = createBrowserHistory();\n\nexport const appInsights = new ApplicationInsights({\n  config: {\n    connectionString: import.meta.env.VITE_APPINSIGHTS_CONNECTION_STRING,\n    extensions: [reactPlugin],\n    extensionConfig: { [reactPlugin.identifier]: { history: browserHistory } }\n  }\n});\nappInsights.loadAppInsights();\n\nexport const TrackedCheckout = withAITracking(reactPlugin, Checkout, \"Checkout\");\n```\n\n## React Native\n\n```typescript\nimport { ApplicationInsights } from \"@microsoft\u002Fapplicationinsights-web\";\nimport { ReactNativePlugin } from \"@microsoft\u002Fapplicationinsights-react-native\";\n\nconst rnPlugin = new ReactNativePlugin();\nconst appInsights = new ApplicationInsights({\n  config: {\n    connectionString: process.env.EXPO_PUBLIC_APPINSIGHTS_CONNECTION_STRING,\n    extensions: [rnPlugin],\n    disableFetchTracking: false\n  }\n});\nappInsights.loadAppInsights();\n```\n\n## Performance — Web Vitals\n\nAuto-collected: page-load timings via `PerformanceTiming` \u002F `PerformanceNavigationTiming`. To add Core Web Vitals:\n\n```typescript\nimport { onCLS, onLCP, onINP, type Metric } from \"web-vitals\";\n\nfunction send(m: Metric) {\n  appInsights.trackMetric(\n    { name: `web_vitals.${m.name.toLowerCase()}`, average: m.value },\n    { rating: m.rating, navigationType: m.navigationType, id: m.id }\n  );\n}\nonCLS(send); onLCP(send); onINP(send);\n```\n\n## Cookies & Privacy\n\n```typescript\nnew ApplicationInsights({ config: {\n  connectionString,\n  isCookieUseDisabled: true,         \u002F\u002F hard-disable all cookies\n  cookieCfg: { enabled: true, domain: \".example.com\", path: \"\u002F\", expiry: 365 }\n}});\n```\n\nTo honor consent dynamically:\n\n```typescript\nappInsights.getCookieMgr().setEnabled(userGaveConsent);\nappInsights.config.disableTelemetry = !userGaveConsent;\n```\n\n## Sampling\n\nServer-side ingestion sampling (recommended) is configured on the App Insights resource. SDK-side sampling reduces network use:\n\n```typescript\nnew ApplicationInsights({ config: { connectionString, samplingPercentage: 50 } });\n```\n\nPer-type sampling via telemetry initializer: drop with `return false` based on `item.baseType`.\n\n## Offline \u002F Send-on-Unload\n\nThe SDK uses `sendBeacon` (default `onunloadDisableBeacon: false`) to flush on `pagehide` \u002F `unload`. For SPAs, also call `appInsights.flush()` before destructive transitions (logout, hard reload).\n\n## Common Pitfalls\n\n1. **Do not initialize twice.** Re-importing the module under different bundles produces duplicate page views. Use a single shared module export.\n2. **Initialize before first user input** to avoid losing early clicks\u002Fexceptions.\n3. **Connection string is public** — never reuse the same App Insights resource for backend secrets.\n4. **`enableAutoRouteTracking` + manual `trackPageView`** = duplicates. Pick one.\n5. **CORS distributed tracing** requires the API to allow `Request-Id`, `Request-Context`, `traceparent`, `tracestate` request headers and expose `Request-Context` response header.\n6. **GenAI sensitive content** (`gen_ai.input.messages` etc.) is Opt-In — never log without an explicit runtime flag and approved data handling.\n7. **Agent token usage is on `chat` spans, not `invoke_agent`** — copy aggregated usage to the parent agent span only if you know it.\n8. **React StrictMode** double-invokes effects in dev — guard `loadAppInsights()` with a module-level singleton.\n\n## Bundle Size\n\nThe full web SDK is ~110 KB minified (~36 KB gzipped). For aggressive budgets, use the **Loader Script** path so the SDK loads asynchronously off the critical path, or tree-shake unused plugins.\n\n## Key Types\n\n```typescript\nimport {\n  ApplicationInsights,\n  SeverityLevel,\n  DistributedTracingModes,\n  type IConfiguration,\n  type IConfig,\n  type ITelemetryItem,\n  type ITelemetryPlugin,\n  type ICustomProperties,\n  type IPageViewTelemetry,\n  type IEventTelemetry,\n  type IExceptionTelemetry,\n  type ITraceTelemetry,\n  type IMetricTelemetry,\n  type IDependencyTelemetry\n} from \"@microsoft\u002Fapplicationinsights-web\";\n```\n\n## Best Practices\n\n1. **One singleton instance** exported from a single module.\n2. **Initialize early** in the app entrypoint, before router setup.\n3. **Use telemetry initializers** to attach `app.version`, `tenantId`, and to scrub PII \u002F query-string secrets.\n4. **Set `distributedTracingMode: 2`** and ensure your APIs accept\u002Fexpose W3C trace context headers.\n5. **For GenAI**, follow OTel `gen_ai.*` attribute names verbatim — they are queryable across browser and backend telemetry uniformly.\n6. **Gate sensitive content capture** (`gen_ai.input.messages` \u002F `gen_ai.output.messages`) behind a build-time or runtime opt-in.\n7. **Flush on logout \u002F sensitive navigation** so in-flight telemetry isn't dropped.\n\n## References\n\n- [references\u002Fagent-traces.md](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\u002Freferences\u002Fagent-traces.md) — Full OTel GenAI semconv distilled (agent \u002F model \u002F tool spans, attributes, content capture).\n- [references\u002Fframework-extensions.md](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\u002Freferences\u002Fframework-extensions.md) — React, React Native, Angular, Next.js, Vite recipes.\n- [references\u002Fconfiguration.md](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\u002Freferences\u002Fconfiguration.md) — Full `IConfiguration` reference and tuning guide.\n- Microsoft Learn: \u003Chttps:\u002F\u002Flearn.microsoft.com\u002Fazure\u002Fazure-monitor\u002Fapp\u002Fjavascript-sdk>\n- ApplicationInsights-JS source: \u003Chttps:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FApplicationInsights-JS>\n- OTel GenAI semantic conventions: \u003Chttps:\u002F\u002Fopentelemetry.io\u002Fdocs\u002Fspecs\u002Fsemconv\u002Fgen-ai\u002F>\n\n## Limitations\n\n- Use this skill only when the task clearly matches its upstream source and local project context.\n- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.\n- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.\n","# Application Insights JavaScript SDK (Web) for TypeScript\n## When to Use\n\nUse this skill when you need instrument browser\u002Fweb apps with the Application Insights JavaScript SDK (@microsoft\u002Fapplicationinsights-web). Use for Real User Monitoring (RUM) — page views, clicks, AJAX\u002Ffetch dependencies, exceptions, custom events, and browser-side GenAI agent traces correlated to backend...\n\n\nReal User Monitoring (RUM) for browser apps with `@microsoft\u002Fapplicationinsights-web`. Auto-collects page views, AJAX\u002Ffetch 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.\n\n> **Distinct from `azure-monitor-opentelemetry-ts`**, which is for Node.js server apps. This skill is for **browser\u002Fweb** code (and React Native).\n\n## Before Implementation\n\nSearch `microsoft-docs` MCP for current API patterns:\n\n- Query: \"Application Insights JavaScript SDK setup\"\n- Query: \"Application Insights JavaScript SDK configuration\"\n- Query: \"Application Insights JavaScript framework extensions React Angular\"\n- Verify package version: `npm view @microsoft\u002Fapplicationinsights-web version`\n\n## Packages\n\n| Package | Purpose |\n| --- | --- |\n| `@microsoft\u002Fapplicationinsights-web` | Core RUM SDK (page views, AJAX, exceptions). |\n| `@microsoft\u002Fapplicationinsights-clickanalytics-js` | Auto-collect click telemetry. |\n| `@microsoft\u002Fapplicationinsights-react-js` | React plugin (router instrumentation, hooks, HOC, ErrorBoundary). |\n| `@microsoft\u002Fapplicationinsights-react-native` | React Native plugin (native crashes, sessions). |\n| `@microsoft\u002Fapplicationinsights-angularplugin-js` | Angular plugin (router events, ErrorHandler). |\n| `@microsoft\u002Fapplicationinsights-debugplugin-js` | Dev-only telemetry inspector. |\n| `@microsoft\u002Fapplicationinsights-perfmarkmeasure-js` | User Timing (`performance.mark\u002Fmeasure`) integration. |\n\n## Installation\n\n```bash\nnpm i --save @microsoft\u002Fapplicationinsights-web\n# Optional plugins (install only what you use):\nnpm i --save @microsoft\u002Fapplicationinsights-clickanalytics-js\nnpm i --save @microsoft\u002Fapplicationinsights-react-js @microsoft\u002Fapplicationinsights-react-native @microsoft\u002Fapplicationinsights-angularplugin-js\n```\n\nTypings ship with the package — no separate `@types\u002F...` install needed.\n\n## Connection String\n\nThe browser SDK requires a connection string at init time. **It ships in plaintext to clients** — Microsoft Entra ID auth is not supported for browser telemetry. Use a separate App Insights resource with local auth enabled for browser RUM if you need to isolate it from backend telemetry.\n\n```bash\n# Vite \u002F CRA \u002F Next.js — expose to client via the public env prefix\nVITE_APPINSIGHTS_CONNECTION_STRING=\"InstrumentationKey=...;IngestionEndpoint=https:\u002F\u002F...;LiveEndpoint=https:\u002F\u002F...\"\nNEXT_PUBLIC_APPINSIGHTS_CONNECTION_STRING=\"InstrumentationKey=...\"\n```\n\n## Quick Start (npm)\n\n```typescript\nimport { ApplicationInsights } from \"@microsoft\u002Fapplicationinsights-web\";\n\nexport const appInsights = new ApplicationInsights({\n  config: {\n    connectionString: import.meta.env.VITE_APPINSIGHTS_CONNECTION_STRING,\n    enableAutoRouteTracking: true,        \u002F\u002F SPA route changes -> page views\n    enableCorsCorrelation: true,          \u002F\u002F propagate Request-Id \u002F traceparent to cross-origin AJAX\n    enableRequestHeaderTracking: true,\n    enableResponseHeaderTracking: true,\n    distributedTracingMode: 2,            \u002F\u002F DistributedTracingModes.AI_AND_W3C — emit traceparent for backend correlation\n    autoTrackPageVisitTime: true,\n    disableFetchTracking: false,          \u002F\u002F fetch() is auto-instrumented by default\n    excludeRequestFromAutoTrackingPatterns: [\u002Flivemetrics\\.azure\\.com\u002Fi]\n  }\n});\n\nappInsights.loadAppInsights();\nappInsights.trackPageView();\n```\n\nCall `loadAppInsights()` exactly once, as early as possible (before user interactions you want tracked). Then `trackPageView()` for the initial load — when `enableAutoRouteTracking` is on, subsequent route changes are automatic.\n\n## Quick Start (SDK Loader Script)\n\nRecommended when you want auto-updating SDK and zero build pipeline. Paste this as the **first** `\u003Cscript>` in `\u003Chead>`:\n\n```html\n\u003Cscript type=\"text\u002Fjavascript\" src=\"https:\u002F\u002Fjs.monitor.azure.com\u002Fscripts\u002Fb\u002Fai.3.gbl.min.js\" crossorigin=\"anonymous\">\u003C\u002Fscript>\n\u003Cscript type=\"text\u002Fjavascript\">\n  var appInsights = window.appInsights || function (cfg) {\n    \u002F* See: https:\u002F\u002Flearn.microsoft.com\u002Fazure\u002Fazure-monitor\u002Fapp\u002Fjavascript-sdk\n       Use the latest snippet from the Microsoft Learn page above — it includes\n       backup-CDN failover (cr), SDK-load-failure reporting, and the queue shim\n       so calls before SDK ready are not lost. *\u002F\n  }({ src: \"https:\u002F\u002Fjs.monitor.azure.com\u002Fscripts\u002Fb\u002Fai.3.gbl.min.js\",\n      crossOrigin: \"anonymous\",\n      cfg: { connectionString: \"YOUR_CONNECTION_STRING\" } });\n\u003C\u002Fscript>\n```\n\nLoader-only API (queued until SDK loads): `trackEvent`, `trackPageView`, `trackException`, `trackTrace`, `trackDependencyData`, `trackMetric`, `trackPageViewPerformance`, `startTrackPage`, `stopTrackPage`, `startTrackEvent`, `stopTrackEvent`, `addTelemetryInitializer`, `setAuthenticatedUserContext`, `clearAuthenticatedUserContext`, `flush`.\n\n## Core Tracking APIs\n\n```typescript\n\u002F\u002F Page views (SPAs that disable enableAutoRouteTracking)\nappInsights.trackPageView({ name: \"Checkout\", uri: \"\u002Fcheckout\", properties: { cartSize: 3 } });\n\n\u002F\u002F Custom events (user actions, business events)\nappInsights.trackEvent({ name: \"PurchaseCompleted\" }, { orderId: \"ord_123\", amountUsd: 49.95 });\n\n\u002F\u002F Exceptions (caught errors)\ntry {\n  await pay(order);\n} catch (err) {\n  appInsights.trackException({ exception: err as Error, severityLevel: 3, properties: { orderId: order.id } });\n}\n\n\u002F\u002F Traces (logs, severity 0=Verbose, 1=Info, 2=Warning, 3=Error, 4=Critical)\nappInsights.trackTrace({ message: \"Cart hydrated from local storage\", severityLevel: 1 });\n\n\u002F\u002F Custom metrics (numeric)\nappInsights.trackMetric({ name: \"checkout.duration_ms\", average: 1234 });\n\n\u002F\u002F Dependencies (manually-tracked outbound calls — fetch\u002FXHR are auto-tracked)\nappInsights.trackDependencyData({\n  id: crypto.randomUUID(),\n  name: \"GET \u002Fapi\u002Forders\",\n  duration: 87, success: true, responseCode: 200,\n  data: \"https:\u002F\u002Fapi.example.com\u002Fapi\u002Forders\", target: \"api.example.com\", type: \"Fetch\"\n});\n\n\u002F\u002F User identity (set ONCE per authenticated session — values are PII; do not pass emails)\nappInsights.setAuthenticatedUserContext(\"user-id-123\", \"tenant-456\", \u002F*storeInCookie*\u002F true);\nappInsights.clearAuthenticatedUserContext(); \u002F\u002F on logout\n\n\u002F\u002F Force send before unload\nappInsights.flush();\n```\n\n## Telemetry Initializers (enrichment & filtering)\n\nRun for every envelope before send. Return `false` to drop.\n\n```typescript\nimport type { ITelemetryItem } from \"@microsoft\u002Fapplicationinsights-web\";\n\nappInsights.addTelemetryInitializer((item: ITelemetryItem) => {\n  item.tags ??= {};\n  item.tags[\"ai.cloud.role\"] = \"web-shop\";\n  item.tags[\"ai.cloud.roleInstance\"] = window.location.hostname;\n  item.data ??= {};\n  item.data[\"app.version\"] = import.meta.env.VITE_APP_VERSION;\n  item.data[\"app.build\"] = import.meta.env.VITE_BUILD_SHA;\n\n  \u002F\u002F Drop noisy health-check page views\n  if (item.baseType === \"PageviewData\" && item.baseData?.uri?.endsWith(\"\u002Fhealthz\")) return false;\n\n  \u002F\u002F Scrub query-string secrets\n  if (item.baseData?.uri) {\n    item.baseData.uri = item.baseData.uri.replace(\u002F([?&](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\u002Ftoken|sig|key)=)[^&]+\u002Fgi, \"$1REDACTED\");\n  }\n});\n```\n\n## Click Analytics\n\n```typescript\nimport { ClickAnalyticsPlugin } from \"@microsoft\u002Fapplicationinsights-clickanalytics-js\";\n\nconst clickPlugin = new ClickAnalyticsPlugin();\nconst appInsights = new ApplicationInsights({\n  config: {\n    connectionString: import.meta.env.VITE_APPINSIGHTS_CONNECTION_STRING,\n    extensions: [clickPlugin],\n    extensionConfig: {\n      [clickPlugin.identifier]: {\n        autoCapture: true,\n        dataTags: { useDefaultContentNameOrId: true, customDataPrefix: \"data-ai-\" },\n        urlCollectHash: false,\n        behaviorValidator: (b: string) => \u002F^[a-z0-9_]+$\u002F.test(b) ? b : \"\"\n      }\n    }\n  }\n});\nappInsights.loadAppInsights();\n```\n\nMark elements with `data-ai-*` attributes; clicks are emitted as Custom Events with parent-content metadata.\n\n## SPA Route Tracking\n\n- **Built-in:** set `enableAutoRouteTracking: true`. Hooks `history.pushState\u002FreplaceState` and `popstate`.\n- **React Router:** use `@microsoft\u002Fapplicationinsights-react-js` `withAITracking` HOC (see [references\u002Fframework-extensions.md](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\u002Freferences\u002Fframework-extensions.md)).\n- **Manual:** call `appInsights.trackPageView({ name, uri })` in your router's `useEffect` on route change. Disable `enableAutoRouteTracking` to avoid double counting.\n\n## Distributed Tracing (correlate to backend)\n\nSet `distributedTracingMode: 2` (`DistributedTracingModes.AI_AND_W3C`). The SDK adds `traceparent` (and legacy `Request-Id`) to outbound `fetch`\u002F`XHR`. Backends instrumented with **OpenTelemetry** (e.g. `@azure\u002Fmonitor-opentelemetry`) auto-link to the browser's operation_Id.\n\nFor cross-origin calls, also set `enableCorsCorrelation: true` and add the calling origin to the **CORS exposed headers** on the API.\n\n## GenAI Agent Traces (OTel semantic conventions)\n\nWhen the browser invokes an AI agent (function-calling, tool-use, model calls direct from the client), emit App Insights **Dependency** telemetry whose attributes follow the OpenTelemetry **GenAI semantic conventions** so they are queryable alongside backend agent spans in App Insights \u002F Log Analytics.\n\n**Set the opt-in env first** so backend instrumentations agree on the same schema version:\n\n```bash\nOTEL_SEMCONV_STABILITY_OPT_IN=gen_ai_latest_experimental\n```\n\n### Required attribute keys (use the OTel names verbatim)\n\n| Span \u002F op | Required attributes |\n| --- | --- |\n| `invoke_agent {agent.name}` | `gen_ai.operation.name=invoke_agent`, `gen_ai.provider.name`, `gen_ai.agent.name`, `gen_ai.agent.id` (when known) |\n| `create_agent {agent.name}` | `gen_ai.operation.name=create_agent`, `gen_ai.provider.name`, `gen_ai.agent.name`, `gen_ai.request.model` |\n| `chat {model}` | `gen_ai.operation.name=chat`, `gen_ai.provider.name`, `gen_ai.request.model`, `gen_ai.response.model`, `gen_ai.usage.input_tokens`, `gen_ai.usage.output_tokens` |\n| `execute_tool {tool.name}` | `gen_ai.operation.name=execute_tool`, `gen_ai.tool.name`, `gen_ai.tool.type` (`function` \\| `extension` \\| `datastore`), `gen_ai.tool.call.id` |\n\n`gen_ai.provider.name` well-known values: `openai`, `azure.ai.openai`, `azure.ai.inference`, `anthropic`, `aws.bedrock`, `gcp.gemini`, `gcp.vertex_ai`, `cohere`, `mistral_ai`, `groq`, `deepseek`, `perplexity`, `x_ai`, `ibm.watsonx.ai`.\n\n> **Sensitive content opt-in.** `gen_ai.system_instructions`, `gen_ai.input.messages`, `gen_ai.output.messages`, `gen_ai.tool.call.arguments`, `gen_ai.tool.call.result` are **Opt-In** by default. Gate them behind a runtime flag and avoid them in production unless you have approved data handling.\n\n### Pattern: invoke_agent + nested tool\u002Fmodel spans\n\n```typescript\nimport { ApplicationInsights, SeverityLevel } from \"@microsoft\u002Fapplicationinsights-web\";\n\ntype GenAiAttrs = Record\u003Cstring, string | number | boolean | undefined>;\n\nfunction startGenAiSpan(name: string, attrs: GenAiAttrs) {\n  const id = crypto.randomUUID();\n  const start = performance.now();\n  const baseProps: GenAiAttrs = { \"gen_ai.span.id\": id, ...attrs };\n  return {\n    end(success: boolean, extra: GenAiAttrs = {}, error?: Error) {\n      const duration = Math.round(performance.now() - start);\n      const properties = { ...baseProps, ...extra };\n      appInsights.trackDependencyData({\n        id, name, duration, success,\n        responseCode: error ? 500 : 200,\n        type: \"GenAI\",\n        target: String(attrs[\"gen_ai.provider.name\"] ?? \"genai\"),\n        properties: properties as Record\u003Cstring, string>\n      });\n      if (error) {\n        appInsights.trackException({\n          exception: error,\n          severityLevel: SeverityLevel.Error,\n          properties: { ...properties, \"error.type\": error.name } as Record\u003Cstring, string>\n        });\n      }\n    }\n  };\n}\n\n\u002F\u002F Agent invocation\nconst agentSpan = startGenAiSpan(\"invoke_agent ResearchAssistant\", {\n  \"gen_ai.operation.name\": \"invoke_agent\",\n  \"gen_ai.provider.name\": \"azure.ai.openai\",\n  \"gen_ai.agent.name\": \"ResearchAssistant\",\n  \"gen_ai.agent.id\": \"asst_5j66UpCpwteGg4YSxUnt7lPY\",\n  \"gen_ai.request.model\": \"gpt-4o-mini\",\n  \"server.address\": \"myresource.openai.azure.com\"\n});\n\ntry {\n  \u002F\u002F Nested chat completion span\n  const chat = startGenAiSpan(\"chat gpt-4o-mini\", {\n    \"gen_ai.operation.name\": \"chat\",\n    \"gen_ai.provider.name\": \"azure.ai.openai\",\n    \"gen_ai.request.model\": \"gpt-4o-mini\"\n  });\n  const res = await callAzureOpenAi(\u002F* ... *\u002F);\n  chat.end(true, {\n    \"gen_ai.response.model\": res.model,\n    \"gen_ai.response.id\": res.id,\n    \"gen_ai.response.finish_reasons\": JSON.stringify(res.choices.map(c => c.finish_reason)),\n    \"gen_ai.usage.input_tokens\": res.usage.prompt_tokens,\n    \"gen_ai.usage.output_tokens\": res.usage.completion_tokens,\n    \"gen_ai.output.type\": \"text\"\n  });\n\n  \u002F\u002F Nested tool execution span\n  const tool = startGenAiSpan(\"execute_tool getWeather\", {\n    \"gen_ai.operation.name\": \"execute_tool\",\n    \"gen_ai.tool.name\": \"getWeather\",\n    \"gen_ai.tool.type\": \"function\",\n    \"gen_ai.tool.call.id\": \"call_abc123\"\n  });\n  const toolResult = await runGetWeather({ location: \"SF\" });\n  tool.end(true);\n\n  agentSpan.end(true, {\n    \"gen_ai.usage.input_tokens\": res.usage.prompt_tokens,\n    \"gen_ai.usage.output_tokens\": res.usage.completion_tokens\n  });\n} catch (err) {\n  agentSpan.end(false, { \"error.type\": (err as Error).name }, err as Error);\n}\n```\n\nThe browser's `traceparent` is automatically attached to outbound `fetch` (when `distributedTracingMode: 2`), so downstream Azure OpenAI \u002F agent backend spans hang under the same operation_Id in App Insights.\n\nFor the full attribute reference, well-known values, and content-capture guidance, see [references\u002Fagent-traces.md](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\u002Freferences\u002Fagent-traces.md).\n\n### KQL: query GenAI traces in App Insights\n\n```kusto\ndependencies\n| where type == \"GenAI\"\n| extend op   = tostring(customDimensions[\"gen_ai.operation.name\"]),\n         agent = tostring(customDimensions[\"gen_ai.agent.name\"]),\n         model = tostring(customDimensions[\"gen_ai.request.model\"]),\n         tin   = toint(customDimensions[\"gen_ai.usage.input_tokens\"]),\n         tout  = toint(customDimensions[\"gen_ai.usage.output_tokens\"])\n| summarize calls=count(), p95_ms=percentile(duration, 95),\n            avg_in=avg(tin), avg_out=avg(tout) by op, agent, model, bin(timestamp, 5m)\n```\n\n## React (TypeScript)\n\nSee [references\u002Fframework-extensions.md](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\u002Freferences\u002Fframework-extensions.md) for full React, React Native, Angular, Next.js, and Vite recipes.\n\n```typescript\nimport { ApplicationInsights } from \"@microsoft\u002Fapplicationinsights-web\";\nimport { ReactPlugin, withAITracking } from \"@microsoft\u002Fapplicationinsights-react-js\";\nimport { createBrowserHistory } from \"history\";\n\nconst reactPlugin = new ReactPlugin();\nconst browserHistory = createBrowserHistory();\n\nexport const appInsights = new ApplicationInsights({\n  config: {\n    connectionString: import.meta.env.VITE_APPINSIGHTS_CONNECTION_STRING,\n    extensions: [reactPlugin],\n    extensionConfig: { [reactPlugin.identifier]: { history: browserHistory } }\n  }\n});\nappInsights.loadAppInsights();\n\nexport const TrackedCheckout = withAITracking(reactPlugin, Checkout, \"Checkout\");\n```\n\n## React Native\n\n```typescript\nimport { ApplicationInsights } from \"@microsoft\u002Fapplicationinsights-web\";\nimport { ReactNativePlugin } from \"@microsoft\u002Fapplicationinsights-react-native\";\n\nconst rnPlugin = new ReactNativePlugin();\nconst appInsights = new ApplicationInsights({\n  config: {\n    connectionString: process.env.EXPO_PUBLIC_APPINSIGHTS_CONNECTION_STRING,\n    extensions: [rnPlugin],\n    disableFetchTracking: false\n  }\n});\nappInsights.loadAppInsights();\n```\n\n## Performance — Web Vitals\n\nAuto-collected: page-load timings via `PerformanceTiming` \u002F `PerformanceNavigationTiming`. To add Core Web Vitals:\n\n```typescript\nimport { onCLS, onLCP, onINP, type Metric } from \"web-vitals\";\n\nfunction send(m: Metric) {\n  appInsights.trackMetric(\n    { name: `web_vitals.${m.name.toLowerCase()}`, average: m.value },\n    { rating: m.rating, navigationType: m.navigationType, id: m.id }\n  );\n}\nonCLS(send); onLCP(send); onINP(send);\n```\n\n## Cookies & Privacy\n\n```typescript\nnew ApplicationInsights({ config: {\n  connectionString,\n  isCookieUseDisabled: true,         \u002F\u002F hard-disable all cookies\n  cookieCfg: { enabled: true, domain: \".example.com\", path: \"\u002F\", expiry: 365 }\n}});\n```\n\nTo honor consent dynamically:\n\n```typescript\nappInsights.getCookieMgr().setEnabled(userGaveConsent);\nappInsights.config.disableTelemetry = !userGaveConsent;\n```\n\n## Sampling\n\nServer-side ingestion sampling (recommended) is configured on the App Insights resource. SDK-side sampling reduces network use:\n\n```typescript\nnew ApplicationInsights({ config: { connectionString, samplingPercentage: 50 } });\n```\n\nPer-type sampling via telemetry initializer: drop with `return false` based on `item.baseType`.\n\n## Offline \u002F Send-on-Unload\n\nThe SDK uses `sendBeacon` (default `onunloadDisableBeacon: false`) to flush on `pagehide` \u002F `unload`. For SPAs, also call `appInsights.flush()` before destructive transitions (logout, hard reload).\n\n## Common Pitfalls\n\n1. **Do not initialize twice.** Re-importing the module under different bundles produces duplicate page views. Use a single shared module export.\n2. **Initialize before first user input** to avoid losing early clicks\u002Fexceptions.\n3. **Connection string is public** — never reuse the same App Insights resource for backend secrets.\n4. **`enableAutoRouteTracking` + manual `trackPageView`** = duplicates. Pick one.\n5. **CORS distributed tracing** requires the API to allow `Request-Id`, `Request-Context`, `traceparent`, `tracestate` request headers and expose `Request-Context` response header.\n6. **GenAI sensitive content** (`gen_ai.input.messages` etc.) is Opt-In — never log without an explicit runtime flag and approved data handling.\n7. **Agent token usage is on `chat` spans, not `invoke_agent`** — copy aggregated usage to the parent agent span only if you know it.\n8. **React StrictMode** double-invokes effects in dev — guard `loadAppInsights()` with a module-level singleton.\n\n## Bundle Size\n\nThe full web SDK is ~110 KB minified (~36 KB gzipped). For aggressive budgets, use the **Loader Script** path so the SDK loads asynchronously off the critical path, or tree-shake unused plugins.\n\n## Key Types\n\n```typescript\nimport {\n  ApplicationInsights,\n  SeverityLevel,\n  DistributedTracingModes,\n  type IConfiguration,\n  type IConfig,\n  type ITelemetryItem,\n  type ITelemetryPlugin,\n  type ICustomProperties,\n  type IPageViewTelemetry,\n  type IEventTelemetry,\n  type IExceptionTelemetry,\n  type ITraceTelemetry,\n  type IMetricTelemetry,\n  type IDependencyTelemetry\n} from \"@microsoft\u002Fapplicationinsights-web\";\n```\n\n## Best Practices\n\n1. **One singleton instance** exported from a single module.\n2. **Initialize early** in the app entrypoint, before router setup.\n3. **Use telemetry initializers** to attach `app.version`, `tenantId`, and to scrub PII \u002F query-string secrets.\n4. **Set `distributedTracingMode: 2`** and ensure your APIs accept\u002Fexpose W3C trace context headers.\n5. **For GenAI**, follow OTel `gen_ai.*` attribute names verbatim — they are queryable across browser and backend telemetry uniformly.\n6. **Gate sensitive content capture** (`gen_ai.input.messages` \u002F `gen_ai.output.messages`) behind a build-time or runtime opt-in.\n7. **Flush on logout \u002F sensitive navigation** so in-flight telemetry isn't dropped.\n\n## References\n\n- [references\u002Fagent-traces.md](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\u002Freferences\u002Fagent-traces.md) — Full OTel GenAI semconv distilled (agent \u002F model \u002F tool spans, attributes, content capture).\n- [references\u002Fframework-extensions.md](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\u002Freferences\u002Fframework-extensions.md) — React, React Native, Angular, Next.js, Vite recipes.\n- [references\u002Fconfiguration.md](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts\u002Freferences\u002Fconfiguration.md) — Full `IConfiguration` reference and tuning guide.\n- Microsoft Learn: \u003Chttps:\u002F\u002Flearn.microsoft.com\u002Fazure\u002Fazure-monitor\u002Fapp\u002Fjavascript-sdk>\n- ApplicationInsights-JS source: \u003Chttps:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FApplicationInsights-JS>\n- OTel GenAI semantic conventions: \u003Chttps:\u002F\u002Fopentelemetry.io\u002Fdocs\u002Fspecs\u002Fsemconv\u002Fgen-ai\u002F>\n\n## Limitations\n\n- Use this skill only when the task clearly matches its upstream source and local project context.\n- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.\n- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.\n",{"name":5,"risk":24,"source":25,"license":15,"date_added":26,"description":7,"source_repo":27,"source_type":28,"license_source":29},"critical","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Ftree\u002Fmain\u002F.github\u002Fplugins\u002Fazure-sdk-typescript\u002Fskills\u002Fapplicationinsights-web-ts",1782864000000,"microsoft\u002Fskills","official","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills\u002Fblob\u002Fmain\u002FLICENSE","main","a4404a75dc81d6b7e58c5906b6aaffbcb5e84747","Claude\u002Fantigravity skills\u002Fagentic-awesome-skills\u002Fskills\u002Fapplicationinsights-web-ts",0,"https:\u002F\u002Fgithub.com\u002FMHassan0000\u002FSkills","https:\u002F\u002Fgithub.com\u002FMHassan0000","https:\u002F\u002Fhassanyousaf.vercel.app","Full Stack Developer building web apps, SaaS, AI systems, and automations. Passionate about clean code, UI\u002FUX, backend systems, and turning ideas into products.","2026-08-07 20:42:05",{"source":8,"skillName":5,"commands":40,"prompt":50,"zipAvailable":51},[41,44,47],{"tool":42,"command":43},"npx","npx skills add MHassan0000\u002FSkills --skill applicationinsights-web-ts",{"tool":45,"command":46},"bunx","bunx skills add MHassan0000\u002FSkills --skill applicationinsights-web-ts",{"tool":48,"command":49},"pnpm","pnpm dlx skills add MHassan0000\u002FSkills --skill applicationinsights-web-ts","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FMHassan0000\u002FSkills\u002Fblob\u002Fmain\u002FClaude\u002Fantigravity skills\u002Fagentic-awesome-skills\u002Fskills\u002Fapplicationinsights-web-ts\u002FSKILL.md",true,[],[54,61,68,75,84,92],{"skillNo":55,"name":56,"nameZh":6,"description":57,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":58,"categories":59,"keywords":60,"publishedAt":19},"01M7AGBX58S04DX8DKKME8N311","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002FMHassan0000\u002FSkills\u002Fblob\u002Fmain\u002FClaude\u002Fskills boraztunc github\u002Fvercel-react-best-practices\u002FSKILL.md",[],[],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":65,"categories":66,"keywords":67,"publishedAt":19},"01M7AGBREE890608Z7YDMAKH27","stop-slop","Remove AI writing patterns from prose. Use when drafting, editing, or reviewing text to eliminate predictable AI tells and produce more human-like writing.","https:\u002F\u002Fgithub.com\u002FMHassan0000\u002FSkills\u002Fblob\u002Fmain\u002FClaude\u002Fskills boraztunc github\u002Fstop-slop\u002FSKILL.md",[],[],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":74,"publishedAt":19},"01M7AGAS972A2AN7Q5EW8HEAXK","ogilvy-copywriting","Apply David Ogilvy's advertising principles when writing or reviewing copy, headlines, product descriptions, landing pages, ads, emails, or any persuasive text. Use when the goal is copy that sells, not copy that wins awards. Covers positioning, headlines, promises, brand voice, long-form copy, and visual logic. Source: How to Create Advertising That Sells (1972) + Ogilvy on Advertising.","https:\u002F\u002Fgithub.com\u002FMHassan0000\u002FSkills\u002Fblob\u002Fmain\u002FClaude\u002Fskills boraztunc github\u002Fogilvy\u002FSKILL.md",[],[],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":79,"licenseFileUrl":80,"sourceHtmlUrl":81,"categories":82,"keywords":83,"publishedAt":19},"01M7AGAF12803G5JPVMK79AYJB","frontend-design","Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML\u002FCSS layouts, or when styling\u002Fbeautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FMHassan0000\u002FSkills\u002Fblob\u002Fmain\u002FClaude\u002Fskills boraztunc github\u002Ffrontend-design\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMHassan0000\u002FSkills\u002Fblob\u002Fmain\u002FClaude\u002Fskills boraztunc github\u002Ffrontend-design\u002FSKILL.md",[],[],{"skillNo":85,"name":86,"nameZh":6,"description":87,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":79,"licenseFileUrl":88,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":19},"01M7AG88WWVWCGJY9WA9CH7EY4","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002FMHassan0000\u002FSkills\u002Fblob\u002Fmain\u002FClaude\u002Fobra superpower skills\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMHassan0000\u002FSkills\u002Fblob\u002Fmain\u002FClaude\u002Fobra superpower skills\u002Fwebapp-testing\u002FSKILL.md",[],[],{"skillNo":93,"name":94,"nameZh":6,"description":95,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":79,"licenseFileUrl":96,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":19},"01M7AG7ZTNV7XQCWDQ9674FBYB","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","https:\u002F\u002Fgithub.com\u002FMHassan0000\u002FSkills\u002Fblob\u002Fmain\u002FClaude\u002Fobra superpower skills\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMHassan0000\u002FSkills\u002Fblob\u002Fmain\u002FClaude\u002Fobra superpower skills\u002Fweb-artifacts-builder\u002FSKILL.md",[],[]]