applicationinsights-js 是一个由微软提供的 JavaScript 版本的 Application Insights 客户端 SDK，用于在浏览器中跟踪、收集和分析应用程序的数据。在本篇文章中，我们将会学习如何使用 applicationinsights-js 来监控我们的 web 应用，并探讨如何使用它来优化应用程序的性能与用户体验。
安装
我们可以通过 npm 进行安装：
npm install applicationinsights-js --save
配置
在我们开始使用 applicationinsights-js 之前，我们需要进行一些配置。首先，我们需要在 Application Insights 门户中创建一个新的仪表板以获取一个仪表盘 ID。这一步可以通过访问 Azure 门户 并搜索“Application Insights”来完成。一旦我们创建了仪表板并获得了 ID，我们就可以在我们的应用程序中通过以下方式初始化 applicationinsights-js：
-- -------------------- ---- -------
------ - ------------------- - ---- ------------------------------------
----- ----------- - --- ---------------------
------- -
------------------- ---------------------------
------------------------ ---- -- ----------------
-
--
-----------------------------在上面的代码中，我们在 config 对象中指定了 instrumentationKey，即我们在 Application Insights 门户中为仪表盘获得的仪表盘 ID。另外，如果我们的应用程序是一个单页应用，在 config 对象中将 enableAutoRouteTracking 设置为 true 将会启用自动路由跟踪。
自定义事件和属性
在我们的应用程序中，我们可以使用 applicationinsights-js 提供的方法来记录自定义事件和属性。例如，我们可以使用 trackEvent 方法来记录用户点击某个按钮的事件：
appInsights.trackEvent({ name: 'buttonClicked', properties: { buttonText: 'Continue', page: 'home' } })在上面的代码中，我们使用 trackEvent 方法来追踪 buttonClicked 事件，并传递了一些与该事件相关的属性。在我们的 Application Insights 门户中，我们可以查看这些事件并对其进行分析。
除了自定义事件，我们还可以记录自定义属性。例如，我们可以使用 setAuthenticatedUserContext 方法来记录当前用户的一些属性：
appInsights.setAuthenticatedUserContext('userId', 'email@example.com', true)在上面的代码中，我们通过 setAuthenticatedUserContext 方法来设置用户的上下文，例如用户 ID、电子邮件地址和是否为 VIP 用户等等。这些上下文属性可以帮助我们更深入地了解用户。
监控性能和异常
除了自定义事件和属性，applicationinsights-js 还可以帮助我们监视应用程序的性能和异常。例如，我们可以使用 trackPageView 方法来追踪页面加载的性能：
appInsights.trackPageView({ name: 'pageLoaded', uri: window.location.href })在上面的代码中，我们使用 trackPageView 方法来记录页面的 URI 和加载时间等性能指标。在我们的 Application Insights 门户中，我们可以针对这些数据生成性能报告，并对页面加载速度进行优化。
另外，我们还可以使用 trackException 方法来跟踪应用程序中的异常：
try {
// some code
} catch (error) {
appInsights.trackException({ error })
}在上面的代码中，我们使用了 try-catch 语句来捕获异常，并使用 trackException 方法来将异常信息发送到 Application Insights。在我们的 Application Insights 门户中，我们可以针对这些数据生成异常报告，并帮助开发人员快速修复问题。
总结
在本文中，我们介绍了 npm 包 applicationinsights-js 的使用方法，包括安装、配置和使用。我们学习了如何记录自定义事件和属性，监视应用程序的性能和异常，并为开发人员提供了优化应用程序性能和用户体验的指导。如果您对 applicationinsights-js 感兴趣，请尝试在您的应用程序中集成它，并看看您可以获得的性能和用户体验等方面的启示。（完）
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64112