VueMonitor SDK

Vue 前端性能与异常监控 SDK，支持 Vue2/Vue3 项目。

特性

• ✅ 自动拦截 axios 请求，采集接口性能数据
• ✅ 自动捕获 Vue 错误、JS 错误、Promise 异常
• ✅ 异步非阻塞上报，不影响业务性能
• ✅ 支持批量上报，减少请求次数
• ✅ 使用 sendBeacon，页面关闭也能上报
• ✅ 轻量级，无外部依赖（除了 axios）
• ✅ 支持采样率配置
• ✅ 多租户数据隔离

安装

方式 1：npm 安装（推荐）

npm install geca_monitor axios
# 或
yarn add geca_monitor axios
# 或
pnpm add geca_monitor axios

方式 2：直接复制源码

将 sdk/src 目录复制到你的项目中，然后按需引入。

方式 3：CDN 引用

<script src="https://your-cdn.com/vue-monitor.min.js"></script>
<script>
  const monitor = VueMonitor.createMonitor({ appId: 'xxx', reportUrl: 'xxx' });
  monitor.init();
</script>

使用方法

Vue 2 项目

// main.js
import Vue from 'vue';
import axios from 'axios';
import createMonitor from 'geca_monitor';

// 创建监控实例
const monitor = createMonitor({
  appId: 'your-app-id',           // 必填：项目 ID
  reportUrl: 'https://your-api-domain/api/report',  // 必填：上报地址
  slowThreshold: 1000,            // 可选：慢接口阈值，默认 1000ms
  env: 'prod',                    // 可选：环境标识
  sampleRate: 1,                  // 可选：采样率，默认 1 (100%)
});

// 初始化
monitor.init();

// 安装 axios 拦截器
monitor.useAxios(axios);

// Vue 2 自动捕获错误（SDK 自动处理）

new Vue({
  // ...
});

Vue 3 项目

// main.js
import { createApp } from 'vue';
import axios from 'axios';
import createMonitor from 'geca_monitor';
import App from './App.vue';

const app = createApp(App);

// 创建监控实例
const monitor = createMonitor({
  appId: 'your-app-id',
  reportUrl: 'https://your-api-domain/api/report',
  slowThreshold: 1000,
  env: 'prod',
});

// 初始化
monitor.init();

// 安装 axios 拦截器
monitor.useAxios(axios);

// 设置 Vue 3 错误处理器
monitor.setupVue3Error(app);

app.mount('#app');

手动上报异常

// 在业务代码中手动上报
try {
  // 一些业务逻辑
} catch (error) {
  monitor.reportError(error);
}

// 或者直接上报字符串
monitor.reportError('Something went wrong');

配置说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | appId | string | ✅ | - | 项目唯一标识 | | reportUrl | string | ✅ | - | 数据上报地址 | | slowThreshold | number | ❌ | 1000 | 慢接口阈值（毫秒） | | env | string | ❌ | 'prod' | 环境标识（dev/test/prod） | | sampleRate | number | ❌ | 1 | 采样率（0-1） | | reportEnabled | boolean | ❌ | true | 是否开启上报 |

采集数据

接口性能数据

• URL（已去除查询参数）
• HTTP 方法
• 耗时（毫秒）
• 状态码
• 是否成功
• 是否慢接口
• 当前路由
• 时间戳

异常数据

• 异常类型（vue/js/promise/api）
• 错误信息
• 堆栈信息
• 页面 URL
• 错误指纹（自动计算）
• 时间戳

注意事项

1. 必须在 axios 之前初始化：确保 monitor.useAxios(axios) 在业务代码使用 axios 之前调用
2. Vue 3 需要手动设置：调用 monitor.setupVue3Error(app) 才能捕获 Vue 3 错误
3. 采样率：高流量项目建议设置 sampleRate: 0.1（10% 采样）
4. 上报地址：确保上报地址可访问，建议使用 HTTPS

构建

# 安装依赖
npm install

# 构建
npm run build

# 开发模式
npm run dev

# 测试
npm test

输出文件

dist/
├── index.js          # UMD 格式（浏览器 + Node）
├── index.esm.js      # ES Module 格式
├── index.d.ts        # TypeScript 类型定义
└── ... (sourcemap)

License

MIT