平时,网页的 JavaScript 报错只有在控制台才能看到,网页看上去就是停住不动了,也不知道发生了什么事情。
如果你不想让用户知道发生了什么的话,这样做是可以的。不过,如果我们想更加方便地看到到底发生了什么,或者明确提示用户网页发生了错误,那么我们还是应该把报错显示出来。
使用 vue 的全局配置处理报错
vue 的 app.config.errorHandler API 给我们提供了处理错误的方法。我们可以在 main.ts
或 main.js
文件中给我们的 app
添加处理错误的函数。使用示例如下:
import { createApp } from 'vue';
import { ElMessage } from 'element-plus';
const app = createApp(App);
// 中间代码省略
app.config.errorHandler = (err, instance, info) => {
console.error('Vue Error:', err)
ElMessage({
message: info + ": " + err.message,
type: 'error',
duration: 3000,
showClose: true
})
}
在这里我使用了 Element Plus 的 Message 来提示错误,你也可以使用 Notification。
在这里,err
是一个错误对象,instance
是导致错误的模块,info
是一个指向错误类型说明页面的网页链接。