前言

今天刚好看到掘金首页的文章，里面有关于错误边界的，所以想在RN中也来整一下，果然，又入坑了

想法

reactjs.org/blog/2017/0…

查看了错误边界的相关概念，主要想实现两点:

1.封装一个组件，可以在任意的界面引入，并处理单个页面的错误，显示占位图，譬如：很抱歉，页面崩溃了，之类的话，然后可以返回到上一页面
2.在根组件处理全局错误，提示错误信息，根据路由栈，如果非根页面，则返回上一页面

过程

首先在App.ts里面添加componentDidCatch方法，嗯，完全没问题，可以捕获到所有页面的错误,对话框显示出来了，然后跳转失效(NavigationHelper.goBack();里面的路由栈是全局的，此时的栈大小>1)

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    // console.log('componentDidCatch')
    Alert.alert('','错误了',[{text: '知道了',onPress:()=>{
      // CodePush.restartApp();
        NavigationHelper.goBack();
      }}]);
  }

  render() {
    const AppNavigator = this.props.AppNavigator;
    return (
      <View style={{flex: 1}}>
        ...
        {/*<ErrorBoundary message={'这是全局错误'} name={'app'}>*/}
        <AppNavigator
          onNavigationStateChange={(prevState, currentState, action) => {
            //这个是跳转了才去回调，所以不能利用routes来判断路由栈
            NavigationHelper.navRouters = currentState.routes;
          }}
        />
        {/*</ErrorBoundary>*/}
      </View>
    );

然后试下在单个页面中试验，完全没用，难道姿势有误，改为ErrorBoundary组件包裹的方式，依旧无效。不科学,从react-native到react-navigation里面的issues翻阅遍了,发现

github.com/react-navig…

说是解决了这个问题，但是我测试下还是不行，咱不知道为啥

结论

有些并不一定是完全准确，有可能是我导航设置的问题，但是所有都经过试验

1.默认情况下，RN抛出js错误，debug模式下会直接红屏，release模式下会直接闪退。
2.如果在根节点组件加入componentDidCatch方法，debug模式下依旧会红屏，但是此时点击Dismiss可以显示自定义的错误界面,release模式下，直接显示错误界面（来源:#15571）
3.app.js里面全局捕获错误后，导航失效了(至少是无法跳转了，该处的原因待查找)
4.在使用react-navigation的页面中，错误边界无效(原因待查找)
5.错误边界是无法捕获到原生错误的

目前可以实现的:

在根节点中捕获js错误，弹出对话框，然后重启app(重启app可以使用react-native-restart,或者如果安装了code-push的话，直接使用CodePush.restartApp())

React Native之错误边界 Error Boundaries

前言

想法

过程

结论

目前可以实现的: