Ant Design Vue Pro错误处理与日志系统：构建健壮的企业应用

方玮妙

285人浏览 · 2025-10-17 05:03:36

方玮妙 · 2025-10-17 05:03:36 发布

Ant Design Vue Pro错误处理与日志系统：构建健壮的企业应用

【免费下载链接】ant-design-vue-pro 👨🏻‍💻👩🏻‍💻 Use Ant Design Vue like a Pro! (vue2) 项目地址: https://gitcode.com/gh_mirrors/ant/ant-design-vue-pro

1. 企业应用的错误处理挑战

在企业级应用开发中，错误处理是保障系统稳定性的关键环节。你是否曾遇到过用户反馈"页面突然空白"却无法定位原因的情况？是否经历过生产环境报错却没有详细日志可查的困境？Ant Design Vue Pro作为成熟的中后台解决方案，提供了完善的错误处理与日志记录机制，帮助开发者快速定位问题、提升系统健壮性。

读完本文你将掌握：

请求异常的全局捕获与统一处理
前端错误日志的收集与展示方法
企业级应用的错误边界设计实践
错误监控与告警的实现思路

2. 请求错误处理机制

Ant Design Vue Pro通过请求拦截器实现了统一的错误处理策略，核心实现位于src/utils/request.js文件中。该文件定义了errorHandler函数，集中处理各类HTTP异常。

2.1 状态码处理策略

系统对常见状态码进行了差异化处理：

401未授权：自动触发登出流程并刷新页面
403禁止访问：显示权限不足提示
其他错误：统一转为Promise rejection以便业务层处理

// 请求响应错误处理
const errorHandler = (error) => {
  if (error.response) {
    const data = error.response.data
    const token = storage.get(ACCESS_TOKEN)
    
    // 403错误处理
    if (error.response.status === 403) {
      notification.error({
        message: 'Forbidden',
        description: data.message
      })
    }
    
    // 401错误处理
    if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
      notification.error({
        message: 'Unauthorized',
        description: 'Authorization verification failed'
      })
      if (token) {
        store.dispatch('Logout').then(() => {
          setTimeout(() => {
            window.location.reload()
          }, 1500)
        })
      }
    }
  }
  return Promise.reject(error)
}

2.2 请求/响应拦截器

通过Axios拦截器实现请求统一处理：

// 请求拦截器添加token
request.interceptors.request.use(config => {
  const token = storage.get(ACCESS_TOKEN)
  if (token) {
    config.headers[ACCESS_TOKEN] = token
  }
  return config
}, errorHandler)

// 响应拦截器处理返回数据
request.interceptors.response.use((response) => {
  return response.data
}, errorHandler)

3. 前端日志系统实现

系统提供了控制台日志输出功能，位于src/utils/screenLog.js文件中。该模块在应用启动时打印ASCII艺术字和版本信息，帮助开发者确认环境配置。

3.1 控制台日志输出

export const printANSI = () => {
  let text = `
 █████╗ ███╗   ██╗████████╗██████╗     ██████╗ ██████╗  ██████╗ 
██╔══██╗████╗  ██║╚══██╔══╝██╔══██╗    ██╔══██╗██╔══██╗██╔═══██╗
███████║██╔██╗ ██║   ██║   ██║  ██║    ██████╔╝██████╔╝██║   ██║
██╔══██║██║╚██╗██║   ██║   ██║  ██║    ██╔═══╝ ██╔══██╗██║   ██║
██║  ██║██║ ╚████║   ██║   ██████╔╝    ██║     ██║  ██║╚██████╔╝
╚═╝  ╚═╝╚═╝  ╚═══╝   ╚═╝   ╚═════╝     ╚═╝     ╚═╝  ╚═╝ ╚═════╝ 
\t\t\t\t\tPublished ${APP_VERSION}-${GIT_HASH} @ antdv.com
\t\t\t\t\tBuild date: ${BUILD_DATE}`
  console.log(`%c${text}`, 'color: #fc4d50')
}

3.2 日志分级策略

虽然基础版本未实现完整的日志分级，但可基于现有工具扩展：

开发环境：详细日志输出，包含请求参数和响应数据
测试环境：中等日志级别，记录关键操作和错误
生产环境：仅记录错误和重要系统事件

4. 应用监控与错误边界

4.1 路由级错误处理

在路由配置中，系统定义了异常页面组件，位于src/views/exception目录下，包含403、404和500错误页面。当路由解析失败或权限验证不通过时，自动重定向到相应页面。

4.2 全局异常捕获

Vue应用的全局错误捕获可通过app.config.errorHandler实现，建议在src/main.js中添加：

// 全局错误捕获示例
app.config.errorHandler = (err, vm, info) => {
  // 错误上报逻辑
  console.error('Global error:', err, info)
  // 可集成第三方错误监控服务
}

4.3 组件错误边界

对于可能发生错误的组件，建议使用错误边界组件进行包裹，防止单个组件错误导致整个应用崩溃：

<template>
  <div>
    <slot v-if="!hasError"></slot>
    <div v-else class="error-state">
      <h3>组件加载失败</h3>
      <button @click="retry">重试</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { hasError: false }
  },
  errorCaptured(err, vm, info) {
    this.hasError = true
    return false // 阻止错误继续向上传播
  },
  methods: {
    retry() {
      this.hasError = false
      // 重置组件状态逻辑
    }
  }
}
</script>

5. 企业级扩展建议

5.1 错误上报系统

对于企业级应用，建议扩展实现错误上报机制，可在src/utils/request.js的errorHandler中添加：

// 错误上报示例
const reportError = (error) => {
  // 仅在生产环境上报
  if (process.env.NODE_ENV === 'production') {
    axios.post('/api/report-error', {
      message: error.message,
      stack: error.stack,
      url: window.location.href,
      timestamp: new Date().toISOString()
    })
  }
}

5.2 用户操作日志

结合src/utils/util.js中的工具函数，可以实现用户操作日志记录：

// 记录用户操作示例
export function logUserAction(action, data = {}) {
  const logData = {
    userId: store.getters.userId,
    action,
    data,
    timestamp: new Date().getTime(),
    userAgent: navigator.userAgent,
    ip: 'client-ip' // 实际应用中从服务端获取
  }
  
  // 发送日志到后端
  request.post('/api/user-actions', logData).catch(e => {
    console.error('Failed to log user action', e)
  })
}