React之错误边界 Error Boundaries示例详解
作者:三年没洗澡
引言
过去,组件内的代码异常会导致 React 的内部状态被破坏,产生可能无法追踪的错误。但 React 并没有提供一种优雅处理这些错误的方式,也无法从错误中恢复。
默认情况下,若一个组件在渲染期间(render)发生错误,会导致整个组件树全部被卸载,这当然不是我们期望的结果。
部分组件的错误不应该导致整个应用崩溃。为了解决这个问题,React 16 引入了一个新的概念 —— 错误边界
错误边界是一种 React 组件,这种组件可以捕获发生在其子组件树任何位置的异常,并打印这些错误,同时展示降级 UI,而并不会渲染那些发生崩溃的子组件树。
注意
- 错误边界目前只在
Class Component
中实现了,没有在hooks
中实现(因为Error Boundaries的实现借助了this.setState可以传递callback的特性,useState无法传入回调,所以无法完全对标); - 错误边界 无法捕获 以下四种场景中产生的错误:
- 事件处理函数(因为 Error Boundaries 实现的本质是触发更新,但是事件处理函数不在render或者commit阶段,所以无法进行捕获,如果你需要在事件处理器内部捕获错误,可以使用原生的
try
/catch
语句 了解更多) - 异步代码(例如
setTimeout
或requestAnimationFrame
回调函数) - 服务端渲染(因为触发更新只能在客户端进行,不能在serve端进行)
- 它自身抛出来的错误(因为错误抛出要向父节点冒泡寻找 Error Boundaries 处理,无法处理自身产生的错误)
- 事件处理函数(因为 Error Boundaries 实现的本质是触发更新,但是事件处理函数不在render或者commit阶段,所以无法进行捕获,如果你需要在事件处理器内部捕获错误,可以使用原生的
实现
React中提供了两个与错误处理相关的api:
getderivedstatefromerror
:静态方法,当错误发生后,提供一个机会渲染 Fallback UIcomponentDidCatch
:组件实例方法,当错误发生后,提供一个机会记录错误信息
如果一个 class 组件中定义了 getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个(或两个)时,那么它就变成一个错误边界。当抛出错误后,请使用 getDerivedStateFromError()
渲染备用 UI ,使用 componentDidCatch()
打印错误信息。
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, }; } getDerivedStateFromError(error) { // 更新 state 使下一次渲染能够显示降级后的 UI return { hasError: true }; } componentDidCatch(error, errorInfo) { // 你同样可以将错误日志上报给服务器 logErrorToService(error, errorInfo); } render() { if (this.state.hasError) { // 你可以自定义降级后的 UI 并渲染 return <h1>wrong message</h1>; } return this.props.children; } } export default ErrorBoundary;
然后你可以将它作为一个常规组件去使用:
<ErrorBoundary> <A /> <B /> <C /> </ErrorBoundary>
错误边界的工作方式类似于原生的 catch {}
,不同的地方在于,错误边界只针对 React 组件。并且只有 class 组件才可以成为错误边界组件。大多数情况下, 你只需要声明一次错误边界组件, 并在整个应用中使用它。
错误边界应该放置在哪?
错误边界的粒度由你来决定,可以将其包装在最顶层的路由组件中,并为用户展示一个 “xxx” 的错误信息,就像服务端框架经常处理崩溃一样。也可以将单独的组件包装在错误边界,从而保护其它组件不会崩溃。(例如,Facebook Messenger 将侧边栏、信息面板、聊天记录以及信息输入框包装在单独的错误边界中。如果其中的某些 UI 组件崩溃,其余部分仍然能够交互。)
未捕获错误(Uncaught Errors)该如何处理?
自 React 16 起,任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载。
在某些场景下,把一个错误的 UI 留在那,比完全移除它要更糟糕。比如在类似 Messenger 的产品中,把一个异常的 UI 展示给用户,可能会导致用户把错误信息发给别人。同样,对于支付类场景而言,与其显示错误的支付金额,不如直接让页面白屏。
(所以,错误边界的使用难点在于寻找合适的时机
,知道在什么时候该用
,什么时候不该用
,这是一个充满哲学的问题)
注意:自 React 15 的命名更改
React 15 中有一个支持有限的错误边界方法 unstable_handleError
。这个方法不再起作用,自 React 16 起你需要在代码中将其修改为 componentDidCatch
。
以上就是React之错误边界 Error Boundaries示例详解的详细内容,更多关于React 错误边界的资料请关注脚本之家其它相关文章!