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

…undar
Expensify · Aug 25, 2023 · 11473bd · 11473bd
1 parent 0b7ae7f
commit 11473bd
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/components/ErrorBoundary/BaseErrorBoundary.js b/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,28 @@ 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}
+ * @param {Object=} props
+ * @return {null}
  */
-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(props) {
+    const caughtError = (error, errorInfo) => {
+        props.logError(props.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={caughtError}
+        >
+            {props.children}
+        </ErrorBoundary>
+    );
 }
 
 BaseErrorBoundary.propTypes = propTypes;
 BaseErrorBoundary.defaultProps = defaultProps;
+BaseErrorBoundary.displayName = 'BaseErrorBoundary';
 
 export default BaseErrorBoundary;
diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/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,12 @@ import * as StyleUtils from '../../styles/StyleUtils';
 
 const propTypes = {
     ...withLocalizePropTypes,
-
-    /** Callback to call on refresh button click */
-    onRefresh: PropTypes.func.isRequired,
 };
 
 function GenericErrorPage(props) {
+    // resetBoundary request the nearest error boundary retry the render that original failed
+    const {resetBoundary} = useErrorBoundary();
+
     return (
         <SafeAreaConsumer>
             {({paddingBottom}) => (
@@ -59,15 +59,15 @@ function GenericErrorPage(props) {
                                     <Button
                                         success
                                         medium
-                                        onPress={props.onRefresh}
+                                        onPress={resetBoundary}
                                         text={props.translate('genericErrorPage.refresh')}
                                         style={styles.mr3}
                                     />
                                     <Button
                                         medium
                                         onPress={() => {
                                             Session.signOutAndRedirectToSignIn();
-                                            props.onRefresh();
+                                            resetBoundary();
                                         }}
                                         text={props.translate('initialSettingsPage.signOut')}
                                     />