window.onerror 不能捕获资源错误怎么办？
window.addEventListener
当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，这些 error 事件不会向上冒泡到 window，但能被捕获。而window.onerror不能监测捕获。
// 图片、script、css加载错误，都能被捕获 ✅
<script> window.addEventListener('error', (error) => {
console.log('捕获到异常：', error);
}, true) </script>
"https://yun.tuia.cn/image/kkk.png">
<script src="https://yun.tuia.cn/foundnull.js"></script>
<link href="https://yun.tuia.cn/foundnull.css" rel="stylesheet"/>
// new Image错误，不能捕获 ❌
<script> window.addEventListener('error', (error) => {
console.log('捕获到异常：', error);
}, true) </script>
<script> new Image().src = 'https://yun.tuia.cn/image/lll.png' </script>
// fetch错误，不能捕获 ❌
<script> window.addEventListener('error', (error) => {
console.log('捕获到异常：', error);
}, true) </script>
<script> fetch('https://tuia.cn/test') </script>
new Image运用的比较少，可以单独自己处理自己的错误。
但通用的fetch怎么办呢，fetch返回Promise，但Promise的错误不能被捕获，怎么办呢？
Promise错误
普通Promise错误
try/catch不能捕获Promise中的错误
// try/catch 不能处理 JSON.parse 的错误，因为它在 Promise 中
try {
new Promise((resolve,reject) => {
JSON.parse('')
resolve();
})
} catch(err) {
console.error('in try catch', err)
}
// 需要使用catch方法
new Promise((resolve,reject) => {
JSON.parse('')
resolve();
}).catch(err => {
console.log('in catch fn', err)
})
async错误
try/catch不能捕获async包裹的错误
const getJSON = async () => {
throw new Error('inner error')
}
// 通过try/catch处理
const makeRequest = async () => {
try {
// 捕获不到
JSON.parse(getJSON());
} catch (err) {
console.log('outer', err);
}
};
try {
// try/catch不到
makeRequest()
} catch(err) {
console.error('in try catch', err)
}
try {
// 需要await，才能捕获到
await makeRequest()
} catch(err) {
console.error('in try catch', err)
}
