当前页面的脚本发生错误 一篇讲透自研的前端错误监控
// 控制台运行
fetch('/remote/notdefined', {})
搜集错误
所有起因来源于错误，那我们如何进行错误捕获。
try/catch
能捕获常规运行时错误，语法错误和异步错误不行
// 常规运行时错误，可以捕获 ✅
try {
console.log(notdefined);
} catch(e) {
console.log('捕获到异常：', e);
}
// 语法错误，不能捕获 ❌
try {
const notdefined,
} catch(e) {
console.log('捕获到异常：', e);
}
// 异步错误，不能捕获 ❌
try {
setTimeout(() => {
console.log(notdefined);
}, 0)
} catch(e) {
console.log('捕获到异常：',e);
}
try/catch有它细致处理的优势，但缺点也比较明显。
window.onerror
pure js错误收集，window.onerror，当 JS 运行时错误发生时，window 会触发一个 ErrorEvent 接口的 error 事件。
/**
* @param {String} message 错误信息
* @param {String} source 出错文件
* @param {Number} lineno 行号
* @param {Number} colno 列号
* @param {Object} error Error对象
*/
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕获到异常：', {message, source, lineno, colno, error});
}
先验证下几个错误是否可以捕获。
// 常规运行时错误，可以捕获 ✅
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕获到异常：',{message, source, lineno, colno, error});
}
console.log(notdefined);
// 语法错误，不能捕获 ❌
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕获到异常：',{message, source, lineno, colno, error});
}
const notdefined,
// 异步错误，可以捕获 ✅
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕获到异常：',{message, source, lineno, colno, error});
}
setTimeout(() => {
console.log(notdefined);
}, 0)
// 资源错误，不能捕获 ❌
<script>
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕获到异常：',{message, source, lineno, colno, error});
return true;
}
</script>
"https://yun.tuia.cn/image/kkk.png">
