converted baseErrorBoundary to function component with react-error-bo…

package.json

@@ -106,6 +106,7 @@
     "react-content-loader": "^6.1.0",
     "react-dom": "18.1.0",
     "react-map-gl": "^7.1.3",
+    "react-error-boundary": "^4.0.11",
     "react-native": "0.72.3",
     "react-native-blob-util": "^0.17.3",
     "react-native-collapsible": "^1.6.0",

src/components/ErrorBoundary/BaseErrorBoundary.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {ErrorBoundary} from 'react-error-boundary';
 import BootSplash from '../../libs/BootSplash';
 import GenericErrorPage from '../../pages/ErrorPage/GenericErrorPage';
 
@@ -22,40 +23,27 @@ const defaultProps = {
  * 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}
+ * @return {React.Component}
  */
-class BaseErrorBoundary extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {hasError: false};
-        this.clearError = this.clearError.bind(this);
-    }
-
-    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, JSON.stringify(errorInfo));
-
+function BaseErrorBoundary({logError, errorMessage, children}) {
+    const catchError = (error, errorInfo) => {
+        logError(errorMessage, error, JSON.stringify(errorInfo));
         // We hide the splash screen since the error might happened during app init
         BootSplash.hide();
-    }
-
-    clearError() {
-        this.setState({hasError: false});
-    }
-
-    render() {
-        if (this.state.hasError) {
-            return <GenericErrorPage onRefresh={this.clearError} />;
-        }
-
-        return this.props.children;
-    }
+    };
+
+    return (
+        <ErrorBoundary
+            fallback={<GenericErrorPage />}
+            onError={catchError}
+        >
+            {children}
+        </ErrorBoundary>
+    );
 }
 
 BaseErrorBoundary.propTypes = propTypes;
 BaseErrorBoundary.defaultProps = defaultProps;
+BaseErrorBoundary.displayName = 'BaseErrorBoundary';
 
 export default BaseErrorBoundary;

src/pages/ErrorPage/GenericErrorPage.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {View} from 'react-native';
+import {useErrorBoundary} from 'react-error-boundary';
 import Icon from '../../components/Icon';
 import defaultTheme from '../../styles/themes/default';
 import * as Expensicons from '../../components/Icon/Expensicons';
@@ -19,12 +19,11 @@ import * as StyleUtils from '../../styles/StyleUtils';
 
 const propTypes = {
     ...withLocalizePropTypes,
-
-    /** Callback to call on refresh button click */
-    onRefresh: PropTypes.func.isRequired,
 };
 
-function GenericErrorPage(props) {
+function GenericErrorPage({translate}) {
+    const {resetBoundary} = useErrorBoundary();
+
     return (
         <SafeAreaConsumer>
             {({paddingBottom}) => (
@@ -40,12 +39,12 @@ function GenericErrorPage(props) {
                                 />
                             </View>
                             <View style={styles.mb5}>
-                                <Text style={[styles.textHeadline]}>{props.translate('genericErrorPage.title')}</Text>
+                                <Text style={[styles.textHeadline]}>{translate('genericErrorPage.title')}</Text>
                             </View>
                             <View style={styles.mb5}>
                                 <ErrorBodyText />
                                 <Text>
-                                    {`${props.translate('genericErrorPage.body.helpTextConcierge')} `}
+                                    {`${translate('genericErrorPage.body.helpTextConcierge')} `}
                                     <TextLink
                                         href={`mailto:${CONST.EMAIL.CONCIERGE}`}
                                         style={[styles.link]}
@@ -59,17 +58,17 @@ function GenericErrorPage(props) {
                                     <Button
                                         success
                                         medium
-                                        onPress={props.onRefresh}
-                                        text={props.translate('genericErrorPage.refresh')}
+                                        onPress={resetBoundary}
+                                        text={translate('genericErrorPage.refresh')}
                                         style={styles.mr3}
                                     />
                                     <Button
                                         medium
                                         onPress={() => {
                                             Session.signOutAndRedirectToSignIn();
-                                            props.onRefresh();
+                                            resetBoundary();
                                         }}
-                                        text={props.translate('initialSettingsPage.signOut')}
+                                        text={translate('initialSettingsPage.signOut')}
                                     />
                                 </View>
                             </View>