ENH add react boundary to catch rendering errors

[Charlie-XIAO]

Previously, errors within React functional components cannot be caught properly, e.g. this widget. They will thus not be displayed on the canvas which is undesired.

This PR wraps each user widget component with an error boundary using react-error-boundary, which is recommended in the docs. The rendering would look like this:

Note, however, that the error will still exist in the console (xref facebook/react#15069). May not matter that much for end users, but would be somehow annoying for debugging if it keeps spamming up the console.

Some other arguable points of this PR are:

• Is grabErrorInfo put in the right place? Is it correct to have two utils module organized like this?
• Is the title "Rendering error caught by the React error boundary" proper? And perhaps we want to reconsider other error titles at some point when the UI of the canvas is improved.

[ROMEEZHOU]

For the naming of the title, perhaps 1. also show the id of the widget; 2. use a more intuitive expression than "error boundary" (cause one may not know what error boundary specifically means?)

[Charlie-XIAO]

For the naming of the title, perhaps 1. also show the id of the widget; 2. use a more intuitive expression than "error boundary" (cause one may not know what error boundary specifically means?)

Valid points. I've updated all existing error messages to be consistent, reflect the widget ID, and be as user-friendly and accurate as possible. (We may update them again in the future when the framework gets updated or when we finds out corner cases via frontend tests.)

[ROMEEZHOU]

LGTM