在前端开发中，我们常常需要监控 web 应用的性能和用户访问情况。@microsoft/applicationinsights-web 是一个帮助我们实现这个目标的 npm 包。本文将介绍如何使用该包来监控你的 web 应用。
安装
使用 npm 安装 @microsoft/applicationinsights-web：
npm install --save @microsoft/applicationinsights-web
配置
在使用 @microsoft/applicationinsights-web 之前，需要配置相关选项。
- 导入包并创建配置项：
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
const appInsights = new ApplicationInsights({
config: {
instrumentationKey: 'YOUR_INSTRUMENTATION_KEY'
}
});
appInsights.loadAppInsights();在这里，instrumentationKey 是你在 Azure 上创建的应用程序集中获取的。如果没有创建，请先在 Azure 上创建一个应用程序集，并添加一个新的应用程序密钥，以便获取 instrumentationKey 。
配置项还支持其他一些选项，例如设置是否记录用户信息和设置发送数据前等待的时间。更多信息请参考官方文档。
- 设置应用程序主键 (Application Insights SDK API Key)。
此选项是可选的。默认情况下，将会从查询字符串的 AppInsightsAgent选项中获取 Application Insights SDK API 的 Key。
-- -------------------- ---- -------
------ - ------------------- - ---- -------------------------------------
----- ----------- - --- ---------------------
------- -
------------------- ---------------------------
------- -------------- -- --------- ------------ -------- --- --- ----
----------------- --------------------- ----------- -------- --- --- - ----
-
---
------------------------------设置应用程序主键 (Application Insights SDK API Key)时，需要在 URL 的查询字符串中加入一个名为“AppInsightsAgent”的选项以指定值 。例如：
<script>
var scriptElem = document.createElement('script');
scriptElem.src = 'https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js?AppInsightsAgent=YOUR-API-KEY';
document.head.appendChild(scriptElem);
</script>- 高级选项 - 设置自定义属性。
在某些情况下，我们需要设置自定义属性来帮助我们更精确地掌握用户访问情况。这是通过 AppInsights.context对象来实现的。
-- -------------------- ---- -------
------ - ------------------- - ---- -------------------------------------
----- ----------- - --- ---------------------
------- -
------------------- --------------------------
-
---
------------------------------
----------------------------------- - ------ -- --------
--------------------------- - ---------- -- ---- --
----------------------------- - ------------ -- ---- --监控应用程序性能
在配置好 @microsoft/applicationinsights-web 后，我们可以开始监控应用程序的性能了。
- 监控页面浏览。
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
const appInsights = new ApplicationInsights({
config: {
instrumentationKey: 'YOUR_INSTRUMENTATION_KEY'
}
});
appInsights.loadAppInsights();
appInsights.trackPageView(); // 监控页面浏览 - 监控跟踪事件。
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
const appInsights = new ApplicationInsights({
config: {
instrumentationKey: 'YOUR_INSTRUMENTATION_KEY'
}
});
appInsights.loadAppInsights();
appInsights.trackEvent({ name: 'MY_EVENT' }); // 监控跟踪事件- 监控出错情况。
-- -------------------- ---- -------
------ - ------------------- - ---- -------------------------------------
----- ----------- - --- ---------------------
------- -
------------------- --------------------------
-
---
------------------------------
--- -
-- ---
- ----- ------- -
---------------------------------- -- ------
-- 监控 Ajax 请求和附加性能数据。
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
const appInsights = new ApplicationInsights({
config: {
instrumentationKey: 'YOUR_INSTRUMENTATION_KEY'
}
});
appInsights.loadAppInsights();
appInsights.trackAjax({url: 'MY_URL', startTime: new Date(), endTime: new Date(), responseCode: 200}); // 监控 Ajax 请求随着以上代码段的执行，自动捕获一些性能数据 (Ajax 请求，JavaScript 故障)。
- 监控页面自定义埋点。
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
const appInsights = new ApplicationInsights({
config: {
instrumentationKey: 'YOUR_INSTRUMENTATION_KEY'
}
});
appInsights.loadAppInsights();
appInsights.trackMetric({name: 'MY_METRIC', value: 1}); // 监控页面自定义埋点总结
本文介绍了如何配置和使用 @microsoft/applicationinsights-web，它可以帮助我们轻松地监测 web 应用的性能和用户访问情况。不仅如此，@microsoft/applicationinsights-web也提供了多种选项，可以让开发人员在需要时更具体地追踪信息，并优化应用程序的性能，从而提供更优秀的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/microsoft-applicationinsights-web