代码错误

try catch 捕获

弊端：@1 影响代码的可读性

​ @2 无法捕获异步的错误

www.cnblogs.com/zhansu/p/11…

try {
    throw new Error(3)
} catch (e) {
    console.log(e)
}

/*------*/
try {
    setTimeout(function () {
        throw new Error(5)
    }, 100)

} catch (e) {
    console.log(e)
}

window.onerrer

缺点：

@1 监听不到资源加载的错误

@2 只能声明一次不会重复执行多个回调

developer.mozilla.org/zh-CN/docs/…

//就像开了个监听器  也可以捕获异步错误
window.onerror = function(message, source, lineno, colno, error) { ... }

注意：不同源  会有问题 看下面
https://www.jianshu.com/p/315ffe6797b8

window.addEventListener('error',callback);

@1 可以监听资源报错

@2 可以监听异步报错

window.addEventListener('error',function(){
    console.log(11);
})

为捕获状态时(第三个参数为true)能捕获到js执行错误，也能捕获带有src的标签元素的加载错误。

为冒泡状态时(第三个参数为false)能捕获到js执行错误，不能捕获带有src的标签元素的加载错误。

window.addEventListener('unhandledrejection',callback);

监听Promise 的错误

promise 的报错比较娇贵，try ……catch, window.onerror, widow.addEventlistener 都无法监听到promise 的报错。

window.addEventListener('unhandledrejection',function(err){
    console.log(err);
})

setTimeout(() => {
    Promise.reject(1);
},1000)

资源错误

@1 imgObj.onerror()

@2 performance.getEntries() 获取到成功加载的资源

@3 widow.addEventlistener

如何上报错误

1. 采用ajax 上报

2. 使用image上报

3. sourceMap解析

一般来说，大厂都是采用利用image对象的方式上报错误的；使用图片发送get请求，上报信息，由于浏览器对图片有缓存，同样的请求，图片只会发送一次，避免重复上报。