How error boundaries catch errors

It appears that error boundaries are meant to catch runtime errors that prevent rendering to finish successfully. Hence, they are very specific to React and are implemented using a special life cycle hook of the class component.

Let's discuss the previously mentioned error boundaries limitations further:

• Event handlers: This limitation is due to event handlers asynchronous nature. Callbacks are being invoked by an external function, and the event object is passed to a callback as a parameter. We do not have any control over this and when this will happen. The code is executed and never goes into the catch clause. Hint: This also impacts try-catch in the same way.
• Asynchronous code: Most asynchronous code will not work with error boundaries. The exception to this rule is asynchronous render functions, which will come with future releases of React.
• Server-side rendering: This usually concerns server-side rendered websites. Such websites are computed on the server and sent to the browser. Thanks to this, a user can immediately see the website's content. Most of the time, such server responses are cached and reused.
• Errors thrown in the error boundary itself: You cannot catch errors that occur within the same class component. Hence, error boundaries should contain as little logic as possible. I always recommend using a separate component for them.