Application Insights Web 监控技能
为浏览器和 React Native 应用接入 Application Insights，实现用户行为、请求、异常与 GenAI 链路监控。
文档明确披露浏览器端连接字符串会以明文发送、禁止复用后端资源，并提供 Cookie、同意管理、采样、敏感 GenAI 内容 opt-in 和查询字符串脱敏建议；但默认示例启用请求/响应头跟踪并直接向外部 Application Insights 发送遥测，缺少统一的用户确认、数据流清单、最小权限和回滚方案，因此扣分。
内容结构清晰，覆盖 npm、Loader、框架、配置、常见陷阱和失败记录模式；但没有针对该技能关键路径的专门测试、版本锁定、API 兼容性验证或异常输入复现证据，部分 SDK/OTel 映射依赖外部当前文档，因此按静态审查限制不超过10分并扣分。
目标明确为浏览器/Web、React Native 的 Application Insights RUM，并区分 Node.js 技能；覆盖多种框架和触发场景，也说明了浏览器限制，但未明确非适用边界、语义触发规则、中文使用支持或中国大陆网络可达性，且 Loader、Azure 端点和外部 MCP 依赖可能受网络环境影响，因此扣分。
具备清晰的渐进式章节、安装说明、依赖表、代码示例、参考文件、常见陷阱、许可证和版本字段；但缺少变更日志、明确维护责任人与更新流程，且“完整参考”仍依赖外部 Microsoft 文档，故未满分。
技能覆盖初始化、自动采集、框架集成、隐私、采样、分布式追踪和 GenAI 查询，理论上可完成核心编码任务；但本次未执行示例或验证输出，代码与 API 的实际兼容性和完整性无法确认，且用户仍需配置 Azure/CORS/同意策略并进行审查，因此达到静态上限7分但不更高。
提供了可审计的源文件、引用的 Microsoft Learn、SDK 和 OTel 资料，以及仓库级 CI/测试信号；但没有该技能专属测试覆盖或可在本次审查中独立复现的执行结果，且未使用证据 URL，故仅给有限分数。
- 不要把浏览器连接字符串或客户端遥测资源当作后端机密；应使用隔离资源并限制权限。
- 示例启用了请求/响应头跟踪，生产环境需审查并关闭可能包含 PII 或凭据的遥测。
- 在发送遥测前实现明确的用户同意、撤回和数据保留策略，尤其是 GenAI 消息、工具参数和结果。
- 部署前验证 SDK 版本、OTel 属性名称、CORS 头、Azure 端点及中国大陆网络可达性；本评估未执行这些验证。
这个 Skill 能做什么，适合哪些场景？
该技能指导 TypeScript 浏览器应用使用 Application Insights JavaScript SDK 进行真实用户监控。它覆盖 npm 和 SDK Loader Script 两种接入方式，以及页面浏览、点击、AJAX/fetch、异常、自定义事件和指标采集。它还说明了 React、React Native、Angular 扩展、遥测初始化器、隐私设置、采样和离线发送。对于浏览器端 AI agent，它提供符合 OpenTelemetry GenAI 语义约定的 agent、模型和工具依赖遥测方案，并支持与后端 trace 关联。
指导安装 @microsoft/applicationinsights-web 及可选插件，配置连接字符串和自动采集选项，调用 trackPageView、trackEvent、trackException、trackTrace、trackMetric 和 trackDependencyData 产生遥测数据；通过遥测初始化器添加应用元数据、过滤事件并清理 URL 秘密；通过 W3C traceparent 和 CORS 配置关联后端链路；使用 GenAI 属性记录 agent、chat 和 tool spans，并提供 KQL 查询示例。
- 前端工程师需要为单页应用自动记录初始页面和路由变化，并避免手动埋点重复计数。
- 产品团队需要采集浏览器中的点击、自定义业务事件、页面性能和 Web Vitals。
- 全栈团队需要把浏览器 fetch/XHR 请求与 OpenTelemetry 后端 spans 关联起来。
- AI 应用开发者需要记录浏览器端 agent、模型调用和工具执行，并在 Application Insights 中查询 token 使用量和延迟。
- 隐私或安全团队要求禁用 Cookie、基于用户同意动态停用遥测，并清理查询字符串中的 token、sig 或 key。
这个 Skill 有哪些优点和局限？
- 覆盖浏览器 RUM、点击分析、异常、依赖、自定义指标和 Web Vitals。
- 提供 React、React Native、Angular、Next.js 和 Vite 相关接入方向。
- 支持 W3C traceparent 与后端 OpenTelemetry 链路关联。
- 包含 GenAI agent、模型和工具 spans 的属性示例及 KQL 查询。
- MIT 许可，且提供 npm 和 Loader Script 两种安装路径。
- 浏览器连接字符串会以明文发送到客户端，不能使用 Microsoft Entra ID 浏览器遥测认证。
- 跨域分布式追踪需要 API 配置允许并暴露指定 CORS 请求头和响应头。
- GenAI 消息、工具参数和结果等敏感内容默认不采集，生产环境使用前需要明确运行时开关和数据处理批准。
- 源材料没有明确提供该技能专属的测试场景或测试结果。
- 当前 API 模式依赖 microsoft-docs MCP 和 npm 版本查询，离线环境下需要自行确认版本与接口。
如何安装这个 Skill？
在项目中运行 npx skills add microsoft/skills，在安装向导中选择该技能；对于 GitHub Copilot，技能会安装到项目的 .github/skills/ 目录。应用依赖可运行 npm i --save @microsoft/applicationinsights-web 安装，可选插件按需安装。源材料未说明如何在其他 Agent 客户端中完成具体安装。
如何使用这个 Skill？
向编码 Agent 提出类似“为这个 TypeScript 浏览器 SPA 接入 Application Insights，启用自动路由和 W3C 分布式追踪，并添加遥测脱敏”的请求。实现时使用 @microsoft/applicationinsights-web，尽早且只调用一次 loadAppInsights()，初始页面调用 trackPageView()；如需当前 API 模式，技能要求搜索 microsoft-docs MCP，并用 npm view @microsoft/applicationinsights-web version 验证包版本。
这个 Skill 与同类方案有什么区别？
该技能面向浏览器/Web 代码和 React Native；源材料明确将其与 azure-monitor-opentelemetry-ts 区分，后者用于 Node.js 服务端应用。