vue-log-vision (前端日志可视化面板)

一个面向 Vue 应用的前端调试工具，通过拦截 console 与网络请求，将零散日志结构化 + 分类 + 可视化，帮助你快速定位问题。

功能点：

• 拦截并展示：console.log / warn / error
• 拦截并展示：fetch / XMLHttpRequest（含 axios）
• 可选：一行集成 axios 插件，看到更详细的 axios 请求日志
• 内嵌浮窗面板：支持按级别、类型、关键字筛选日志

安装

npm install vue-log-vision
# 或
yarn add vue-log-vision

注意：本库将 vue 和 axios 声明为 peerDependency，请确保业务项目中已有对应依赖。

快速开始

在你的 Vue 入口文件（如 main.ts）中初始化即可：

import { createApp } from 'vue';
import App from './App.vue';
import { initLogVision } from 'vue-log-vision';

// 初始化日志采集 + 内嵌面板
initLogVision();

createApp(App).mount('#app');

初始化后，你会在页面右下角看到一个 LOG 浮动按钮：

• 点击按钮：打开/关闭日志面板
• 面板内：
  • 顶部可以选择日志级别（log / warn / error）和类型（接口 / 组件 / 错误 / 其他）
  • 支持关键字搜索（会匹配 message / url / 组件名）
  • 点击某条日志可查看详细信息（含接口信息、时间、状态等）

自动拦截的内容

初始化 initLogVision() 后，会自动拦截：

• console

  • console.log / console.warn / console.error
  • 日志会被结构化为 LogEntry 对象，并按规则分类

• fetch 请求

  • 自动拦截 window.fetch(...)
  • 生成一条 category = 'api' 的接口日志：
    • 包含 method / url / status / 耗时（ms）

• XHR 请求（包括 axios 的 XHR 调用）

  • 通过代理 XMLHttpRequest 自动采集
  • 含 method / url / status / 耗时（ms）
  • 日志 tags 中会包含 ['xhr']

可选：axios 插件（更细粒度）

对于 axios，你可以额外启用内置插件，获得更清晰的 [AXIOS] 日志：

import axios from 'axios';
import { attachAxiosLogger } from 'vue-log-vision';

// 一行集成 axios 日志
attachAxiosLogger(axios);

启用后：

• 成功请求：
  • 日志信息类似：[AXIOS] GET /api/user - 200 (123.4ms)
  • category = 'api'，tags 中包含 ['axios']
• 失败请求：
  • 日志信息类似：[AXIOS ERROR] POST /api/login - 500 (80.1ms)
  • tags 中包含 ['axios', 'exception']

你可以在日志面板中通过类型=接口 / 级别=error 快速筛出所有请求异常。

组件日志（可选辅助）

如果你想更清晰地区分“组件内部日志”，可以使用库提供的 logComponent 帮助函数：

import { logComponent } from 'vue-log-vision';

export default {
  name: 'UserCard',
  mounted() {
    logComponent('UserCard', 'mounted', this.$props);
  },
};

日志会被解析为：

• category = 'component'
• componentName = 'UserCard'

在面板里选择“类型 = 组件”，就能专门看组件日志。

对外 API 一览

• initLogVision(options?)

  • 初始化日志采集与内嵌面板
  • 通常在应用入口调用一次

• logComponent(componentName: string, ...args: any[])

  • 用于打印“组件级”日志
  • 内部还是走 console.log，但会自动识别并归类为组件日志

• attachAxiosLogger(axiosInstance: AxiosInstance)

  • 可选：为 axios 实例挂载请求/响应拦截器，输出带 [AXIOS] 标签的接口日志

日志数据结构（简要）

type LogLevel = 'log' | 'warn' | 'error';

type LogCategory = 'api' | 'component' | 'error' | 'performance' | 'unknown';

interface LogEntry {
  id: string;
  level: LogLevel;
  category: LogCategory;
  message: string;
  rawArgs: any[];
  timestamp: number;
  requestId?: string;
  url?: string;
  method?: string;
  status?: number;
  componentName?: string;
  stack?: string;
  tags?: string[];
}

面板内部就是围绕 LogEntry 做筛选和展示，后续你也可以基于这个结构扩展：比如导出 JSON、上报到后端等。

常见问题

1. 会不会影响原有 console / 网络请求行为？

• 不会删除原有行为：
  • console.log/warn/error 会先被采集，然后仍然调用原始的 console 方法
  • fetch / XHR / axios 拦截器都在原有逻辑外层包一层，不改变返回值

2. 只在开发环境使用？

推荐：

if (import.meta.env.DEV) {
  initLogVision();
}

这样可以保证只在开发环境打开可视化面板，生产环境不注入 UI。你也可以通过构建工具 / 环境变量灵活控制。