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>