Error Boundaries - Overview

Description

• JavaScript errors within Components can corrupt an entire App
• Boundaries place a container around errors to prevent propagation
• Child components errors are caught and contained
• Fallback UI can be rendered on error

Limitations

• Only catch errors below themselves in the Render tree
• Cannot catch
  • Errors in Event handlers
  • Asyncronous code such as setTimeout or requestAnimationFrame
  • React pages generated on the Server
  • Errors from the ErrorBoundary itself

Error Boundaries - Creation

• Any component can be a boundary if defines componentDidCatch
• componentDidCatch behaves like JavaScript catch {}
• Only React Class components can be Boundaries

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Error Boundaries - componentDidCatch

• error is a JavaScript error object
• info is a JavaScript object with componentStack
  • Holds information about the component stack at the time of error
• Can be used as a top level wrapper, or many small error wrappers

componentDidCatch(error, info) {

  /* Example stack information:
     in ComponentThatThrows (created by App)
     in ErrorBoundary (created by App)
     in div (created by App)
     in App
  */
  logComponentStackToMyService(info.componentStack);
}

CodePen

Error Boundaries - Within Event Handlers

• Event handlers are just normal JavaScript
• Use regular try/catch syntax

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  handleClick = () => {
    try {
      // Do something that could throw
    } catch (error) {
      this.setState({ error });
    }
  }

  render() {
    if (this.state.error) {
      return <h1>Caught an error.</h1>
    }
    return <div onClick={this.handleClick}>Click Me</div>
  }
}

Error Boundaries - Live Example

See the Pen oMRpQg by Joshua Burke (@Dangeranger) on CodePen.

Error Boundaries - Stack Traces

Default

With Create-React-App