0

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

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

代码组件 2：

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

在开发过程中，我得到一个正常的“死亡红屏”，它告诉我“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
  • 反应原生：55.4
  • ReactNavigation：尝试使用 1.6.0 和 2.18.2
  • 错误：2.12.4
4

1 回答 1

3

对于任何有同样问题的人。它与 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()
            }
        ]
    );
};
于 2018-11-27T10:07:20.303 回答