vue3 中捕获全局和组件错误

 全局的错误捕获与处理

在main.js或main.ts中使用 app.config.errorHandler来定义全局错误处理器。这个钩子接受三个参数错误对象、出错的组件实例以及错误信息。

示例代码

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

//vue3全局错误捕获
app.config.errorHandler = (err, instance, info) => {
  console.error("捕获到全局错误：", err);
  console.error("出错的组件实例：", instance);
  console.error("错误信息：", info);
};

// 挂载 Vue 应用
app.mount('#app');

组件的错误捕获与处理

组件中都可以通过 errorCaptured`生命周期钩子来捕获它们内部的错误。这个钩子也接收三个参数：错误对象、出错的组件实例以及错误信息。

示例代码

<script lang="ts" setup>
import { onErrorCaptured } from 'vue';

errorCaptured((err, instance, info) => {
    console.error("捕获到错误：", err);
    console.error("出错的组件实例：", instance);
    console.error("错误信息：", info);
    
    // 返回 false 以阻止错误进一步传播
    return false;
  })
</script>