React异常处理

React异常处理

项目本地开发使用的是umi，开发时报错会直接在页面上展示报错信息，但是项目打包上开发或者测试环境的时候，有报错信息有时候不白屏，有时候白屏，这就有点让我费解。后面研究了一下，之前的代码很多逻辑是写在了dva的model中的，如果有异常抛出的话，会被dva自带的异常捕获处理掉，所以不会中断掉js的执行，但是在组件内部写的代码，有错误的话（比如请求异常）这样在组件中没有对这些异常进行处理的话就会导致js中断执行，于是渲染函数还没执行完，就白屏了。

那如何解决这个问题呢？目前我给出的有两种方法：一是使用js自带的异常处理方法（window.onerror, try-catch等)来处理异常，让组件不会被异常中断，能够正常渲染。二是使用React的错误边界组件(ErrorBoundary)，处理子组件抛出的异常，并降级渲染。

遗憾的是，error boundaries并不会捕捉这些错误：

• 事件处理程序
• 异步代码 (e.g. setTimeout or requestAnimationFrame callbacks)
• 服务端的渲染代码
• error boundaries自己抛出的错误

但前两个错误并不是在渲染函数中发生的，这样并不会让浏览器白屏，仅针对渲染函数执行时抛出的错误进行处理，可以减轻不少工作量。但是严格点来说，有错误肯定还是要处理的，至于要如何更好的处理，后面再继续探索…