Simple Monitor SDK

前端监控 SDK，轻量简单，用于收集错误、性能、PV/UV 等数据。

页面

快速开始

1. 安装

从 GitHub 克隆项目：

git clone git@github.com:Advance-1/monitor.git
cd monitor/simple-monitor/sdk
npm install
npm run build

在你的项目中引用：

// package.json
{
  "dependencies": {
    "simple-monitor-sdk": "file:../../simple-monitor/sdk"
  }
}

然后安装依赖：

pnpm install

2. 初始化

最简配置（只需要两个参数）：

import SimpleMonitor from 'simple-monitor-sdk'

const monitor = new SimpleMonitor({
  dsn: 'http://localhost:3100/api/monitor',
  appId: 'your-app-id'
})

完整配置：

const monitor = new SimpleMonitor({
  dsn: 'http://localhost:3100/api/monitor',
  appId: 'your-app-id',
  version: '1.0.0',
  env: 'production',
  getCustomHeaders: () => {
    // 自定义请求头，用于传递用户信息等
    const user = JSON.parse(localStorage.getItem('user') || '{}')
    return { username: user.username }
  }
})

3. 查看数据

访问监控面板：http://localhost:3200

功能说明

SDK 会自动收集以下数据：

• 错误监控：JS 错误、Promise 错误、资源加载错误
• 性能监控：LCP、FID、CLS、FCP、TTFB 等 Web Vitals 指标
• PV 统计：页面访问量
• UV 统计：独立访客（基于浏览器指纹）
• API 监控：接口请求成功率、耗时
• 白屏检测：页面是否正常渲染

配置项

必填参数

参数	类型	说明
dsn	string	监控服务地址
appId	string	应用标识

可选参数

参数	类型	默认值	说明
version	string	'1.0.0'	应用版本号
env	string	'production'	运行环境
userId	string	''	用户 ID
maxErrors	number	1000	单次会话最大错误数
sampleRate	number	1	采样率 (0-1)，1 表示 100%
enableAPI	boolean	true	是否监控 API
enablePerformance	boolean	true	是否监控性能
enableWhiteScreen	boolean	true	是否检测白屏
getCustomHeaders	function	-	自定义请求头函数

手动上报

上报错误

try {
  // 业务代码
} catch (error) {
  monitor.captureError(error, { 
    extra: '额外信息' 
  })
}

上报消息

monitor.captureMessage('用户完成支付', 'info', {
  orderId: '12345',
  amount: 99.00
})

设置用户信息

// 用户登录后调用
monitor.setUser('user-123', {
  name: '张三',
  email: 'zhangsan@example.com'
})

Vue 集成

import { createApp } from 'vue'
import SimpleMonitor from 'simple-monitor-sdk'

const monitor = new SimpleMonitor({
  dsn: 'http://localhost:3100/api/monitor',
  appId: 'my-vue-app'
})

const app = createApp(App)

// Vue 错误处理
app.config.errorHandler = (err, instance, info) => {
  monitor.captureError(err, { 
    componentName: instance?.$options?.name,
    errorInfo: info 
  })
}

app.mount('#app')

React 集成

import SimpleMonitor from 'simple-monitor-sdk'
import { createReactErrorBoundary } from 'simple-monitor-sdk'

const monitor = new SimpleMonitor({
  dsn: 'http://localhost:3100/api/monitor',
  appId: 'my-react-app'
})

// 使用错误边界
const ErrorBoundary = createReactErrorBoundary(monitor)

function App() {
  return (
    <ErrorBoundary>
      <YourApp />
    </ErrorBoundary>
  )
}

常见问题

如何传递用户信息？

使用 getCustomHeaders 函数：

new SimpleMonitor({
  dsn: '...',
  appId: '...',
  getCustomHeaders: () => {
    const user = JSON.parse(localStorage.getItem('user') || '{}')
    return { 
      username: user.username || user.name 
    }
  }
})

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build