一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第30天，点击查看活动详情。
本题难度：⭐
本题类型：Vue
答：使用应用配置里的 errorHandler，统一处理错误。
讲解
如何统一处理错误？
我们来做个测试，随便写一个会报错的组件，代码如下：
<template>
<div>页面</div>
</template>
<script setup>
let obj = null
obj.name // 这里会报错
</script>
这段代码会导致报错且阻断程序，页面白屏，如下图：
接下来，我们来解决这个问题，在全局加上错误处理，代码如下：
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.errorHandler = (err, vm, info) => {
console.log('err :>> ', err);
}
app.mount('#app')
指定一个处理函数，来处理组件渲染函数和侦听器执行期间抛出的未捕获错误。这个处理函数被调用时，可获取错误信息和相应的应用实例。
错误就能被捕获到，且页面能正常渲染。
捕获到了错误，就可以做一些统一的处理来了，比如上报日志。
原理
关于原理，可以参考下面这个工具函数，这里我们给这个工具函数写了错误处理逻辑。
假设工具函数写在 utils.js 里，在 index.js 里调用工具函数，错误处理的逻辑就写在外部 index.js 里，利用的是回调函数。
// utils.js
let handlerError = null
export default {
// 功能函数 foo
foo(callback) {
callWithErrorHandling(callback)
},
// 功能函数 bar
bar(callback) {
callWithErrorHandling(callback)
},
// 用户可以调用该函数注册统一的错误处理函数
errorHandler(errCallback) {
handlerError = errCallback
}
}
// 内部的统一错误处理函数
function callWithErrorHandling (callback) {
try {
callback && callback()
} catch(err) {
// 将捕获的错误传递给用户的错误处理程序
handlerError(err)
}
}
// index.js
import utils from 'utils.js'
// 注册错误处理程序
utils.errorHandler((err) => {
// 用户端统一处理报错的逻辑写到这里
console.log('err :>> ', err);
})
// 调用功能函数 foo
utils.foo(() => {
// 代码里有会导致报错的逻辑
let userInfo = null
userInfo.name
})
至于 Vue3 详细的原理，去源码里搜索 callWithErrorHandling，就能看到，和这个工具函数的原理是一样的。
结尾
本文参考：Vue.js设计与实现
阿林水平有限，文中如果有错误或表达不当的地方，非常欢迎在评论区指出，感谢～
如果我的文章对你有帮助，你的👍就是对我的最大支持^_^
我是阿林，输出洞见技术，再会！
上一篇：
