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

项目中如何进行异常捕获

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

答案：

一、代码执行的异常捕获

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 进行错误捕获