# @devbie/web-monitor-sdk 中文文档

规范地址：https://npmcn.com/package/%40devbie/web-monitor-sdk/

版本：1\.6\.0
npm 元数据更新时间：2026-11-10T11:44:43.302Z
中文译文更新时间：2026-11-12T04:48:26.213Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40devbie/web-monitor-sdk
原文对照：https://npmcn.com/package/%40devbie/web-monitor-sdk/?lang=original
项目主页：https://github.com/worldzhy/devbie#readme
源码仓库：https://github.com/worldzhy/devbie

弃用说明：Renamed to @devbie/frontend-monitor-sdk\. Use @devbie/frontend-monitor-sdk@^1\.8\.1\.

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：120 kB，26 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：0 个
- 首次发布：2026-09-27T07:33:48.577Z
- 最新版本发布：2026-11-06T11:44:07.679Z
- 近 30 天下载量：2896（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 17 个）

## 中文简介

浏览器-侧网络监控 SDK:PV,AJAX,资源,JS错误和自定义事件报告. 没有心跳,没有证明逻辑.

## 安装

```sh
npm install @devbie/web-monitor-sdk
```

也可以使用：`pnpm add @devbie/web-monitor-sdk`、`yarn add @devbie/web-monitor-sdk`、`bun add @devbie/web-monitor-sdk`

## README

# @devbie/web-monitor-sdk (英语)

[![npm version](https://img.shields.io/npm/v/@devbie/web-monitor-sdk?style=flat-square)](https://www.npmjs.com/package/@devbie/web-monitor-sdk) [![license](https://img.shields.io/npm/l/@devbie/web-monitor-sdk?style=flat-square)](https://github.com/worldzhy/devbie/blob/dev/LICENSE)

浏览器-侧面网络监控 SDK. 它自动收集页面视图和页面 性能数据, AJAX 调用(均为 `XMLHttpRequest` 财务报告和审定财务报表 `fetch`),资源 加载、 JavaScript 错误和自定义事件, 并将其报告给收藏家 终点 SDK只处理监控——没有心跳和证书 逻辑.

## 特征

-   **页面使用情况** 负载时间、第一输入元数据、屏幕大小、, 裁判员和业绩条目.
-   **AJAX 监测** - 透明文书 `XMLHttpRequest` 财务报告和审定财务报表 `fetch`、记录方法、URL、状态、响应大小、时间和可选性 追踪身份.
-   **资源监测** – 资源负载缓慢而失败通过 `PerformanceObserver` 资源 `error` 事件.
-   **错误监测** —— 说 `window.onerror`, (中文(简体) ), `unhandledrejection`,资源负荷 失败和 `console.error`,带有已解析的堆栈痕迹.
-   **自定义事件** ——以节制批量报告商务活动.
-   **商业错误代码** 插入一个 `errcodeReport` 确定标记 hTTP 200 内部的工商级失败.
-   **匿名身份** ——每个用户,每页,唯一访问者和设备标记 在浏览器中生成.

## 安装

```bash
npm install @devbie/web-monitor-sdk
```

## 快开始

在您的应用程序中尽早初始化 SDK —— 例如 您的根布局或应用程序条目 :

```ts
import init from "@devbie/web-monitor-sdk";

init({
  api: "https://collector.example.com/api/web-monitor/report",
  token: "<report token>",
});
```

这个 `init` 为手动报告调用返回帮助函数 :

```ts
const monitor = init({
  api: "https://collector.example.com/api/web-monitor/report",
  token: "<report token>",
});

monitor.addCustom({
  customName: "checkout",
  customContent: { orderId: "1001", amount: 99 },
});
```

### 与 Next.js 一起使用

少比框架装有现成的登记册包装:

```bash
npx @devbie/fewbie-cli add web-monitor-sdk
```

然后加上脚手架 `<WebMonitor />` 组件到根布局和 配置 `NEXT_PUBLIC_WEB_MONITOR_ENDPOINT` 财务报告和审定财务报表 `NEXT_PUBLIC_WEB_MONITOR_TOKEN`。 。 。 . 在两种环境变量都存在之前,该组件都是不开放的.

## 输入选项

| 选项 | 类型 | 默认 | 需求 | 说明 |
| --- | --- | --- | --- | --- |
| `api` | `string` | —— 说 | 对 | 接收报告有效载荷的收集器端点. |
| `token` | `string` | —— 说 | 对 | 为部署签发了报告符; 收集器将其解决为应用程序分区 . |
| `isPage` | `boolean` | `true` | 没有 | 收集页面视图/页面性能数据. |
| `isAjax` | `boolean` | `true` | 没有 | A. 第XHR和 `fetch` 请求. |
| `isResource` | `boolean` | `true` | 没有 | 收集资源时间和缓慢/失效的资源. |
| `isError` | `boolean` | `true` | 没有 | 收集JS错误,拒绝,资源错误和控制台错误. |
| `filterUrls` | `string[]` | `[]` | 没有 | URL被排除在AJAX/资源收藏之外. 收集器端点( E)`/api/web-monitor/report`)总是自动过滤. |
| `user` | `object` | `{}` | 没有 | 初始用户身份 : `{ uid?, p? }` (单位:千美元)`p` 应预先加密. |
| `isTraceId` | `boolean` | `false` | 没有 | 从AJAX的电话中抓取跟踪ID响应头. |
| `traceIdHeaderName` | `string` | `x-trace-id` | 没有 | 回复页眉名称为何时读取 `isTraceId` 已启用. |
| `customsThrottleMs` | `number` | `1000` | 没有 | 用于批量自定义事件的喉咙窗口,以毫秒为单位. |
| `errcodeReport` | `function` | —— 说 | 没有 | 业务出错解析器,见下文. |

## 返回的 API

`init()` 返回带有下列成员的对象:

### `addError(error)`

手动按下脚本错误以立即报告 :

```ts
monitor.addError({
  msg: "Something went wrong",
  line: 42,
  col: 10,
  resourceUrl: "https://example.com/app.js",
});
```

### `addCustom(event)`

队列自定义事件 。 对象内容被序列化为 JSON; 队列事件为 冲出(并分批出) `customsThrottleMs`数字 :

```ts
monitor.addCustom({
  customName: "button-click",
  customContent: "pay-now",
  customFilter: { page: "checkout" }, // optional, must be an object
});
```

### `setConfig(config)`

初始化后更新用户身份 。 何时 `p` 提供它 存储前加密 :

```ts
monitor.setConfig({ uid: "10086", p: "plain-text-secret" });
```

## 商业错误报告

HTTP 200的响应仍然可以代表企业的失败. 提供 `errcodeReport` 确定检查解析的响应数据并决定是否 报告出错 :

```ts
init({
  api: "https://collector.example.com/api/web-monitor/report",
  token: "<report token>",
  errcodeReport: (responseData) => {
    return {
      isReport: responseData.code !== 0,
      errMsg: responseData.message,
      code: responseData.code,
    };
  },
});
```

## 报告类型和运输

报告有以下一种类型:

| 类型 | 内容 |
| --- | --- |
| `PagePerf` | 页面性能,资源和导航出错. |
| `AjaxPerf` | AJAX 活动和页面报告之间的错误. |
| `Error` | 立即捕获出错( 已宣告) . |
| `Custom` | 断开自定义事件 . |
| `Unload` | 最终报告在页面卸载. |
| `SdkError` | SDK本身内部出错. |

有效载荷带有 `Content-Type: text/plain` 通过 `fetch` (监测) 请求从未重新提出) `Unload` 报表使用 `navigator.sendBeacon` 当可用时。 如果收藏家无法接触到, 报告暂停,以避免请求风暴.

