温故知新(六四)项目中如何进行异常捕获

tech2022-11-26  89

项目中如何进行异常捕获

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

答案:

一、代码执行的异常捕获

1.try ...... catch

能捕获到代码执行的错误

捕获不到语法的错误

无法处理异步中的错误

使用 try......catch 包裹影响代码的可读性

2.window.onerror

无论是异步还是非异步错误,onerror 都能捕获到运行时的错误

onerror 主要是来捕获预料之外的错误,而 try..catch 则是用来在科预见情况下监控特定的错误,两者结合使用更加高效

window.onerror 函数只有在返回 true 时,异常才不会向上抛出,否则即使是知道异常的发生控制台还是会显示 Uncaught Error:xxx

当我们遇到 <img src="./404.jpg" /> 报 404 网络请求异常的时候,onerror  是无法帮助我们捕获到异常的。

缺点:监听不到资源加载的报错,onerror 事件处理函数只能声明一次,不会重复执行多个回调

3.window.addEventListener('error') 可以监听到资源加载报错,也可以注册多个事件处理函数

window.addEventListener('error',(msg,url,row,col,error)=>{},true)

但是这种方式虽然可以捕获网络请求的异常,却无法判断 HTTP 的状态是 404 还是其他的比如 500 等等,所以还需要配合服务端日志才进行排查分析才可以。

4.window.addEventListener('unhandledrejection')

捕获 Promise 错误,当 Promise 被 reject 且没有 reject 处理的时候,会触发 unhandledrejection 事件,这可能发生在 window 下,但也可能发生在 worker 中,这对于调试回退错误非常有用。

二、资源加载的错误捕获

1. imgObje.onerror()

2. performance.getEntries(),获取到成功加载的资源,对比可以间接的捕获错误

3. window.addEventListener('error', fn, true),会捕获到但不冒泡,所以 window.onerror 不会触发,捕获阶段可以触发

三、Vue,React中

Vue 有 errorHandler,React 有 componentDidCatch 进行错误捕获

 

 

 

 

最新回复(0)