npm package: @shencom/monitor-web
Description: 错误上报和性能监控skd
Author: Tcgogo
Latest version: 1.0.0

# 示例

# 功能特性

- [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 <h1>出错了</h1>;
    }
    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                | 包含以上所有事件                                                                                    |