[NO QA]Feature: Critical Error Handling

src/App.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import CustomStatusBar from './components/CustomStatusBar';
+import ErrorBoundary from './components/ErrorBoundary';
 import Expensify from './Expensify';
 
 const App = () => (
     <SafeAreaProvider>
         <CustomStatusBar />
-        <Expensify />
+        <ErrorBoundary errorMessage="E.cash crash caught by error boundary">
+            <Expensify />
+        </ErrorBoundary>
     </SafeAreaProvider>
 );
 

src/components/ErrorBoundary/BaseErrorBoundary.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /* A message posted to `logError` (along with error data) when this component intercepts an error */
+    errorMessage: PropTypes.string.isRequired,
+
+    /* A function to perform the actual logging since different platforms support different tools */
+    logError: PropTypes.func,
+
+    /* Actual content wrapped by this error boundary */
+    children: PropTypes.node.isRequired,
+};
+
+const defaultProps = {
+    logError: () => {},
+};
+
+/**
+ * This component captures an error in the child component tree and logs it to the server
+ * It can be used to wrap the entire app as well as to wrap specific parts for more granularity
+ * @see {@link https://reactjs.org/docs/error-boundaries.html#where-to-place-error-boundaries}
+ */
+class BaseErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {hasError: false};
+    }
+
+    static getDerivedStateFromError() {
+        // Update state so the next render will show the fallback UI.
+        return {hasError: true};
+    }
+
+    componentDidCatch(error, errorInfo) {
+        this.props.logError(this.props.errorMessage, error, errorInfo);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            // For the moment we've decided not to render any fallback UI
+            return null;
+        }
+
+        return this.props.children;
+    }
+}
+
+BaseErrorBoundary.propTypes = propTypes;
+BaseErrorBoundary.defaultProps = defaultProps;
+
+export default BaseErrorBoundary;

src/components/ErrorBoundary/index.js

@@ -0,0 +1,9 @@
+import BaseErrorBoundary from './BaseErrorBoundary';
+import Log from '../../libs/Log';
+
+BaseErrorBoundary.defaultProps.logError = (errorMessage, error, errorInfo) => {
+    // Log the error to the server
+    Log.alert(errorMessage, 0, {error: error.message, errorInfo}, false);
+};
+
+export default BaseErrorBoundary;

src/components/ErrorBoundary/index.native.js

@@ -0,0 +1,16 @@
+import crashlytics from '@react-native-firebase/crashlytics';
+
+import BaseErrorBoundary from './BaseErrorBoundary';
+import Log from '../../libs/Log';
+
+BaseErrorBoundary.defaultProps.logError = (errorMessage, error, errorInfo) => {
+    // Log the error to the server
+    Log.alert(errorMessage, 0, {error: error.message, errorInfo}, false);
+
+    /* On native we also log the error to crashlytics
+    * Since the error was handled we need to manually tell crashlytics about it */
+    crashlytics().log(`errorInfo: ${JSON.stringify(errorInfo)}`);
+    crashlytics().recordError(error);
+};
+
+export default BaseErrorBoundary;

tests/unit/loginTest.js

@@ -9,6 +9,13 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import App from '../../src/App';
 
+/* <App> uses <ErrorBoundary> and we need to mock the imported crashlytics module
+* due to an error that happens otherwise https://github.com/invertase/react-native-firebase/issues/2475 */
+jest.mock('@react-native-firebase/crashlytics', () => () => ({
+    log: jest.fn(),
+    recordError: jest.fn(),
+}));
+
 describe('AppComponent', () => {
     it('renders correctly', () => {
         renderer.create(<App />);