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...