在现代化的 Web 应用程序中，错误报告是非常重要的。很多时候，我们需要捕获和报告的错误追踪以便更好的了解 LOB(业务逻辑) 或者 UI 层的异常和错误。Bugsnag 是一个流行的错误追踪服务，它能够在发现错误时，及时通知开发者并提供有用的错误捕捉和调试信息。现在，@thinman 团队提供了一个 npm 包，通过它我们可以方便地将 Bugsnag 的错误报告与构建报告结合起来，并获得更全面的构建可视化信息，使得我们能够更好地跟踪、调试和分析我们的 Web 应用 。
在本篇文章中，我们将详细介绍如何使用 @thinman/bugsnag-build-reporter，以及它如何帮助我们更好地追踪和排除错误。
安装
首先，在你要使用的项目中安装 @thinman/bugsnag-build-reporter：
npm install --save-dev @thinman/bugsnag-build-reporter
配置
在使用 @thinman/bugsnag-build-reporter 之前，我们需要先将其配置：
- 在 Bugsnag 上创建一个新项目，并将 API 密钥复制下来。
- 在项目的根目录中，创建一个配置文件
.bugsnagrc：
{
"apiKey": "YOUR_API_KEY"
}这里的 YOUR_API_KEY 就是刚刚在 Bugsnag 上创建项目后得到的 API 密钥。
- 在你的构建脚本中，使用 @thinman/bugsnag-build-reporter：
# ... npm run build npx bugsnag-build-reporter # ...
使用
@thinman/bugsnag-build-reporter 创建了一个可添加到 Build CI (构建持续集成) 流程的中间件。通过它，我们可以收集我们的构建脚本的相关数据并上传到 Bugsnag 上面，从而方便我们跟踪和分析错误报告。
一旦你已经配置好了该中间件，在你的 CI 流程开始时，它将会启动并打印出以下信息：
> bugsnag-build-reporter start 🐞 Thinman Bugsnag Build Reporter 🆙 Starting up... 📝 Collecting build metadata... 📡 Uploading data to Bugsnag... ✅ Build report created successfully! (ID: xxxxxxxx)
在这里，我们可以清楚地看到，该中间件已经成功地收集了我们的应用程序构建信息并将其上传到了 Bugsnag 上。这些信息包括：
- 构建 ID
- 构建时间
- Git commit hash
- Docker 镜像版本
- 环境变量
除了这些，我们还可以添加更多的元数据来更好地定位和理解错误报告。
在 Bugsnag 上，我们现在可以看到构建数据并与错误报告相关联。通过这种方式，我们能够更快地追踪和排除错误，并收集更有用的数据来进一步了解我们的应用程序。
示例代码
下面是一个基础示例代码，演示了如何使用 @thinman/bugsnag-build-reporter ：
{
"scripts": {
"build": "webpack && npx bugsnag-build-reporter"
},
"devDependencies": {
"@thinman/bugsnag-build-reporter": "^1.0.0"
}
}结论
通过使用 @thinman/bugsnag-build-reporter ，我们能够将构建报告与 Bugsnag 的错误报告整合在一起，从而方便我们更好地追踪和排除错误。不仅如此，@thinman/bugsnag-build-reporter 还为我们提供了极为详细和生动的构建信息。通过它，我们可以更好地了解我们的应用程序。如果您正在寻找一个优秀且高效的错误报告和追踪服务，那么 Bugsnag 一定是您不能错过的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668ecd9381d61a3540c9d