【九月打卡】第20天 如何统一监听vue报错？

第一模块（课程信息）:

课程名称:2周刷完100道前端优质面试真题
课程章节:第七章第十三节 如何统一监听vue报错？
主讲老师:双越

第二模块（课程内容）:

课程内容概述
监听报错，如果你做的只是一个demo练习，你会关注报错吗？

相信大部分小伙伴都会只关注功能，做完功能后就会提交代码，然后把项目代码开源
那么作为一个完整的上线项目，能够保证上线是最基本的流程。后面我们要考虑运维、监控、性能优化和迭代升级，还有以后的重构。

那么今天就跟着老师学习，如何监听vue中的报错信息

一、window.onerror

• 全局监听所有JS错误
• 它是JS级别的，识别不了vue组件信息
• 捕捉一些vue监听不到的错误

代码演示：
在app.vue中

<script>
	export default{
		mounted(){
		// 方式一
			window.onerror = function(msg,source,line,column,error){
             console.info('window onerror----',msg,source,line,column,error);
            }
        // 方式二
        window.addEventListener('error',event=>{
				console.log(event);
           })
        }
    }

</script>

二、errorCaptured生命周期

• 监听所有下级组件的错误
• 返回false会阻止向上传播

<script>
	export default{
		mounted(){
        }，
        errorCaptured(err,vm,info){
             console.log(err,vm,info);
	        return false;//就不会再执行mounted方法
        }
    }

</script>

三、errorHandler配置

在main.js中配置

代码演示：

import {createApp} from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);

app.config.errorHandler = (error,vm,info)=>{
	console.info('errorHandler---',error,vm,info);
}
app.use(router).mount('#app');

四、对于异步的错误(只能用onerror)

代码演示：

<script>
	export default{
		mounted(){
		 window.onerror = function(msg,source,line,column,error){
             console.info('window onerror----',msg,source,line,column,error);
            }
        }
    }

</script>

总结：

1. 实际工作中，三者结合使用
2. errorCaptured监听一些重要信息、有风险组件的错误
3. window.onerror和errorHandler候补全局监听

第三模块（学习心得）：

通过这节课的学习，全面的掌握了vue监听报错的方法
1、window.onerror
2、errorCaptured
3、errorHandler
4、对于异步的错误，只能用window.onerror监听错误

第四模块（学习截图）：