react-navigation preventing application from crash in release build

Question

I have a really strange behavior in my react-native application. I tracked it down to a minimal example.

I have a SwitchNavigator with two Components. The first Component does nothing except navigating to the second component after 2000ms. The second Component has an error inside the render method (for example it tries to render some undefined stuff "test.error").

Code Component 2:

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

During development I get a normal "redscreen of death" which tells me "ReferenceError: ReferenceError: test is not defined". This is expected behavior. But in release build, the application fails silently and just displays a blank screen. No crash of application.

More Information: The same application does crash in release build (as expected), when the error part is displayed after the component did mount.

Component 2 - crashes as expected:

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>
            )
        }
    }
}

Additional information:

when I use Component 2 as the initially called Component, my application does crash as expected. It seems only not to crash after navigate.
The behavior is the same with StackNavigator

Versions:

React: 16.3.1
ReactNative: 55.4
ReactNavigation: tried with 1.6.0 and 2.18.2
Bugsnag: 2.12.4

score 3 · Accepted Answer · answered Nov 27 '18 at 10:07

For anybody having the same issue. It had nothing to do with bugsnag or react-navigation.

The problem was, that errors inside the render method do not hard crash the application in release mode. I think the reason lies in React 16 and the ErrorBoundary feature.

The resolution in my case was to add a ErrorBoundary in my App.js (see https://reactjs.org/docs/error-boundaries.html). Here I'm now able to handle the error and report it to 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

1 Answers1