ErrorBoundary

ErrorBoundary.tsx

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor() {
    super();

    this.state = {
      error: null,
      errorInfo: null,
    };
  }

  static getDerivedStateFromError() {
    return { error: true };
  }

  componentDidCatch(error, info) {
    this.setState({
      error,
      errorInfo: info
    });
  }

  render() {
    const { error, errorInfo } = this.state;

    const { children } = this.props;

    if (error) {
      return (
        <React.Fragment>
          <h1>Something went wrong!</h1>

          {
            __DEV__
              ? (
                // show more details only when in development 
                <details>
                  <pre>{error && error.toString()}</pre>
                  <br />
                  <pre>{errorInfo && errorInfo.componentStack}</pre>
                </details>
              )
              : (
                null
              )
          }

        </React.Fragment>
      )
    }
  }
}