## 全球接入

对于无法直接导入模块的集成, 默认 初始化器也在浏览器上被曝光为 `window._frontendMonitor`。 。 。 .

## 相关软件包

-   [`@devbie/heartbeat-sdk`](https://www.npmjs.com/package/@devbie/heartbeat-sdk) ——服务器侧安装活性报告.
-   [`@devbie/newbie`](https://www.npmjs.com/package/@devbie/newbie) - 纽比 后端框架运行时间 .
-   [`@devbie/newbie-cli`](https://www.npmjs.com/package/@devbie/newbie-cli) —— 说 Newbie框架命令行工具.
-   [`@devbie/fewbie-cli`](https://www.npmjs.com/package/@devbie/fewbie-cli) —— 说 在 Next.js 工程中安装 Web-Monitor 包装组件.

## 许可证

[麻省理工学院](https://github.com/worldzhy/devbie/blob/dev/LICENSE)

## 常见问题

### @devbie/web-monitor-sdk 是什么？

浏览器-侧网络监控 SDK:PV,AJAX,资源,JS错误和自定义事件报告\. 没有心跳,没有证明逻辑\.注意：该包已被作者标记为弃用——Renamed to @devbie/frontend-monitor-sdk\. Use @devbie/frontend-monitor-sdk@^1\.8\.1\.

### 如何安装 @devbie/web-monitor-sdk？

在项目目录运行 npm install @devbie/web-monitor-sdk，或使用 pnpm add / yarn add / bun add。

### @devbie/web-monitor-sdk 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @devbie/web-monitor-sdk 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @devbie/web-monitor-sdk 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @devbie/web-monitor-sdk 可以商用吗？

@devbie/web-monitor-sdk 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @devbie/web-monitor-sdk 的下载量有多少？

根据 npm 官方下载统计，@devbie/web-monitor-sdk 在 2026/10/12 – 2026/11/10 这 30 天内被下载 2,896 次，日均约 97 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @devbie/web-monitor-sdk 还在维护吗？

最新版本 1\.6\.0 发布于 2026/11/06（5 天前）；至今共发布 17 个版本，其中过去 12 个月发布了 17 个；首次发布于 2026/09/27。作者已将其标记为弃用，新项目建议寻找替代方案。