vue3 全局错误处理

在Vue3项目中，全局错误处理是确保应用程序健壮性和用户体验的关键。当发生未捕获的错误时，如果能及时捕获并妥善处理，可以避免页面崩溃或显示不完整的情况。下面介绍几种解决方案。

1. 使用errorCaptured钩子

errorCaptured 是Vue 为组件提供的一个生命周期钩子，它允许我们在组件树中的某个地方捕获错误。这个钩子函数接收三个参数：错误对象、来源（出错的组件实例）和错误来源类型。我们可以在根组件中使用它来实现全局错误捕捉。

javascript
// main.js 或 setup文件中
import { createApp } from 'vue'
import App from './App.vue'</p>

<p>const app = createApp(App)</p>

<p>app.config.errorHandler = (err, vm, info) => {
  // 处理逻辑
  console.log('全局捕获到错误:', err, '来自:', info)
}</p>

<p>app.mount('#app')

但是要注意的是，该方法无法捕获异步代码中的错误。

2. 配置 errorHandler

Vue 提供了 app.config.errorHandler 的方式来设置全局的错误处理器。这种方式可以捕获所有 Vue 组件内部发生的错误，包括同步和异步操作中的错误。

javascript
// 在main.js 中
import { createApp } from 'vue'
import App from './App.vue'</p>

<p>const app = createApp(App)</p>

<p>app.config.errorHandler = function (err, vm, info) {
  // 错误处理逻辑
  // 可以将错误信息发送给服务器进行记录
  console.error('Error in component:', info, 'n', err)
}

这能够有效地捕获大多数发生在Vue组件内的错误，但需要注意的是，它不会捕获路由守卫、定时器等外部代码中的错误。

3. 使用window.onerror 和 window.onunhandledrejection

对于非Vue组件内部的错误，如路由守卫中的错误或者一些原生js代码中的错误，我们可以借助浏览器自带的 window.onerror 和 window.onunhandledrejection 来进行全局捕获。

javascript
// 在入口文件中添加
window.onerror = function (message, source, lineno, colno, error) {
  console.error('Error:', message, 'Source:', source, 'Line:', lineno, 'Column:', colno, 'Error:', error)
  return true
}</p>

<p>window.onunhandledrejection = function (event) {
  console.error('Unhandled promise rejection:', event.reason)
}

通过上述三种方式结合使用，就可以较为全面地对Vue3应用中的错误进行全局处理了。在实际开发中，还可以根据业务需求进一步扩展错误处理的功能，比如将错误信息上报给服务器以便后续分析等。