这是我参与「第四届青训营 」笔记创作活动的第1天

在前端监控项目中，遇到了很多问题。通过笔记的方式记录下来，以后遇到相同的问题可以及时复习。

这篇笔记是用来记录Vue项目报错监听的相关问题。

html网页中的JS异常

html网页中的js异常一般用window.addEventListner和window.onerror接口进行监听。
这两者效果类似，都可以收集到所有的JS异常，只有语法上略有差异。

window.addEventListener('error', function (e) {

  },
  true
);

其中e是ErrorEvent类型。

window.onerror = function(message, source, line, column, error) {

};

参数列表中的 message代表错误信息，source代表发生错误的资源，line代表发生错误的行号，column代表发生错误的列数，error代表js中的Error错误对象。

Vue网页中的JS异常

但是，上述的js异常收集方法在Vue项目的监听中存在一定问题。在Vue框架内，一些组件内的异常会在组件内部被自动地try/catch捕获，全局的window.onerror函数无法接收到这些组件内的异常。

当然也有一些特例，组件内的定时器(SetTimer)内的js异常仍可以被全局的window.onerror函数收集到。

errHandler是Vue中常见的异常捕捉方式。在一个页面中，一般有多个Vue应用。由于errorHandler是全局配置的，因此监听到所有的应用。而此时的window.onerror将会“失效”，即errorHandler能捕获的错误，onerror将不能捕获。errorHandler不能捕获的异常，onerror将捕获错误。如果errorCaptured函数返回为false，那么此error将不会传到errorHandler。

Vue.config.errorHandler = function(err, vm, info) {

};

其中err参数指代error对象，info指代Vue的特有字符串，vm指代Vue应用本身。

在项目根目录内的main.js文件中添加errorHandler的异常响应函数，或者引入Vue在子文件中添加即可实现全局的js错误监听。

import Vue from 'vue'
Vue.config.errorHandler = function(err, vm, info) {
//do something
};