示例

功能特性

• [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

使用方法

最简配置

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) => {
  // 执行上报
  // ...
});

完整配置

// 默认完整配置选项
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 的概念，可以在顶层捕获错误并防止应用崩溃。你可以按以下方式自行上报：

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 | 包含以上所有事件 |