JavaScript error浏览器端错误捕获处理方法笔记解决示例
更新时间:2023年06月05日 14:41:14 作者:specialCoder
这篇文章主要为大家介绍了JavaScript error浏览器端错误捕获处理方法笔记解决示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
summary
- window.onerror 无法捕获 onunhandledrejection 错误
- try...catch 无法捕获异步错误,包括 setTimeout 和 promise。可以捕获 async...await 错误
- promise 被 rejected,在有 onRejected 的情况下,onRejected 发挥作用,catch 并未被调用;在没有onRejected 的情况下 catch 发挥作用
- onResolve 和 onRejected 里的错误,可以被后面的 catch 捕获,无法被 try...catch 捕获
other
- try...catch 也无法捕获语法错误
- 如果想使用 window.onerror 函数消化错误,需要显示返回 true,以保证错误不会向上抛出,控制台也就不会看到一堆错误提示。
- 跨域之后 window.onerror 在很多浏览器中是无法捕获异常信息的。要统一返回 Script error,这就需要 script 脚本设置为:
crossorigin="anonymous" - 处理网络加载错误:使用 window.addEventListener('error') 方式对加载异常进行处理。注意这时候我们无法使用 window.onerror 进行处理, 因为 window.onerror 事件是通过事件冒泡获取 error 信息的,而网络加载错误是不会进行事件冒泡的。
- 怎么区分网络资源加载错误和其他一般错误:普通错误的 error 对象中会有一个 error.message 属性,表示错误信息,而资源加载错误对应的 error 对象却没有,
test code
window.onerror = () => { console.log('window.onerror')} window.onunhandledrejection = () => { console.log('window.onunhandledrejection') } const fetchDataSuccess = () => Promise.resolve({ name:'123'}) const fetchDataFail = () => Promise.reject({ name:'123'}) const testTryCatch = async() =>{ try{ // Promise.reject('reject') // throw Error('err') await fetchDataFail() console.log('fetch success') } catch(e){ console.log('catch error:',e) } } const testPromiseError = () => { try{ new Promise((resolve, reject) => { throw new Error() // resolve({}) }).then( () => { console.log('resolved') // throw Error() }, err => { console.log('rejected') throw err }) // .catch(err => { // console.log('catch') // }) }catch(e){ console.log('testPromiseError try-catch') } } // testTryCatch(); // testPromiseError();
from: https://fe.mbear.top/xing-neng-you-hua/032-xing-neng-jian-kon...
以上就是浏览器端错误捕获处理方法笔记解决示例的详细内容,更多关于浏览器端错误捕获的资料请关注脚本之家其它相关文章!
相关文章
JavaScript根据CSS的Media Queries来判断浏览设备的方法
这篇文章主要介绍了JavaScript根据CSS的Media Queries来判断浏览设备的方法,主要思路是通过CSS Media Queries改变一个类的某个属性值(例如 z-index),然后用JavaScript读取判断,需要的朋友可以参考下2016-05-05
最新评论