text: import React from 'react';
  import PropTypes from 'prop-types';
  import BootSplash from '../../libs/BootSplash';
  import GenericErrorPage from '../../pages/ErrorPage/GenericErrorPage';
  
  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};
          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));
  
          // 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;
      }
  }
  
  BaseErrorBoundary.propTypes = propTypes;
  BaseErrorBoundary.defaultProps = defaultProps;
  
  export default BaseErrorBoundary;
  