ErrorBoundary.jsx

import React from "react";
import PropTypes from "prop-types";
import { setDisplayName } from "recompose";
import compose from "recompose/compose";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import RequestParams from "../../redux/api/RequestParams";
import getActions from "../../redux/api/getActions";
import APP_ROUTES from "../../config/appRoutes";
import AlertService from "../../services/AlertService";

function clear() {
  return {
    error: null,
    errorInfo: null
  };
}

/**
 * Component to act as an error boundary, to prevent the app from deep unrecoverable crashes.
 */
class ErrorBoundary extends React.Component {
  state = clear();

  componentDidCatch(error, errorInfo) {
    // Catch errors in any components below and re-render with error message
    this.setState({
      error,
      errorInfo
    });

    const data = "stack" in error ? { componentStack: error.stack } : errorInfo;

    const params = RequestParams.Builder.withData(data).build();
    this.props.logErrorOnServer(params);
  }

  render() {
    const { error, errorInfo } = this.state;
    // In case of error
    if (errorInfo) {
      // eslint-disable-next-line no-console
      console.log(error, errorInfo);
      AlertService.open({
        info: false,
        title:
          "Une erreur inconnue c'est produite dans l'application. Nous vous prions de nous en excuser.",
        description:
          "Nous vous invitons à recharger la page. Si l'erreur persiste, merci de contacter les administrateurs du site; l'erreur leur a été transmise.",
        agreeText: "C'est noté, je sais que vous faîtes de votre mieux :)",
        disagreeText: "Retourner à l'accueil",

        handleResponse: agreed => {
          this.setState(clear());
          // May need to click twice, but there seem to be no other ways
          if (!agreed) this.props.history.push(APP_ROUTES.base);
        }
      });

      return <></>;
    }

    // Normally, just render children
    return this.props.children;
  }
}

ErrorBoundary.propTypes = {
  children: PropTypes.node.isRequired,
  logErrorOnServer: PropTypes.func.isRequired,
  history: PropTypes.object.isRequired
};

const mapDispatchToProps = dispatch => ({
  logErrorOnServer: params =>
    dispatch(getActions("frontendErrors").create(params))
});

const ConnectedErrorBoundary = compose(
  connect(
    () => ({}),
    mapDispatchToProps
  ),
  withRouter
)(ErrorBoundary);

/**
 * HOC (higher order component) wrapper to provide an error boundary to the sub components.
 *
 * @returns {function(*): function(*): *}
 */
// eslint-disable-next-line import/prefer-default-export
export function withErrorBoundary() {
  return Component =>
    setDisplayName("error-boundary")(
      // We need to forward the ref otherwise the styles are not correctly applied.
      // eslint-disable-next-line react/display-name
      React.forwardRef((props, ref) => (
        <ConnectedErrorBoundary>
          <Component {...props} ref={ref} />
        </ConnectedErrorBoundary>
      ))
    );
}