[](https://www.npmjs.com/package/csmx-watch-sdk) [](LICENSE) [
轻量级前端监控解决方案，支持 React/Vue/原生项目，提供错误监控、性能采集、用户行为追踪等功能。支持插件化扩展，灵活配置采样率。
- 🚨 错误监控
- JS 运行时错误捕获
- 自动错误上下文收集
- 错误堆栈解析
- 框架级错误边界
- ⏱️ 性能监控
- 核心性能指标采集
- 自动性能数据收集
- 支持手动触发采集
- 🔌 插件系统
- 支持自定义插件扩展
- 插件生命周期管理
- 灵活的数据处理能力
- 🛡️ 生产优化
- 数据队列管理
- 采样率控制
- 事件过滤处理
- 错误恢复机制
``bashNPM
npm install csmx-watch-sdk
🚀 快速开始
$3
typescript
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",
});
`$3
typescript
import { withReactMonitor } from "csmx-watch-sdk";const ErrorBoundary = withReactMonitor(React, monitor);
function App() {
return (
);
}
`$3
typescript
import { vueMonitor } from "csmx-watch-sdk";app.use(vueMonitor, { monitor });
`$3
typescript
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 | 否 | 数据发送前处理函数 |
🔨 本地开发
bash
安装依赖
npm install开发模式
npm run dev生产构建
npm run build
``| !Chrome | !Firefox | !Edge | !Safari |
| :-----------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------: |
| 50+ | 45+ | 15+ | 10+ |
MIT License © 2025 AngleNeo