Explore use of Error Boundaries

[interactivellama]

This is a good feature for consumers. It prevents their entire application from crashing/unmounting if there are errors inside library components. Since most of our components are ES6 classes at their top level, implementing this as part of the class should be straight forward.

We can probably use the existing log utility. https://github.com/salesforce/design-system-react/blob/master/utilities/log.js#L1

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo);
  }

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

    return this.props.children; 
  }
}

More information at https://reactjs.org/docs/error-boundaries.html