title: How to handle all unhandled errors in both sync and async operations in React?
body: <p>I've spent a bit of time recently trying to find a comprehensive and reliable way of handling errors in React for both sync and async operations. I'm using <code>React 15.5.4</code> and <code>TypeScript 2.4.1</code>. </p>
  
  <p>My goal is to catch errors in <strong>sync</strong> and <strong>async</strong> operations(lifecycle methods, event handlers) and display them in a <code>ErrorDisplay</code> component that is <strong>the closest parent</strong> of the component that triggered the error.</p>
  
  <p>This is what I have tried but none of the solutions seem to cover all edge cases:</p>
  
  <ul>
  <li><code>unstable_handleError</code> as per <a href="https://github.com/facebook/react/issues/2461#issuecomment-311077975" rel="nofollow noreferrer">https://github.com/facebook/react/issues/2461#issuecomment-311077975</a> handles only errors in <code>render</code>, does not handle errors in event handlers</li>
  <li>custom batch updater as per <a href="https://engineering.classdojo.com/blog/2016/12/10/catching-react-errors/" rel="nofollow noreferrer">https://engineering.classdojo.com/blog/2016/12/10/catching-react-errors/</a>, works in production only, doesn't seem to work with event handlers</li>
  </ul>
  
  <p>There is one more approach that I'm planning to try which is to wrap each method at runtime and use React context to pass information re where a given error needs to be displayed. I hesitate a bit to use this approach because React context API is still marked as experimental. </p>
  
  <p>Thoughts?</p>