ErrorBoundary Class — react Architecture

Source Code

fixtures/dom/src/components/fixtures/error-handling/index.js lines 21–53

class ErrorBoundary extends React.Component {
  static defaultProps = {
    buttonText: 'Trigger error',
    badChildType: BadRender,
  };
  state = {
    shouldThrow: false,
    didThrow: false,
    error: null,
  };
  componentDidCatch(error) {
    this.setState({error, didThrow: true});
  }
  triggerError = () => {
    this.setState({
      shouldThrow: true,
    });
  };
  render() {
    if (this.state.didThrow) {
      if (this.state.error) {
        return <p>Captured an error: {this.state.error.message}</p>;
      } else {
        return <p>Captured an error: {String(this.state.error)}</p>;
      }
    }
    if (this.state.shouldThrow) {
      const BadChild = this.props.badChildType;
      return <BadChild doThrow={this.props.doThrow} />;
    }
    return <button onClick={this.triggerError}>{this.props.buttonText}</button>;
  }
}