vue-monitor-log

Vue2/Vue3 前端监控日志插件，监控错误异常和接口调用，自动生成日志文件。

功能特性

• ✅ 适配 Vue2 和 Vue3
• ✅ 兼容 Node.js 14+
• ✅ 监控全局错误和未捕获的 Promise 错误
• ✅ 监控资源加载错误
• ✅ 监控 fetch 和 XMLHttpRequest 接口调用
• ✅ 自动生成和下载日志文件
• ✅ 支持自定义配置

安装

npm install vue-monitor-log --save

使用

Vue3

import { createApp } from 'vue';
import App from './App.vue';
import VueMonitorLog from 'vue-monitor-log';

const app = createApp(App);

app.use(VueMonitorLog, {
  enableError: true,  // 启用错误监控
  enableApi: true,    // 启用接口监控
  maxLogSize: 1024 * 1024 * 5,  // 最大日志大小（5MB）
});

app.mount('#app');

Vue2

import Vue from 'vue';
import App from './App.vue';
import VueMonitorLog from 'vue-monitor-log';

Vue.use(VueMonitorLog, {
  enableError: true,
  enableApi: true,
  maxLogSize: 1024 * 1024 * 5,
});

new Vue({
  render: h => h(App),
}).$mount('#app');

手动使用

import { monitor } from 'vue-monitor-log';

// 手动记录错误
monitor.logError({
  type: 'custom',
  message: '自定义错误',
  error: '错误详情'
});

// 手动记录API调用
monitor.logApi({
  url: '/api/test',
  method: 'GET',
  status: 200,
  duration: 100,
  success: true
});

// 手动生成日志文件
monitor.logger.flush();

配置选项

| 选项 | 类型 | 默认值 | 描述 | |------|------|--------|------| | enableError | boolean | true | 是否启用错误监控 | | enableApi | boolean | true | 是否启用接口监控 | | logDir | string | './logs' | 日志文件保存路径（支持自定义路径） | | maxLogSize | number | 5MB | 最大日志文件大小，超过后自动生成新文件 | | realtimeWrite | boolean | false | 是否启用实时写入，监控内容立即写入文件 |

API

VueMonitorLog.install(app, options)

插件安装方法，用于在Vue应用中注册插件。

monitor.init(options)

初始化监控，可手动调用进行配置。

monitor.logError(error)

手动记录错误信息。

monitor.logApi(apiInfo)

手动记录API调用信息。

monitor.destroy()

销毁监控，恢复原始方法。

monitor.logger.flush()

手动触发日志文件生成。

日志格式

日志文件

插件会同时生成两个日志文件：

• monitor-log-{timestamp}-en.txt - 英文日志文件
• monitor-log-{timestamp}-zh.txt - 中文日志文件

日志内容格式

日志文件为txt格式，每条日志包含时间戳、类型和详细信息：

[2026-02-24 16:48:28] [ERROR] {"type":"global","message":"ReferenceError: test is not defined","source":"http://localhost:8080/app.js","lineno":10,"colno":5,"error":"ReferenceError: test is not defined\n    at http://localhost:8080/app.js:10:5"}
[2026-02-24 16:48:28] [API] {"url":"/api/test","method":"GET","status":200,"duration":150,"success":true}

中文日志示例

[2026-02-24 16:48:28] [错误] {
  "类型": "全局",
  "消息": "ReferenceError: test is not defined",
  "来源": "http://localhost:8080/app.js",
  "行号": 10,
  "列号": 5,
  "错误": "ReferenceError: test is not defined\n    at http://localhost:8080/app.js:10:5"
}
[2026-02-24 16:48:28] [接口] {
  "地址": "/api/test",
  "方法": "GET",
  "状态": 200,
  "耗时": 150,
  "成功": true
}

浏览器兼容性

• Chrome >= 60
• Firefox >= 55
• Safari >= 12
• Edge >= 79

开发

# 安装依赖
npm install

# 构建项目
npm run build

# 开发模式
npm run watch

# 运行测试
npm run test

# 代码检查
npm run lint

测试

Node.js环境测试

运行Node.js测试脚本，验证日志文件生成功能：

node test-node.js

测试脚本会：

• 初始化监控
• 记录测试错误和API调用
• 实时写入日志文件
• 检查日志文件是否生成

浏览器环境测试

在浏览器中打开测试页面：

• test/index.html - 基本功能测试
• test/realtime-test.html - 实时写入功能测试

日志文件管理

Node.js 环境

• 目录自动创建：插件会自动创建不存在的日志目录
• 实时写入：启用 realtimeWrite: true 时，监控内容会立即写入文件
• 文件大小限制：超过 maxLogSize 时会自动生成新文件
• 中英文双文件：每次都会同时生成英文和中文日志文件

浏览器环境

• 日志下载：在浏览器环境中，日志文件通过下载方式生成，浏览器会弹出下载提示
• 自动触发：当日志大小超过 maxLogSize 时，会自动触发下载
• 手动触发：调用 monitor.logger.flush() 手动触发日志下载
• 安全限制：由于浏览器安全限制，无法自动保存到本地文件系统，只能通过下载方式

常见问题

1. 浏览器中没有生成日志文件

原因：在浏览器环境中，日志文件是通过下载方式生成的，而不是自动保存到本地文件系统。

解决方案：

• 确保日志数量达到一定规模（超过 maxLogSize）
• 或者手动调用 monitor.logger.flush() 触发日志下载
• 检查浏览器下载提示是否被阻止

2. Vue 2 中插件不生效

原因：可能是插件初始化方式不正确。

解决方案：

// 正确的初始化方式
import Vue from 'vue';
import VueMonitorLog from 'vue-monitor-log';

Vue.use(VueMonitorLog, {
  enableError: true,
  enableApi: true
});

3. 日志文件没有中英文两个版本

原因：可能是插件版本过旧或配置问题。

解决方案：

• 确保使用最新版本的插件
• 检查配置中是否启用了相应功能
• 手动调用 monitor.logger.flush() 触发日志生成

许可证

MIT