错误类型
我们一般比较关心以下三种类型的错误
- js执行错误
- 资源加载错误
- http请求错误
全局捕获错误
- window.onerror
window.onerror = function (msg, url, row, col, error) {
console.log({ msg, url, row, col, error });
}
注意点：
1 window.onerror只能捕获在它定义之后的代码错误，在它定义之前的代
码错误无法进行捕捉，所以我们要将它写在所有 JS 脚本的前面。
2 无法捕获到网络异常的错误，例如图片加载失败等就无法进行捕获。
3 只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的
发生，控制台还是会显示 Uncaught Error: xxxxx。
4 无法捕获Promise 错误
- window.addEventListener()
window.addEventListener('error', function (error) {
console.log(error)
}, true)
注意点：
1 window.addEventListener只能捕获在它定义之后的代码错误，在它定义之前的代码错误无法进行捕捉，所以我们要将它写在所有 JS 脚本的前面。
2 可以捕获到网络异常的错误，例如图片加载失败等就可以进行捕获，但是window.addEventListener的第三个参数必须是true才可以，这是因为网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉。
3 无法捕获Promise 错误。
我们使用window.onerror来捕获js执行错误，使用window.addEventListener来捕获资源加载错误，对于http请求错误我们一般有 error回调函数去进行捕获。
上报
我们一般使用Ajax 发送数据实现上报，上报信息尽可能的详细，包括用户的设备信息，网络情况，错误信息，时间等等，上报并不是我们的终点，我们的终点是根据上报信息实现自动告警，除此之外，我们还有一个后台用于展示我们的上报信息。
代码示例：
// 上报函数
function send(data) {
// 发起ajax请求
}
// 初始化函数
function init() {
window.onerror = function (msg, url, row, col, error) {
let jsError = {
type: 'jsError',
timestamp: Date.now(),
url: url || location.href,
row,
col,
msg
}
if(error && error.stack) {
jsError['stack'] = error.stack.toString()
}
send(jsError)
}
window.addEventListener('error', function (event) {
let sourceError = {
type: 'sourceError',
timestamp: Date.now(),
url: url || location.href,
}
let eleArray = ["script", "link", "img"]
let ele = event.target || event.srcElement
let tagName = ele.tagName.toLowerCase()
if (eleArray.indexOf(tagName) !== -1) {
sourceError['msg'] = tagName === "link" ? ele.href: ele.src
send(sourceError)
}
return false
}, true)
}
let errorMonitor = {
init,
send
}
export default errorMonitor
