npm 包 fire-hydrant 使用教程

在前端开发中，我们经常需要进行错误日志记录和分析。而 fire-hydrant 这个 npm 包就是一款专门用于前端错误监控的工具。它可以实时捕获页面中的 JavaScript 错误，并将其记录下来，方便开发者进行调试和分析。本文将为大家介绍 fire-hydrant 的使用方法。

安装

在使用 fire-hydrant 之前，需要先将其安装到我们的项目中。可以使用 npm 或 yarn 进行安装：

npm install fire-hydrant --save

# 或者

yarn add fire-hydrant

使用

初始化

在使用 fire-hydrant 之前，需要先进行初始化。在项目中引入 fire-hydrant 后，可以通过以下代码进行初始化：

import FireHydrant from 'fire-hydrant';

// 初始化 fire-hydrant，并将其挂载到全局 window 对象上
window.fireHydrant = new FireHydrant({
  url: 'https://your.server.address/api',
  appKey: 'your-app-key',
});

在初始化时，我们需要指定以下参数：

• url：错误日志上报的服务器地址
• appKey：项目的 appKey，用于区分不同的项目

监听错误事件

在初始化完成后，fire-hydrant 将会开始捕获页面中的 JavaScript 错误。当捕获到错误时，会触发 error 事件。我们可以通过以下代码来监听错误事件：

-- -------------------- ---- -------
-------------------------------- ------- -- -
  ----- ----- - ------------

  -- -------- ------------ -
  ---------------------------
    -------- --------------
    ------ ------------
  ---
---

当 error 事件触发时，我们可以获取到以下信息：

• event.error.message：错误消息
• event.error.stack：错误堆栈信息

通过将错误信息传入 report() 方法中，fire-hydrant 将会把错误信息上传到服务器进行记录。

配置错误白名单

在某些情况下，某些 JavaScript 错误是我们可以忽略的，例如浏览器插件的 JavaScript 错误等。我们可以通过配置错误白名单，让 fire-hydrant 在接收错误信息前先进行过滤。以下是代码示例：

window.fireHydrant.ignoreErrors = [
  'Cannot read property \'xyz\' of null',   // 忽略某个具体的错误
  /(c|C)ircular (d|D)ependency/,           // 使用正则表达式忽略某类错误
];

可以通过设置 ignoreErrors 属性来配置错误白名单。其值可以是一个字符串数组，包含某些具体的错误信息，也可以是一个正则表达式，用于匹配某类错误信息。

结语

通过使用 fire-hydrant，我们可以方便地进行前端错误日志记录和分析。在日常开发中，

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60950