ontime/client/src/common/components/errorBoundary/ErrorBoundary.jsx

/* eslint-disable react/destructuring-assignment */
import React from 'react';

import { version as appVersion } from '../../../../package.json';
import { LoggingContext } from '../../context/LoggingContext';

import style from './ErrorBoundary.module.scss';

class ErrorBoundary extends React.Component {
  static contextType = LoggingContext;
  reportContent = '';

  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Update state so next render shows fallback UI.
    return { errorMessage: error.toString() };
  }

  componentDidCatch(error, info) {
    this.setState({
      error: error,
      errorInfo: info,
    });
    try {
      this.context.emitError(error.toString());
    } catch (e) {
      console.log('Unable to emit error', error, e);
    }
    this.reportContent = `${error} ${info.componentStack}`;
  }

  render() {
    if (this.state.errorMessage) {
      return (
        <div className={style.errorContainer} data-testid='error-container'>
          <div>
            <p className={style.error}>:/</p>
            <p>Something went wrong</p>
            <div
              role='button'
              className={style.report}
              onClick={() => {
                if (navigator.clipboard) {
                  const copyContent = `ontime version ${appVersion} \n ${this.reportContent}`;
                  navigator.clipboard.writeText(copyContent);
                }
              }}
            >
              Copy error
            </div>
            <div
              role='button'
              className={style.report}
              onClick={() => {
                if (window?.process?.type === 'renderer') {
                  window.ipcRenderer.send('reload');
                } else {
                  window.location.reload();
                }
              }}
            >
              Reload interface
            </div>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;