Web前端错误监控

脚本运行时错误捕获

• window.onerror 监听全局错误发生，发生错误会阻止后续的脚本运行

window.onerror = err => {}
a 
console.log(1) // 不会运行

• try - catch 捕获try代码块里的错误，不会影响后续的代码运行

try { a } catch (err) {}
console.log(1) // 1

资源加载错误

• Object.onerror 只能在创建时监听单个元素的error事件

let script = document.createElement('script');
script.onerror = err=>{
    console.log(err)
}
script.src = '2.js';
document.body.append(script);

// 不行
<script src="2.js" id='js'></script>
<script>
    document.querySelector("#js").onerror = err=>{
        console.log(err)
    }
 </script>

• performance.getEntries() 返回资源加载成功的元素数组。现代化浏览器都支持，IE9不支持
• window.addEventListener 监听全局错误的发生，包括运行时错误和资源加载错误

window.addEventListener('error',err=>{
    console.log(err)
},true)
let script = document.createElement('script');
script.src = '2.js';
document.body.append(script);

总结

监控到错误我们可以发送到服务器（视业务而定），这样我们就可以知道在不同用户环境下发生的错误，然后重现错误，修复。