【React篇】组件错误边界处理(组件错误引起的页面白屏)

我们知道在生产环境react错误会导致整个页面崩溃,显示为空白页面。

比如下图的错误,导致了左侧页面直接白屏:

由于某一个组件报错导致整个页面崩溃是很严重的问题,那么我们应该如何去降低代码报错带来的影响呢?

我们希望当页面的某一个组件发生报错时,不要影响到其他组件的显示,比如像下图所示的这种模式 。

通过上图可以看到,某一个组件报错了,但是页面的其他内容还是可以正常显示出来的,并没有受到影响。而实现这种效果就需要使用到异常边界了。

什么是异常边界?

异常边界是React 16以后推出的新特性,使用异常组件可以捕获子组件js的错误,并可以展示备用UI的class组件。

异常边界如何实现

下面代码实现了一个简单的异常边界组件,需要注意的是,异常边界组件必须使用class组件,不能使用函数式组件。

下面咱们举个例子封装一个异常边界组件:

javascript 复制代码
class ErrorWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
    };
  }

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
    };
  }

  componentDidCatch(error, errorInfo) {
    // 一些错误上报的操作
    // ......
  }

  render() {
    if (this.state.hasError) {
      return (
        <Result
          status="error"
          title="哇哦,出现了错误"
          subTitle="请联系管理员"
        ></Result>
      );
    }
    return this.props.children;
  }
}

export default ErrorWrapper;
怎么使用异常组件

只需要将组件作为ErrorWrapper的子组件来使用就可以了,如下代码:

javascript 复制代码
// 定义一个需要渲染的组件
const Child = () => {
  return <div>子组件</div>
}
const Child2 = () => {
  return <div>子组件2</div>
}


// 在父页面使用异常边界组件包裹该子组件
const Parent = () => {
  return <>
    <ErrorWrapper><Child /></ErrorWrapper>
    <ErrorWrapper><Child2 /></ErrorWrapper>
  </>
} 

有哪些限制

虽然异常捕获可以捕获子组件的错误,但是它还是存在一些限制,比如:

  1. 事件里面的报错
  2. 捕获不了异步代码(比如setTimeout,Promise)中的异常
  3. 捕获不了服务端渲染的错误
  4. 假如异常边界组件ErrorWrapper自身报错了,也不能被捕获

请大家根据自身业务需求选择性使用。

相关推荐
古一|29 分钟前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript
peachSoda731 分钟前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
@PHARAOH43 分钟前
HOW - 浏览器兼容(含 Safari)
前端·safari
undefined在掘金390411 小时前
flutter 仿商场_首页
前端
少卿1 小时前
react-native图标替换
前端·react native
熊猫钓鱼>_>1 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
JYeontu2 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_2 小时前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
盛夏绽放2 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
少卿2 小时前
React Native Vector Icons 安装指南
前端·react native