Vue大型项目错误监控与日志系统

大型Vue项目需建立完整的错误监控与日志体系，下面梳理核心实现方案。

全局错误捕获

Vue错误处理插件

// plugins/errorHandler.js
import { ElMessage } from 'element-plus'

export const errorHandler = {
  install(app) {
    app.config.errorHandler = (err, instance, info) => {
      console.error('[Vue Error]', err)
      console.error('[Component]', instance?.$options?.name)
      console.error('[Info]', info)
      
      // 上报错误
      reportError({
        type: 'vue_error',
        message: err.message,
        stack: err.stack,
        component: instance?.$options?.name,
        info
      })
      
      ElMessage.error('页面发生错误，请刷新重试')
    }
  }
}

Promise未捕获错误

// plugins/globalErrorHandler.js
export const globalErrorHandler = {
  install() {
    window.addEventListener('unhandledrejection', (event) => {
      console.error('[Unhandled Rejection]', event.reason)
      reportError({
        type: 'promise_rejection',
        message: event.reason?.message || String(event.reason),
        stack: event.reason?.stack
      })
    })
    
    window.addEventListener('error', (event) => {
      console.error('[Global Error]', event.error)
      reportError({
        type: 'global_error',
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno
      })
    })
  }
}

Sentry集成

初始化配置

// plugins/sentry.js
import * as Sentry from '@sentry/vue'
import { BrowserTracing } from '@sentry/tracing'

export const sentryPlugin = {
  install(app) {
    Sentry.init({
      app,
      dsn: import.meta.env.VITE_SENTRY_DSN,
      integrations: [
        new BrowserTracing({
          routingInstrumentation: Sentry.vueRouterInstrumentation(router),
          tracePropagationTargets: ['localhost', 'api.example.com']
        })
      ],
      environment: import.meta.env.VITE_ENV,
      tracesSampleRate: 0.1,
      release: import.meta.env.VITE_APP_VERSION
    })
  }
}

用户上下文绑定

// store/modules/user.js
import * as Sentry from '@sentry/vue'

export const useUserStore = defineStore('user', {
  actions: {
    setUserInfo(user) {
      this.userInfo = user
      Sentry.setUser({
        id: user.id,
        email: user.email,
        username: user.name
      })
    }
  }
})

日志系统设计

日志工具类

// utils/logger.js
class Logger {
  constructor(module) {
    this.module = module
  }
  
  _format(level, message, ...args) {
    const timestamp = new Date().toISOString()
    return `[${timestamp}] [${this.module}] [${level.toUpperCase()}] ${message}`
  }
  
  debug(message, ...args) {
    if (import.meta.env.DEV) {
      console.debug(this._format('debug', message), ...args)
    }
  }
  
  info(message, ...args) {
    console.info(this._format('info', message), ...args)
  }
  
  warn(message, ...args) {
    console.warn(this._format('warn', message), ...args)
  }
  
  error(message, ...args) {
    console.error(this._format('error', message), ...args)
    this._report('error', message, args)
  }
  
  _report(level, message, args) {
    // 生产环境上报到监控系统
    if (import.meta.env.PROD) {
      reportError({
        module: this.module,
        level,
        message,
        data: args
      })
    }
  }
}

export const createLogger = (module) => new Logger(module)

使用方式

// api/user.js
import { createLogger } from '@/utils/logger'

const log = createLogger('UserAPI')

export const fetchUserList = async (params) => {
  try {
    log.debug('Fetching user list', params)
    const data = await request.get('/users', { params })
    log.info('User list fetched successfully', { count: data.length })
    return data
  } catch (error) {
    log.error('Failed to fetch user list', error)
    throw error
  }
}

日志级别与场景

要点总结

• 使用app.config.errorHandler捕获Vue组件渲染错误
• 监听unhandledrejection和error事件捕获全局异常
• 集成Sentry进行线上错误监控与性能追踪
• 日志系统按模块创建logger，区分日志级别
• 生产环境自动上报ERROR级别日志到监控系统
• 错误上报需绑定用户上下文，便于问题定位

存放路径: articles/VUE/专家/大型项目架构分层设计/错误监控与日志系统.md