Monitor SDK

chengyi-frondend 轻量级前端监控SDK，即将迭代定位具体JS错误位置。

功能特性

• 数据上报: 优先使用 navigator.sendBeacon 进行可靠的数据上报，是一种在页面卸载或关闭时可靠发送数据的方法。
• JavaScript 错误监控: 捕获未捕获的 JavaScript 错误 (window.onerror)。
• Promise 异常监控: 捕获未处理的 Promise 拒绝 (window.onunhandledrejection)。
• 网络错误监控: 拦截并监控 XMLHttpRequest 错误和 fetch API 错误。
• 资源加载错误监控: 捕获资源加载失败的错误。

安装

pnpm i chengyi-frondend-monitor-sdk

使用方法

在你的应用入口文件（例如 main.js 或 App.tsx）中初始化 SDK。

import { initErrorMonitor } from 'chengyi-frondend-monitor-sdk';

initErrorMonitor({
  reportUrl: 'https://', // 你的错误上报接口地址
  projectName: 'oms', // 项目名称
  environment: 'production',
});

配置项

initErrorMonitor 函数接受一个配置对象，包含以下属性：

| 属性名 | 类型 | 说明 | | ------------- | -------- | ------------------------------------------------------------ | | reportUrl | string | 必填。错误数据将通过 POST 请求发送到的 URL 地址。 | | projectName | string | 必填。用于标识错误来源的项目名称。 | | environment | string | 必填。当前运行环境（例如 'production', 'development'）。 |

请求项

请求体示例

• userId (可选)：用户 ID，用于关联用户相关错误。
• errorType：错误类型，例如 'JavaScript Error'、'Unhandled Error' 等。
• message：错误描述信息。
• stack (可选)：错误的调用栈信息。
• source：错误发生的资源 URL。
• projectName：项目名称。
• environment：当前运行环境。
• userAgent：用户代理字符串。
• resource：错误发生的资源 URL。
• createTime：错误发生的时间YYYY-MM-DD HH:mm:ss。

| 属性名 | 类型 | 说明 | | ------------- | -------- | ------------------------------------------------------------ | | userId | string | 可选。用户 ID，用于关联错误数据到具体用户。 | | errorType | number | 可选。错误类型，例如 ErrorType.JavaScriptError, ErrorType.UnhandledError, ErrorType.NetworkError, ErrorType.ResourceError, ErrorType.VueError。 | | message | string | 可选。错误描述信息。 | | stack | string | 可选。错误的调用栈信息。 | | source | string | 可选。错误发生的文件路径或 URL。 | | projectName | string | 可选。项目名称，用于标识错误来源。 | | environment | string | 可选。运行环境，例如 'production', 'development'。 | | userAgent | string | 可选。用户代理字符串，用于标识客户端浏览器信息。 | | resource | string | 可选。错误发生的资源 URL。 | | createTime | string | 可选。错误发生的时间YYYY-MM-DD HH:mm:ss。 |

后端服务

用于接收前端上报的错误数据, 定位具体错误位置。

本地开发

1. 克隆仓库

   git clone http://git.chengyieco.com/yangli/chengyi-frondend-monitor-sdk.git
   cd chengyi-frondend-monitor-sdk

2. 安装依赖

   npm install

3. 运行开发服务器

   npm run dev

4. 构建生产版本

   npm run build

5. 运行演示 Demo 启动本地服务器以测试 SDK 功能。

   npm run demo

   然后在浏览器中打开 http://localhost:3000（或控制台显示的端口）查看演示。

许可证

MIT