# monitorLog

**Repository Path**: qisx7749/monitor-log

## Basic Information

- **Project Name**: monitorLog
- **Description**: Vue2/Vue3 前端监控日志插件，监控错误异常和接口调用，生成日志文件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-26
- **Last Updated**: 2026-02-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-monitor-log

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

## 功能特性

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

## 安装

```bash
npm install vue-monitor-log --save
```

## 使用

### Vue3

```javascript
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

```javascript
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');
```

### 手动使用

```javascript
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

## 开发

```bash
# 安装依赖
npm install

# 构建项目
npm run build

# 开发模式
npm run watch

# 运行测试
npm run test

# 代码检查
npm run lint
```

## 测试

### Node.js环境测试

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

```bash
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 中插件不生效
**原因**：可能是插件初始化方式不正确。

**解决方案**：
```javascript
// 正确的初始化方式
import Vue from 'vue';
import VueMonitorLog from 'vue-monitor-log';

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

### 3. 日志文件没有中英文两个版本
**原因**：可能是插件版本过旧或配置问题。

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

## 许可证

MIT