Vue2 错误处理与全局守卫实战指南

一、全局错误捕获

1. Vue.config.errorHandler 全局错误处理

在 Vue2 中，我们可以通过 Vue.config.errorHandler 定义一个全局的错误处理函数，用于捕获组件渲染函数或观察者期间的未捕获错误。

Vue.config.errorHandler = function (err, vm, info) {
  // err: 错误对象
  // vm: 发生错误的 Vue 实例
  // info: Vue 特定的错误信息，如生命周期钩子
  
  console.error('[全局错误]', err, info);
  // 可以在这里上报错误到监控系统
  reportErrorToServer(err);
};

实践建议：

• 生产环境务必配置全局错误处理器
• 结合 Sentry 等错误监控系统使用效果更佳
• 对于关键业务错误，可以添加用户友好的提示

2. 异步错误捕获

Vue 的错误处理器默认无法捕获以下错误：

• 异步回调中的错误（setTimeout、setInterval）
• Promise 未被处理的拒绝（unhandledrejection）

// 捕获未处理的 Promise 错误
window.addEventListener('unhandledrejection', event => {
  console.error('[未处理的Promise错误]', event.reason);
  event.preventDefault(); // 阻止默认行为（控制台报错）
});

// 捕获异步错误
window.onerror = function(message, source, lineno, colno, error) {
  console.error('[全局脚本错误]', {message, source, lineno, error});
};

实践建议：

• 对于重要的异步操作，始终添加 .catch() 处理
• 使用 async/await 时用 try/catch 包裹

二、路由与状态管理守卫

1. 路由全局守卫

Vue Router 提供了多种路由导航守卫，可以在 main.js 中全局注册：

import router from './router';

// 全局前置守卫
router.beforeEach((to, from, next) => {
  console.log(`路由切换: ${from.path} -> ${to.path}`);
  
  // 登录检查示例
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

// 全局后置钩子
router.afterEach((to, from) => {
  // 适合做页面统计
  trackPageView(to.path);
});

路由守卫类型对比：

实践建议：

• 权限控制适合在 beforeEach 中实现
• 页面统计适合在 afterEach 中实现
• 避免在守卫中进行耗时操作，会影响路由切换速度

2. Vuex 初始化与插件

在 main.js 中初始化 Vuex 并加载插件：

import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

const store = new Vuex.Store({
  plugins: [
    // 持久化插件示例
    createPersistedState({
      key: 'my-app-state',
      paths: ['user']
    })
  ],
  // ...其他store配置
});

new Vue({
  router,
  store,
  // ...其他配置
}).$mount('#app');

常见 Vuex 插件：

1. vuex-persistedstate - 状态持久化
2. vuex-logger - 开发调试日志
3. vuex-persist - 更灵活的状态持久化

实践建议：

• 生产环境移除 logger 类插件
• 敏感数据不要直接存入 Vuex，或使用加密插件
• 大型项目考虑模块化拆分

三、错误处理最佳实践

1. 分级处理策略：

   • 组件级：try/catch 处理局部错误
   • 全局级：errorHandler 处理未捕获错误
   • 网络级：axios 拦截器处理 API 错误
2. 错误上报流程：

3. 用户友好提示示例：

   Vue.config.errorHandler = (err, vm, info) => {
     // 上报错误
     reportError(err);
     
     // 显示用户友好的提示
     vm.$notify.error({
    title: '系统异常',
    message: '发生了一些问题，我们已经收到反馈',
    duration: 5000
     });
   };

通过合理配置全局错误处理和路由守卫，可以显著提升 Vue 应用的健壮性和用户体验。建议在项目初期就规划好错误监控方案，避免后期难以追踪线上问题。