在前端开发中,我们常常需要监控 web 应用的性能和用户访问情况。@microsoft/applicationinsights-web 是一个帮助我们实现这个目标的 npm 包。本文将介绍如何使用该包来监控你的 web 应用。
安装
使用 npm 安装 @microsoft/applicationinsights-web:
--- ------- ------ ----------------------------------
配置
在使用 @microsoft/applicationinsights-web 之前,需要配置相关选项。
- 导入包并创建配置项:
------ - ------------------- - ---- ------------------------------------- ----- ----------- - --- --------------------- ------- - ------------------- -------------------------- - --- ------------------------------
在这里,instrumentationKey 是你在 Azure 上创建的应用程序集中获取的。如果没有创建,请先在 Azure 上创建一个应用程序集,并添加一个新的应用程序密钥,以便获取 instrumentationKey 。
配置项还支持其他一些选项,例如设置是否记录用户信息和设置发送数据前等待的时间。更多信息请参考官方文档。
- 设置应用程序主键 (Application Insights SDK API Key)。
此选项是可选的。默认情况下,将会从查询字符串的 AppInsightsAgent选项中获取 Application Insights SDK API 的 Key。
------ - ------------------- - ---- ------------------------------------- ----- ----------- - --- --------------------- ------- - ------------------- --------------------------- ------- -------------- -- --------- ------------ -------- --- --- ---- ----------------- --------------------- ----------- -------- --- --- - ---- - --- ------------------------------
设置应用程序主键 (Application Insights SDK API Key)时,需要在 URL 的查询字符串中加入一个名为“AppInsightsAgent”的选项以指定值 。例如:
-------- --- ---------- - --------------------------------- -------------- - ------------------------------------------------------------------------------------- -------------------------------------- ---------
- 高级选项 - 设置自定义属性。
在某些情况下,我们需要设置自定义属性来帮助我们更精确地掌握用户访问情况。这是通过 AppInsights.context对象来实现的。
------ - ------------------- - ---- ------------------------------------- ----- ----------- - --- --------------------- ------- - ------------------- -------------------------- - --- ------------------------------ ----------------------------------- - ------ -- -------- --------------------------- - ---------- -- ---- -- ----------------------------- - ------------ -- ---- --
监控应用程序性能
在配置好 @microsoft/applicationinsights-web 后,我们可以开始监控应用程序的性能了。
- 监控页面浏览。
------ - ------------------- - ---- ------------------------------------- ----- ----------- - --- --------------------- ------- - ------------------- -------------------------- - --- ------------------------------ ---------------------------- -- ------
- 监控跟踪事件。
------ - ------------------- - ---- ------------------------------------- ----- ----------- - --- --------------------- ------- - ------------------- -------------------------- - --- ------------------------------ ------------------------ ----- ---------- --- -- ------
- 监控出错情况。
------ - ------------------- - ---- ------------------------------------- ----- ----------- - --- --------------------- ------- - ------------------- -------------------------- - --- ------------------------------ --- - -- --- - ----- ------- - ---------------------------------- -- ------ -
- 监控 Ajax 请求和附加性能数据。
------ - ------------------- - ---- ------------------------------------- ----- ----------- - --- --------------------- ------- - ------------------- -------------------------- - --- ------------------------------ --------------------------- --------- ---------- --- ------- -------- --- ------- ------------- ------ -- -- ---- --
随着以上代码段的执行,自动捕获一些性能数据 (Ajax 请求,JavaScript 故障)。
- 监控页面自定义埋点。
------ - ------------------- - ---- ------------------------------------- ----- ----------- - --- --------------------- ------- - ------------------- -------------------------- - --- ------------------------------ ------------------------------ ------------ ------ ---- -- ---------
总结
本文介绍了如何配置和使用 @microsoft/applicationinsights-web,它可以帮助我们轻松地监测 web 应用的性能和用户访问情况。不仅如此,@microsoft/applicationinsights-web也提供了多种选项,可以让开发人员在需要时更具体地追踪信息,并优化应用程序的性能,从而提供更优秀的用户体验。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/microsoft-applicationinsights-web