在前端应用中，对于性能监测和错误追踪等任务，很多开发者希望能够通过工具自动化完成。而 Microsoft 推出的应用性能监测工具 Application Insights，就是一个非常不错的选择。在前端应用中，我们可以使用 npm 包 next-applicationinsights 来接入该工具，以便更好地进行前端性能监测和错误追踪。
什么是 Application Insights？
Application Insights 是一款由 Microsoft 提供的应用性能监测工具，免费版和付费版都有提供，基于多种因素进行监测，包括：
- 请求量、响应时间和吞吐量
- 页面加载、渲染和资源加载 times
- 可用、错误和发生异常次数
除此之外，Application Insights 还提供了日志系统、性能测试、容器（Docker）支持等很多实用功能。
next-applicationinsights 使用教程
在前端应用中接入 Application Insights，可以使用 npm 包 next-applicationinsights，使后端发送的请求和前端的异步请求都被监测到。下面是使用该包的详细步骤：
步骤 1：安装 npm 包
首先需要使用 npm 安装 next-applicationinsights 包。
npm install --save next-applicationinsights
步骤 2：创建 App Insights 实例
这一步是指创建一个 Application Insights 实例。在 Microsoft Azure 控制台中，可以通过选择“新建资源”并搜索“Application Insights”来创建实例。
创建完成实例后，会获取到一段字符串，就是应用程序 ID，需要记录下来。
步骤 3：使用实例 ID 初始化 next-applicationinsights 包
在前端代码中，需要使用该实例 ID 来初始化 next-applicationinsights 包。代码如下：
-- -------------------- ---- -------
------ - -------------- - ---- ---------------------------
------ - ------------------- - ---- -------------------------------------
--- -- - --- ---------------------
------- -
------------------- --------------------------------
------------------------ -----
--
---
---------------------
------ ------- -------------------步骤 4：在 next.js 应用中使用 withAITracking
使用上面的代码后，需要在 next.js 应用的页面组件中使用 withAITracking 高阶组件。这个组件可以自动监测每个页面的性能和错误信息。
例如，可以在 pages 文件夹下的 index.js 文件中使用 withAITracking 包裹 HomePage 组件：
import withAITracking from "../lib/withAITracking";
function HomePage() {
// ...
}
export default withAITracking(HomePage);步骤 5：发送自定义跟踪事件
在前端代码中，我们可以通过下面的方式发送自定义跟踪事件：
import { trackEvent } from "next-applicationinsights";
trackEvent({ name: "Video played", properties: { duration: 180 } });以上的代码将会在后端记录下一个自定义事件“Video played”。
步骤 6：查看一般跟踪事件和自定义跟踪事件
使用以上的代码后，可以在 Kusto 查询语言（KQL）中找到发送的自定义事件的信息。例如，可以使用下面的 KQL 查询，查看发送的“Video played”事件：
traces | where message == "Video played"
示例代码
下面是一个为 next.js 页面组件自动发送“pageView”自定义事件的示例代码：
-- -------------------- ---- -------
------ - -------------- - ---- ---------------------------
------ - ------------------- - ---- -------------------------------------
--- -- - --- ---------------------
------- -
------------------- --------------------------------
------------------------ -----
--
---
---------------------
------ ------- -------------------
------ -------- ------------------------ ---------- -
-- ------- ------ --- ------------ -
----- - ---- - - ----------
----- - ------- ---- - - ----------------
----- --- - ------------------------------------------------------
-------------------------------------
-----
---- ----
---
-
-以上代码使用代码追踪 next.js 页面组件，当一个页面组件被调用时，会自动发送一个“pageView”自定义事件。当我们需要查看特定页面的性能时，可以很容易地找到对应的数据。
总结
next-applicationinsights 是一个非常好用的 npm 包，可以帮助我们快速接入 Microsoft Application Insights 工具，来监测前端应用的性能和错误信息。以上的教程可以帮助您快速上手该技术，加强您的前端监测工作，提升您的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735a890c4f7277583e7f