Sorth Tong

# 多个script执行问题

<script>
wofdsafas;
console.log(1);
</script>
<script>
console.log(2);
</script>
1
2
3
4
5
6
7

2还可以输出，说明页面加载是每个script分别加载的，当一个报错时并不会阻塞别的script

# 语法错误捕获

try {
    var error = 'error'；//这里用的是中文分号
} catch (e) {
    console.log(e);//这里捕获不到错误 只能配置hint
}
1
2
3
4
5

# 异步错误捕获

try{
    setTimeout(() => {
        error;
    });
}catch(e) {
    console.log(e);//捕获不到错误的
}
1
2
3
4
5
6
7
window.onerror = function (msg, url, row, col, error) {
    console.log('🍑', error);
    // 禁止页面飘红
    return true;
}
1
2
3
4
5

# HTML错误捕获

   <img src="./dfsafas.png" alt="">
    <script>
        window.addEventListener('error', function (msg, url, row, col, error) {
            console.log('🍑', msg);//这里是msg
            return true;
        }, true)
    </script>
1
2
3
4
5
6
7

window.onerror无法捕获到错误

# Promise错误捕获

window.addEventListener('unhandledrejection', function (e) {
    e.preventDefault();
    console.log(e);
    return true;
})

new Promise((resolve, reject) => {
    reject('第一个错误');
})
Promise.reject('第二个错误');
Promise.resolve('hello world!').then((res)=>{
    throw('第三个错误！');
})
1
2
3
4
5
6
7
8
9
10
11
12
13

减少了频繁catch的方法

# 参考fundebug

https://www.fundebug.com/

navigator.sendBeacon('xxx.php')

https://github.com/lgwebdream/zanePerfor

← 面向切面 →