React 16 Error Boundary component (using componentDidCatch) shows uncaught error
The reason why nothing happens is that this is an error in an event handler, and these aren't caught by error boundaries. The error-handling blog post clarifies which errors are caught:
Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
Without error boundaries, those errors would be very tricky to catch (and in React 16, even lifecycle-method errors will make your entire app rendering disappear.)
EDIT: The actual docs are even more clear about which errors are caught. Also note that create-react-app
uses the react-error-overlay
package, which on dev-server builds replaces the entire rendering with an error screen after a brief moment. To better see your errors getting caught, you can run a production build.