Easier debugging when a component fails to render

[itsderek23]

When a component fails to render in experiment mode, it looks like this on the canvas:

(A red-shaded rectangle with an X). No error information is displayed alongside the broken component.

Enabling the JS console

The best way I've found to debug is to enable the web console and watch for JS errors. They do appear here. For example, see this log output when loading experiment mode w/a broken component. The critical portion:

Uncaught ReferenceError: blah is not defined
    Button Button.js:7

There is also this message, which is helpful:

The above error occurred in the <Button> component:
    in Button (created by i)
    in i (created by u)
    in u
    in UXPinWrapper

However, it is a 222-line file w/some duplication of the error message.

Storybook Error Handling

Storybook renders the error right in the UI. However, it is hard to track the error to a component JS as just the bundle is referenced:

Proposal

It'd be great if it was possible to display rendering errors for the component somewhere within our UI (versus the error console). For example, the properties panel when clicking on a component.