简介
@bugsnag/plugin-network-breadcrumbs 是一个用于跟踪应用程序网络请求和响应的插件。它可以用于 Bugsnag 前端错误监控系统，帮助开发者诊断网络问题，有效减少线上错误率。
该插件会记录 HTTP 请求和响应的详细信息，如请求 URL、HTTP 方法、请求头信息、响应状态码等，并作为集成 bugsnag-js 客户端上报的一部分。
安装
使用 npm 安装 @bugsnag/plugin-network-breadcrumbs:
npm install @bugsnag/plugin-network-breadcrumbs
使用
在使用本插件前，请确保已经安装了 bugsnag-js 客户端。本插件需要在 bugsnag-js 客户端中才能正确使用。
import { Client } from '@bugsnag/js'
import { NetworkBreadcrumbsPlugin } from '@bugsnag/plugin-network-breadcrumbs'
const bugsnagClient = new Client({
apiKey: 'YOUR_API_KEY',
plugins: [new NetworkBreadcrumbsPlugin()]
})配置选项
NetworkBreadcrumbsPlugin 接受以下可选配置选项：
metaData- 附加记录到 breadcrumb 的元数据对象。比如下面的示例：
-- -------------------- ---- -------
------ - ------ - ---- -------------
------ - ------------------------ - ---- -------------------------------------
----- ------ - --- --------------------------
--------- -
------------- ------------
-
--
----- ------------- - --- --------
------- ---------------
-------- --------
--在 bugsnag 后台，可以看到如下的附加数据：
{
"message": "XMLHttpRequest GET https://jsonplaceholder.typicode.com/posts",
"metaData": {
"myCustomData": "some-value"
},
"timestamp": "2022-05-02T09:46:43.980Z",
"type": "navigation"
}示例代码
下面是一个使用 NetworkBreadcrumbsPlugin 的示例代码：
-- -------------------- ---- ------- ------ - ------ - ---- ------------- ------ - ------------------------ - ---- ------------------------------------- ----- ------ - --- -------------------------- ----- ------------- - --- -------- ------- --------------- -------- -------- -- --------------------------------------------------- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------------
该示例中，当网络请求出现错误时，通过 bugsnagClient.notify(error) 上报 bugsnag。如果不加处理，网络请求出现错误时，错误信息只会显示在控制台，很难定位问题所在。上报 bugsnag 后，可以在 bugsnag 后台清楚地看到网络请求的错误信息，为后续排查问题提供有效参考。
结论
@bugsnag/plugin-network-breadcrumbs 是一个非常有用的前端监控工具，可以帮助开发者更好地诊断线上错误。但是，该插件只能记录 HTTP 请求和响应信息，不支持 WebSocket 等其他协议。如果您需要同时监控其他协议，建议使用其他符合你的要求的插件。
同时，使用该插件时，需要注意不要带来过多的性能开销，超时请求等异常情况也会影响业务。建议合理控制请求的数量和方式，确保网络监控不影响正常业务流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6d91eea9b7065299ccb9a7