Frontend Monitor SDK

轻量级前端监控解决方案，支持 React/Vue/原生项目，提供错误监控、性能采集、用户行为追踪等功能。支持插件化扩展，灵活配置采样率。

✨ 功能特性

• 🚨 错误监控

  • JS 运行时错误捕获
  • 自动错误上下文收集
  • 错误堆栈解析
  • 框架级错误边界

• ⏱️ 性能监控

  • 核心性能指标采集
  • 自动性能数据收集
  • 支持手动触发采集

• 🔌 插件系统

  • 支持自定义插件扩展
  • 插件生命周期管理
  • 灵活的数据处理能力

• 🛡️ 生产优化

  • 数据队列管理
  • 采样率控制
  • 事件过滤处理
  • 错误恢复机制

📦 安装

# NPM
npm install csmx-watch-sdk

# Yarn
yarn add csmx-watch-sdk

# PNPM
pnpm add csmx-watch-sdk

🚀 快速开始

基础使用

import { createMonitor } from "csmx-watch-sdk";

const monitor = createMonitor({
  maxQueueSize: 30 * 1024,
  sampleRate: 0.8,
  performance: true,
  errorTracking: true,
  beforeSend: (event) => event, // 数据发送前处理
});

// 自定义事件上报
monitor.track("userAction", {
  type: "click",
  target: "button",
});

// 手动采集性能数据
monitor.capturePerformance();

// 手动上报错误
monitor.captureError(new Error("Something went wrong"), {
  userId: "user_123",
});

React 集成

import { withReactMonitor } from "csmx-watch-sdk";

const ErrorBoundary = withReactMonitor(React, monitor);

function App() {
  return (
    <ErrorBoundary fallback={ErrorFallback}>
      <YourComponents />
    </ErrorBoundary>
  );
}

Vue 集成

import { vueMonitor } from "csmx-watch-sdk";

app.use(vueMonitor, { monitor });

插件开发

const customPlugin = {
  name: "CustomPlugin",
  setup: (monitor) => {
    // 插件初始化逻辑
  },
};

monitor.addPlugin(customPlugin);

⚙️ 配置项

| 参数 | 类型 | 默认值 | 必填 | 说明 | | ------------- | --------------- | ---------------- | ---- | ------------------ | | maxQueueSize | number | 30720 | 否 | 上报队列大小(字节) | | performance | boolean | true | 否 | 是否启用性能监控 | | errorTracking | boolean | true | 否 | 是否启用错误监控 | | sampleRate | number | 1.0 | 否 | 采样率(0-1) | | framework | string | 'vanilla' | 否 | 框架类型 | | plugins | MonitorPlugin[] | [] | 否 | 插件列表 | | beforeSend | Function | (event) => event | 否 | 数据发送前处理函数 |

🔨 本地开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 生产构建
npm run build

🌐 浏览器兼容性

| | | | | | :-----------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------: | | 50+ | 45+ | 15+ | 10+ |

📄 许可证

MIT License © 2025 AngleNeo