Introduction to error boundaries

This is quite an overlooked feature that came with React version 16. As you should already know, JavaScript can throw errors. Such errors should not break your app, especially if it is from the financial sector. The regular imperative solution from JavaScript is a try-catch block:

try {
    // helloWorld function can potentially throw error
    helloWorld();
} catch (error) {
    // If helloWorld throws error
    // we catch it and handle gracefully
    // ...
}

This approach is hard to use with JSX. Hence, the React team developed an alternative solution for React views. It's called Error Boundaries. Any class component can become an ErrorBoundary component, given that it implements the componentDidCatch function:

class AppErrorBoundary extends React.Component {
    state = { hasError: false };

    componentDidCatch() {
        this.setState({ hasError: true });
    }

    render = () => (
        this.state.hasError
            ? <Text>Something went wrong.</Text>
            : this.props.children
    )
}

export default () => (
    <AppErrorBoundary>
        <LoginForm />
 </AppErrorBoundary>
)

LoginForm is now wrapped into ErrorBoundary. It catches any error that occurs while rendering LoginForm. If Error is caught, we display a short message stating that Something went wrong. We can get a real error message from the error object. However, it is not good practice to share it with the end user. Instead, send it to your analytics server:

// Chapter 2_View patterns/Example 11/ App.js
...
componentDidCatch(error) {
    this.setState({
        hasError: true,
        errorMsg: error
    });
}

render = () => (
    this.state.hasError
        ? (
            <View>
                <Text>Something went wrong.</Text>
 <Text>{this.state.errorMsg.toString()}</Text>
            </View>
        )
        : this.props.children
)
...