npm 包 @bugsnag/js 使用教程-JavaScript中文网-JavaScript教程资源分享门户

本文将介绍如何使用 npm 包 @bugsnag/js 进行前端应用的错误监控和异常处理，让开发者能够更好地跟踪应用的健康状况，及时发现并解决问题。

什么是 @bugsnag/js

@bugsnag/js 是一个支持 JavaScript 和 TypeScript 的前端错误监控库，它可以监控应用的运行状况，自动收集错误信息，并提供针对性的解决方案。它可以用于任何前端框架或库，包括 React、Vue、Angular 等等。

安装

使用 npm 安装 @bugsnag/js：

npm install --save @bugsnag/js

使用

步骤一：初始化客户端

在入口文件中（通常是 index.js 或 app.js）初始化客户端：

import bugsnag from '@bugsnag/js'

bugsnag.start({
  apiKey: 'YOUR_API_KEY_HERE',
  // 其它配置项
})

其中 YOUR_API_KEY_HERE 是你在 Bugsnag 注册账号后获取到的 API Key。

步骤二：捕获异常

@bugsnag/js 可以自动捕获 JavaScript 异常，也可以通过手动记录告警来追踪异常信息。手动记录告警的方式是，使用 bugsnag.notify() 方法，在你需要捕获异常的地方调用它：

try {
  // 可能抛出异常的代码
} catch (error) {
  bugsnag.notify(error)
}

这样当出现异常时，就会自动记录告警信息并上传到 Bugsnag 智能平台，方便快速定位问题。

步骤三：自定义告警信息

默认情况下 @bugsnag/js 会自动记录异常的堆栈信息和文件名、行号等相关信息，但如果需要自定义告警信息，可以通过以下方式实现：

try {
  // 可能抛出异常的代码
} catch (error) {
  bugsnag.notify(error, (event) => {
    event.addMetadata('user', { username: 'John Doe' })
    event.addMetadata('custom', { level: 'error' })
  })
}

上述示例在记录异常信息的同时，添加了用户信息和自定义信息，以方便快速定位问题。

高级配置

环境配置

@bugsnag/js 还支持多种环境配置，可以通过以下配置项实现：

bugsnag.start({
  apiKey: 'YOUR_API_KEY_HERE',
  appType: 'web',
  releaseStage: 'production',
  appVersion: '1.0.0'
})

其中 appType 可选类型有 'web'、'node' 或 'react-native'；releaseStage 可以设置为 'development'、'staging' 或 'production'；appVersion 是你应用的版本号。

过滤敏感信息

如果你的应用处理了用户的敏感信息，我们推荐你在上传告警信息时将它们过滤掉，以避免信息泄露的风险。你可以添加一个屏蔽字段列表，在上传异常信息时让 @bugsnag/js 自动过滤它们。

bugsnag.start({
  apiKey: 'YOUR_API_KEY_HERE',
  filters: ['password', 'credit_card_number']
})

发生错误时通知的人员

通过 bugsnag.start 的 onError 属性，可以配置一个发生错误时需要通知的人员。当出现错误时，@bugsnag/js 会自动找到给定邮箱的人员并通知他们。

bugsnag.start({
  apiKey: 'YOUR_API_KEY_HERE',
  onError: (event) => {
    bugsnag.notify(event.error, (event) => {
      event.addMetadata('contact', { email: 'admin@example.com' })
    })
  }
})

总结

@bugsnag/js 是一个功能强大的前端错误监控库，可以帮助我们实现对应用的全面监控以及异常处理。其使用非常简单，在接入完成后，开发者可以集中精力关注业务本身，而不用担心因为一些难以追踪的问题而耽误工作。我们希望本文能够帮助到你学习和使用这个库。

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