反应导航防止应用程序在发布版本中崩溃

Question

我的 react-native 应用程序有一个非常奇怪的行为。我追踪到一个最小的例子。

我有一个带有两个组件的 SwitchNavigator。第一个组件除了在 2000 毫秒后导航到第二个组件外什么都不做。第二个组件在渲染方法中有一个错误（例如它试图渲染一些未定义的东西"test.error"）。

代码组件 2：

render = () => {
    return (
        <View>
            {
                test.error
            }
        </View>
    )
}

在开发过程中，我得到一个正常的 "redscreen of death"，它告诉我 "ReferenceError: ReferenceError: test is not defined"。这是预期的行为。但在发布版本中，应用程序静默失败，只显示一个空白屏幕。没有应用程序崩溃。

更多信息：相同的应用程序确实在发布版本中崩溃（如预期的那样），当在组件安装后显示错误部分时。

组件 2 - 按预期崩溃：

class Test extends Component {
    state = {
        error: false
    };

    componentDidMount = () => {
        setTimeout(() => {
            this.setState({error: true});
        }, 0)
    };

    render = () => {
        if (this.state.error) {
            return (
                <View>
                    {
                        test.error
                    }
                </View>
            )
        } else {
            return (
                <View>
                    Test
                </View>
            )
        }
    }
}

附加信息：

当我使用组件 2 作为最初调用的组件时，我的应用程序确实按预期崩溃了。好像只有导航后不会崩溃。
行为与 StackNavigator 相同

版本：

反应：16.3.1
ReactNative：55.4
ReactNavigation：尝试使用 1.6.0 和 2.18.2
漏洞：2.12.4

Answer 1

对于遇到同样问题的任何人。它与 bugsnag 或 react-navigation 无关。

问题是，渲染方法中的错误不会使应用程序在发布模式下硬崩溃。我认为原因在于 React 16 和 ErrorBoundary 特性。

我的解决方案是在我的 App.js 中添加一个 ErrorBoundary（参见 https://reactjs.org/docs/error-boundaries.html）。在这里，我现在能够处理错误并将其报告给 bugsnag。

componentDidCatch = (e, message) => {
    bugsnag.notify(e);
    Alert.alert(
        I18n.t('GLOBAL__FATAL_ERROR'),
        I18n.t('GLOBAL__FATAL_ERROR_MESSAGE'),
        [
            {
                text: I18n.t('GLOBAL__FATAL_ERROR_RESTART'),
                onPress: () => BackHandler.exitApp()
            }
        ]
    );
};

反应导航防止应用程序在发布版本中崩溃

react-navigation preventing application from crash in release build

android

react-native

react-navigation

bugsnag