Catch errors inside render

This is something I demoed in my React Europe talk but have not released yet.

Basically when you make a mistake inside render, React Hot Loader can catch the error and display a “red screen of death” inline instead of crashing your app:

There is a PR to React Hot API which is exactly what I showed at the conf, but before turning this into an officially supported feature, I want to make it more extensible. I want to make the error renderer customizable because we want to support React Native too. Some projects may want to make custom renderers that display the error on top of body instead on inline, etc.

Ideally it would be opt in, and the API would be something like react-hot-loader?reporter=npm-module-name where npm-module-name is some package that exports a React (or React Native) <Reporter> component as a default export. This component will be used as <Reporter error={e} /> by React Hot Loader, when specified.

Here is an example of such component by @KeywordBrain: https://github.com/KeywordBrain/redbox-react.

If somebody wants to take a stab at it, please do! (But let us know in this thread.)

If not, I’ll get around to implementing this in August.

[gaearon]

With React Hot Loader 3, we now have error reporting on initial mount. It doesn’t work for updates yet but I think it should once facebook/react#6020 lands. Keeping this issue open to track this.

[gregberge]

It is actually supported https://github.com/gaearon/react-hot-loader#adding-a-custom-error-reporter