VueMonitor

一个简单的 Vue.js（支持 Vue 2 和 Vue 3）监控插件，提供错误捕获、性能监控、用户行为追踪等功能。
可搭配 vue-monitor-view 使用，方便查看错误信息。

---

功能特点

• Vue 错误捕获：自动捕获 Vue 组件、方法和模板中的错误。
• 全局 JS 错误捕获：监控原生 JavaScript 错误（window.onerror）、未处理的 Promise 异常（window.onunhandledrejection）及资源加载错误。
• 用户行为追踪：自动记录点击事件、输入事件（支持脱敏）、扫码事件。
• 性能监控：自动采集核心 Web Vitals（如 LCP、FID、CLS、INP、长任务、掉帧等），并记录到用户操作记录中。
• 用户操作（Breadcrumb）记录：保留最近的用户操作轨迹，方便调试和错误分析。
• 低侵入式：不修改现有代码逻辑，也不会隐藏控制台报错。
• 易于集成：Vue 2 可通过 Vue.use() 使用，Vue 3 可通过 app.use() 使用。
• 自定义上报：支持自定义 header、body、附加数据等。

---

安装

npm install @zjsix/vue-monitor

---

使用示例

Vue 2

import Vue from 'vue';
import VueMonitor from '@zjsix/vue-monitor';
import pkg from '../package.json';

Vue.use(VueMonitor, {
    reportUrl: '/api/report', // 必填：日志上报接口
    projectName: pkg.name,
    projectVersion: pkg.version,
    maxBreadcrumbs: 50,
    errorThrottleTime: 60000,
    filterInputAndScanData: true,
    customHeaders: { 'Authorization': 'Bearer xxx' },
    customData: { env: 'prod' }
});

new Vue({
  el: '#app'
});

Vue 3

import { createApp } from 'vue';
import VueMonitor from '@zjsix/vue-monitor';
import App from './App.vue';

const app = createApp(App);

app.use(VueMonitor, {
  reportUrl: '/api/report',
  projectName: 'vue3-test',
  projectVersion: '1.0.0'
});

app.mount('#app');

---

配置项说明

选项名	类型	说明	默认值
reportUrl	string	日志上报接口地址	必填
projectName	string	项目名称	可选
projectVersion	string	项目版本	可选
maxBreadcrumbs	number	最大用户行为记录数	30
errorThrottleTime	number	相同错误上报节流时间（ms）	60000
filterInputAndScanData	boolean	是否过滤输入框和扫码数据（true 只记录长度，false 记录原文）	true
customHeaders	Record<string, string>	上报请求自定义 header	可选
customData	Record<string, any>	上报请求附加自定义数据	可选

---

API

全局实例 $monitor

• this.$monitor.addBreadcrumb(breadcrumb: Breadcrumb)：手动添加用户操作记录。
• this.$monitor.reportError(error: ErrorInfo | Error)：手动上报错误。

类型定义

interface Breadcrumb {
  type: string;        // 行为类型，如 click、input、scan、performance 等
  target: string;      // 目标元素描述
  value?: string;      // 行为值（如输入内容、扫码内容、性能数据等）
  timestamp: string;   // 时间戳
}

interface ErrorInfo {
  message: string;
  stack?: string;
  url?: string;
  timestamp: string;
  [key: string]: any;
}

---

性能监控说明

• 自动采集 LCP、FID、CLS、INP、长任务、掉帧等核心 Web Vitals。
• 性能数据会以 performance 类型记录到用户行为记录中，便于分析。

---

隐私与安全

• 默认情况下，输入框和扫码数据只记录长度，不记录原文内容，保护用户隐私。
• 如需记录原文内容，可将 filterInputAndScanData 设为 false，请确保符合相关隐私合规要求。

---

贡献

欢迎提 issue 或 PR！如有建议或需求请在 GitHub 提出。

---

如需自定义更多功能，可参考源码或 issue 交流