前言
在前端日常开发中，我们经常需要对网站的性能、用户体验等方面进行监控和分析。而 Application Insights 是一个集日志、性能跟踪、指标监控、用户分析为一体的工具，为前端开发者提供了很好的服务。在使用 Application Insights 的过程中，我们往往需要使用一些 TypeScript 的类型定义文件，@types/applicationinsights-js 就是其中之一。
在本文中，我们将介绍如何使用 npm 包 @types/applicationinsights-js，从而优化我们的代码开发和应用性能监控。
安装
要开始使用 Application Insights，首先需要安装 applicationinsights-js 和 @types/applicationinsights-js npm 包。你可以通过如下命令安装它们：
npm install applicationinsights-js @types/applicationinsights-js --save
集成 Application Insights 到项目中
下面是一个简单的 typescript 例子。
-- -------------------- ---- -------
------ -
--------------------
------------------------
--------------
- ---- -------------------------
------ -------- -------------------- ------- ---------- -------- ---- -
----- ------- - -
------- -
------------------- ----
---------------------- -----
---------------------------- -----
----------------------------- -----
----------------------- -----
----------------------- ---------------------------
------------------------- ------
------------ -----
--------------- -----
-------------------- --------------------------
--
--
-----------------------------------------------------
------------------------------------
-上面的代码初始化了一个 Application Insights 配置，并注册了一个页面视图。我们可以在应用程序启动时调用 initAppInsights 初始化 Application Insights：
initAppInsights("YOUR_INSTRUMENTATION_KEY");在你调用 initAppInsights 前确保已经配置 instrumentationKey
使用 Application Insights 手工记录信息
我们可以通过调用 Application Insights 提供的方法来记录一些信息。例如，我们可以使用 trackException 方法来记录异常。
ApplicationInsights.trackException(new Error("My exception message"));同时我们可以记录其他有趣的事件或自定义信息记事。
ApplicationInsights.trackEvent({ name: "login" });
ApplicationInsights.trackMetric({ name: "latency", value: 100 });
ApplicationInsights.trackTrace({ message: "Starting download request" });通过埋点自动记录信息
除了手工记录事件之外，我们还可以配置 Application Insights 来在运行时自动记录页面浏览、AJAX 请求、错误等信息。这里给出一个教程。步骤同样适用于上面提到的手工记录。
- 配置 Incoming Request 自动记录请求信息
在启用 Application Insights 后，可以使用以下代码来自动记录入站请求的数据：
import { ApplicationInsights } from "applicationinsights-js";
const appInsights = new ApplicationInsights({
instrumentationKey: "<your-instrumentation-key>",
});
appInsights.trackPageView();这会将插页页视图自动记录到默认的应用程序自定义组中。
- 手动激活对 Ajax 请求的自动监听（如果需要）
如果需要自动监视 Ajax 请求的性能，并为其记录自定义属性以及内部跨度等信息，请参考以下示例：
import { ApplicationInsights } from "applicationinsights-js";
const appInsights = new ApplicationInsights({
instrumentationKey: "<your-instrumentation-key>",
});
appInsights.trackAjaxRequests();这会自动监视 Ajax 请求的性能和其他属性。请求性能数据和自定义属性将传递到 Application Insights，可以在下一节中查找的自定义视图中轻松钻取。
- 全局监视未处理的 Promise 异常
如果您使用的是 Promise，您需要监视运行时未加入 Promise 链式处理的 Promise 异常。这可以通过一次性安装来完成，如下所示：
-- -------------------- ---- ------- ------ - ------------------- - ---- ------------------------- ---------------------------------------------------------------------------------------------- -- ----- --- --------------------- ------------------- ----------------------------- ----------- ------------------------------------------------------------- ---------------------
结论
在本文中，我们阐释了如何使用 npm 包 @types/applicationinsights-js。学习如何配置应用程序跟踪，记录错误和测量性能指标，然后觉察如何通过代码和客户端库将这些指标发送到 Azure Application Insights。我们也学习了如何使用单个 npm 包 @types/applicationinsights-js 让应用更加智能，以便你可以更好地实现用户体验监视。这种对工具的掌握不仅提供了深刻的见解，还为我们提供了原则和实用性的指南，帮助前端开发者更好地开发维护他们的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/types-applicationinsights-js