示例

功能特性

- [x] 错误监控，包括 JS 错误、未处理的 Promise 异常、HTTP 错误和资源加载错误
- [x] 错误采样，支持错误收集事件发送优化
- [x] 页面性能监控
- [x] 用户行为监控，包括控制台操作、用户点击事件
- [x] 集成 rrweb
- [x] 监控单页应用路由变化
- [x] 支持通过配置自动上报错误事件

开发

``pnpm run watch // 监听 ts 文件变化并通过 rollup 编译 pnpm run server // 启动 nodejs 测试服务器`

然后访问 localhost:3000 进行测试

`构建`

`pnpm run build`

`测试`

`pnpm run test`

`安装`

`CDN 引入`


TODO
NPM 安装

`pnpm i @shencom/monitor-web -S`

`使用方法`

`最简配置`

`js import { Monitor } from "@shencom/monitor-web"; const monitor = Monitor.init(); / 监听单个事件 / monitor.on([event], (emitData) => { // 执行上报 // ... }); / 或通过数组监听多个事件，例如：只监听错误事件 / monitor.on( ["jsError", "unhandleRejection", "resourceError", "vuejsError", "reqError"], (eventName, emitData) => { // 执行上报 // ... } ); / 或监听所有事件（不推荐） / monitor.on("event", (eventName, emitData) => { // 执行上报 // ... });`

`完整配置`

`typescript // 默认完整配置选项 export const defaultTrackerOptions = { env: "dev", // 自动上报配置，仅对错误事件生效（jsError、unHandleRejection、resourceError、reqError、vuejsError） report: { imgUrl: "", // 上报地址，设置正确的 imgUrl 开启自动上报 sendBeaconUrl: "", // 上报地址，设置正确的 sendBeaconUrl 开启 sendBeacon 上报 contentType: "application/json", // 请求头 Content-Type beforeSend: (data) => data // 请求发送前处理数据，支持修饰或返回对象覆盖 }, // 处理额外数据 handleExtraData: {}, data: {}, // 错误事件配置 error: { watch: true, // 是否监听所有错误 random: 1, // 采样率，0 到 1 之间，1 表示发送所有错误 repeat: 5, // 超过 5 次后不再发送相同错误。注意不要设置过大，因为如果上报处理器出错可能会导致 js 死循环 delay: 1000 // 延迟 1000ms 后发送事件 }, performance: false, // 是否收集性能数据 http: { fetch: true, // 是否监听 fetch 接口请求 ajax: true, // 是否监听 ajax 请求 ignoreRules: [] // 匹配规则的请求 URL 将不会触发事件。支持字符串和正则表达式 }, behavior: { watch: false, // 是否监听用户行为 console: [ConsoleType.error], // 监听的控制台类型 click: true, // 设为 true 将监听所有 DOM 点击事件 queueLimit: 20 // 行为队列限制为 20 }, /** * rrweb 使用 mutation observer API，兼容性参见： * https://caniuse.com/mutationobserver */ rrweb: { watch: false, // 是否监听 rrweb 事件 queueLimit: 50, // rrweb 队列限制为 50 delay: 1000 // 1000ms 后发送事件 }, isSpa: true // 如果为 true，路由变化时 globalData 会添加 _spaUrl 属性 }; const monitor = Monitor.init(defaultTrackerOptions);`

`Vue 项目`

SDK 支持 Vue.config.errorHandler 来处理错误以获取详细的组件信息。只需在创建 Vue 实例前调用 useVueErrorListener。

`monitor.useVueErrorListener(Vue)`

`React 项目`

React 提供了一个名为 componentDidCatch 的钩子用于错误监听，以及 ErrorBoundary 的概念，可以在顶层捕获错误并防止应用崩溃。你可以按以下方式自行上报：

`js class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; }

componentDidCatch(error, info) { this.setState({ hasError: true }); reportError(error, info); }

render() { if (this.state.hasError) { return

`出错了`

;
    }
    return this.props.children;
  }
}

支持的事件

| 事件名 | 描述 |
| -------------------- | -------------------------------------------------------------------------------------------------- |
| jsError | window.onerror |
| vuejsError | Vue.config.errorHandler |
| unhandleRejection | window.onunhandledrejection |
| resourceError | 资源请求错误 |
| reqError | 网络请求错误 |
| batchErrors | 错误事件批量收集，包括 'jsError'、'vuejsError'、'unHandleRejection'、'resourceError' 和 'reqError'，每隔指定时间触发一次 |
| reqStart | 网络请求开始 |
| reqEnd | 网络请求结束 |
| performanceInfoReady | 性能数据准备就绪 |
| event | 包含以上所有事件 |

示例