哈尔滨网站建设开发外包,网站的结构类型,河南省 门户网站建设要求,上海闵行天气window.onerror 全局监听所有JS错误#xff0c;包括异步错误但是它是JS级别的#xff0c;识别不了Vue组件信息#xff0c;Vue内部的错误还是用Vue来监听捕捉一些Vue监听不到的错误 errorCaptured生命周期 监听所有下级组件的错误返回false会阻止向上传播到window.onerror … window.onerror 全局监听所有JS错误包括异步错误但是它是JS级别的识别不了Vue组件信息Vue内部的错误还是用Vue来监听捕捉一些Vue监听不到的错误 errorCaptured生命周期 监听所有下级组件的错误返回false会阻止向上传播到window.onerror errorHandler配置 Vue全局错误监听所有组件错误都会汇总到这里但errorCaptured返回false不会传播到这里window.onerror和errorHandler互斥window.onerror不会在被触发这里都是全局错误监听了 异步错误 异步回调里的错误errorHandler监听不到需要使用window.onerror 总结 实际工作中三者结合使用promisepromise没有被catch的报错使用onunhandledrejection监听和setTimeout异步vue里面监听不了 window.addEventListener(unhandledrejection, event {// 捕获 Promise 没有 catch 的错误console.info(unhandledrejection----, event)
})
Promise.reject(错误信息)
// .catch(e console.info(e)) // catch 住了就不会被 unhandledrejection 捕获errorCaptured监听一些重要的、有风险组件的错误window.onerror和errorCaptured候补全局监听
// main.js
const app createApp(App)// 所有组件错误都会汇总到这里
// window.onerror和errorHandler互斥window.onerror不会在被触发这里都是全局错误监听了
// 阻止向window.onerror传播
app.config.errorHandler (error, vm, info) {console.info(errorHandler----, error, vm, info)
}// 在app.vue最上层中监控全局组件
export default {mounted() {/*** msg:错误的信息* source:哪个文件* line:行* column:列* error:错误的对象*/// 可以监听一切js的报错 try...catch 捕获的 error 无法被 window.onerror 监听到window.onerror function (msg, source, line, column, error) {console.info(window.onerror----, msg, source, line, column, error)}// 用addEventListener跟window.onerror效果一样参数不一样// window.addEventListener(error, event {// console.info(window error, event)// })},errorCaptured: (errInfo, vm, info) {console.info(errorCaptured----, errInfo, vm, info)// 返回false会阻止向上传播到window.onerror// 返回false会阻止传播到errorHandler// return false},
}// ErrorDemo.vue
export default {name: ErrorDemo,data() {return {num: 100}},methods: {clickHandler() {try {this.num() // 报错} catch (ex) {console.error(catch....., ex)// try...catch 捕获的 error 无法被 window.onerror 监听到}this.num() // 报错}},mounted() {// 被errorCaptured捕获// throw new Error(mounted 报错)// 异步报错errorHandler、errorCaptured监听不到vue对异步报错监听不了需要使用window.onerror来做// setTimeout(() {// throw new Error(setTimeout 报错)// }, 1000)},
}要统一监听 Vue 组件的报错可以使用 Vue 的全局错误处理机制。Vue 提供了 errorHandler 钩子函数可以在组件发生错误时捕获并处理错误信息。
在你的 Vue 应用的入口文件通常是 main.js中可以使用 Vue.config.errorHandler 方法来设置全局的错误处理函数如下所示
Vue.config.errorHandler function (err, vm, info) {// 在这里可以处理错误比如发送错误日志等console.error(Vue Error:, err);console.error(Component:, vm);console.error(Error Info:, info);
}在这个错误处理函数中err 参数表示捕获到的错误对象vm 参数表示发生错误的 Vue 组件实例info 参数包含有关错误的更多信息比如错误发生的位置等。
通过设置全局的错误处理函数你可以在组件发生错误时捕获错误并进行统一处理比如发送错误日志给服务器、展示错误提示等。
需要注意的是在开发环境下Vue 会默认将错误打印到浏览器的控制台中但在生产环境下默认不会输出错误信息因此建议在生产环境下设置一个错误处理函数来捕获和处理错误。
另外如果你使用的是 Vue 3全局错误处理的设置方式略有不同。你可以使用 app.config.errorHandler 方法来设置全局的错误处理函数具体的代码示例可以参考 Vue 3 的官方文档。
