Add a smart error handling component.

[ctrlplusb]

I built one for a client project, it's kind a meld of a few tools out there to give a nice error overlay that prints errors with stacktraces. Super helpful when developing components as unhandled errors during the react render process are obscure at best.

[birkir]

Cool, would love to get more details. I found react-safe-render when searching for react error handling component, but I think you mean something else, something similar to react-redbox 👍

[ctrlplusb]

Yeah, sure thing, I am combining a few different libraries, creating a HOC that can be easily used -and that only activates for development mode (else it just returns the original component). So I recommend that it be used to wrap EVERY component.

It's very similar to redbox-react in how it displays errors, however, it's much better at interpreting available sourcemaps giving you exact line numbers.

For example, I switched out my component with react redbox for the exact same code error (no other code changes).

redbox displayed the following stacktrace:

http://localhost:7331/client/index.js:8213:30
Array.map
(native)
Files.render
http://localhost:7331/client/index.js:8210:21
Files.render
http://localhost:7331/client/index.js:10077:29
http://localhost:1337/client/__dev_vendor_dll__.js?t=1489407620018:92664:21
measureLifeCyclePerf
http://localhost:1337/client/__dev_vendor_dll__.js?t=1489407620018:91943:12
ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext
http://localhost:1337/client/__dev_vendor_dll__.js?t=1489407620018:92663:25
ReactCompositeComponentWrapper._renderValidatedComponent
http://localhost:1337/client/__dev_vendor_dll__.js?t=1489407620018:92690:32
ReactCompositeComponentWrapper._updateRenderedComponent
http://localhost:1337/client/__dev_vendor_dll__.js?t=1489407620018:92614:36
ReactCompositeComponentWrapper._performComponentUpdate
http://localhost:1337/client/__dev_vendor_dll__.js?t=1489407620018:92592:10

Whilst mine produces:

fileId()@webpack:///shared/components/App/lib/Files/index.js:100:47
Array.map()@(native)
map()@webpack:///shared/components/App/lib/Files/index.js:99:26
render()@webpack:///~/react-poop/dist/poop.js:34:28
{anonymous}()@http://localhost:1337/client/__dev_vendor_dll__.js?t=1489407894121:92664:21
measureLifeCyclePerf()@http://localhost:1337/client/__dev_vendor_dll__.js?t=1489407894121:91943:12
ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext()@http://localhost:1337/client/__dev_vendor_dll__.js?t=1489407894121:92663:25
ReactCompositeComponentWrapper._renderValidatedComponent()@http://localhost:1337/client/__dev_vendor_dll__.js?t=1489407894121:92690:32
ReactCompositeComponentWrapper._updateRenderedComponent()@http://localhost:1337/client/__dev_vendor_dll__.js?t=1489407894121:92614:36
ReactCompositeComponentWrapper._performComponentUpdate()@http://localhost:1337/client/__dev_vendor_dll__.js?t=1489407894121:92592:10

Notice the line count differences. 😀

[codepunkt]

The one that has been implemented in create-react-app seems really good.
See facebook/create-react-app#1101

[ctrlplusb]

Defo worth investigating this as an option @codepunkt - would much rather use something that is managed for us.

[birkir]

I tried react-dev-utils out, and it really needs a lot of modification to work with our stack. They have their own webpack hot server (where we use webpack-hot-middleware), etc, etc.

[oyeanuj]

@birkir @codepunkt @ctrlplusb It seems like we could just use the react-error-overlay package instead of the entire react-dev-utils.

Apart from being used in CRA, it seems like it is being used in a bunch of other places. Here and here are a couple of integration examples, and here is one in React Starter Kit.

[oyeanuj]

(a follow up to my above comment)

Incase CRA's react-error-overlay is what we choose, here is a PR (by @Timer on another repo) for us to base this upon (as per Dan Abramov's tweet): react-cosmos/react-cosmos#484 (comment). It seems like it doesn't require much webpack changes to get going.

[ctrlplusb]

Closing in favour of reacts error boundaries.