ErrorBoundary Example (old, do it differently with functional components everywhere, hooks, etc)

__README.md

This is pretty old now, and I'll likely do it a lot different these days.

errorboundary-example.markdown

ErrorBoundary Example

A Pen by Tamara Temple on CodePen.

License.

index.html

<div id="root"></div>

script.babel

class ErrorBoundary extends React.Component {
  state = {
    hasError: false
  }

  componentDidCatch(error, info) {
    this.setState({
      hasError: true,
      error,
      info
    })
  }

  reset = () => {
    this.setState({
      hasError: false,
      error: undefined,
      info: undefined
    })
  }
  
  render() {
    if (this.state.hasError) {
      return (<Whoops error={this.state.error} reset={this.reset} />)
    }
    
    return (<RegularContent />)
  }
}

class RegularContent extends React.Component {
  
  state = {
    hasError: false
  }
  
  throwInTheTowel = () => {
    return new Promise((res, rej) => {
      rej(new Error("I'm done!"))
    }).then(() => {})
    .catch(error => {
      this.setState({
        hasError: true,
        error
      })
    })
  }

  throwItInLater = () => {
    return new Promise((res, rej) => {
      setTimeout( () => {
        rej(new Error("okay, well now I'm done"))
      }, 1000)
    }).then(() => {})
    .catch(error => {
      this.setState({
        hasError: true,
        error
      })
    })
  }
  
  render() {
    // ErrorBoundary's componentDidCatch won't catch the errors above until they are exposed back
    // here. It's a little bit weird.
    if (this.state.hasError) throw this.state.error
    
    return (
      <div>
        <button onClick={this.throwInTheTowel}>Throw in the Towel</button>
        <br />
        <button onClick={this.throwItInLater}>Throw it later</button>
      </div>
    )
  }
}


class Whoops extends React.Component {
  render() {
    return (
      <div>
        <h1>Whoops</h1>
        <p>{this.props.error.message}</p>
        <button onClick={this.props.reset}>Reset</button>
      </div>
      
    )
  }
}


ReactDOM.render(<ErrorBoundary />, document.getElementById("root"))

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>