Storybook: Improve error reporting with `react-error-overlay`

Created on 21 May 2017 · 22Comments · Source: storybookjs/storybook

https://www.npmjs.com/package/react-error-overlay

https://twitter.com/dan_abramov/status/863482034865483776

feature request help wanted ui

Source

ndelangen

Most helpful comment

Mine. PR soon.

m19c on 30 Jun 2017

❤3

All 22 comments

Mine. PR soon.

m19c on 30 Jun 2017

❤3

@MrBoolean Are you still interested in adding this to storybook?

ndelangen on 12 Sep 2017

Hi, I would like to solve this.
This is my first open source contribution, So could you guide me in this?

I have cloned the repo.

ijajmulani on 13 Sep 2017

I think here is how it work:

In development webpack config, an entry to handle error is added before the main entry

https://github.com/facebookincubator/create-react-app/blob/206f9e84e62434e78d8ad7cf6f2c84476f611d12/packages/react-scripts/config/webpack.config.dev.js#L48-L58

The react-error-overlay handles the error when occurs

https://github.com/facebookincubator/create-react-app/blob/206f9e84e62434e78d8ad7cf6f2c84476f611d12/packages/react-dev-utils/webpackHotDevClient.js#L163

thongdong7 on 14 Sep 2017

Thanks @thongdong7. I get a fair idea about will let you know once it done.

ijajmulani on 14 Sep 2017

@ijajmulani YES definitely I can help you, I can tell you about the codebase and help you find what you need.

Can you join our slack?
https://now-examples-slackin-nqnzoygycp.now.sh/
That way we can chat a bit more easily.

ndelangen on 14 Sep 2017

@ndelangen thanks for sending slack request. I have joined storybook on slack.

ijajmulani on 14 Sep 2017

Any update on this? Is this difficult to add manually?

ritch on 12 Nov 2017

You could start to use it by creating a global decorator: https://gist.github.com/Spy-Seth/25bdaf2a6aa8c37228d47db79cfd0977

Spy-Seth on 13 Nov 2017

❤1

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

stale[bot] on 28 Dec 2017

@Spy-Seth Looks like you might be able to make a PR, adding this for everyone? 🙇

ndelangen on 28 Dec 2017

Did you mean to add the gist as an official decorator inside storybook mono-repo? Or to activate react-error-overlay by default?

Spy-Seth on 30 Dec 2017

Activate it by default seems good to me, do you agree?

ndelangen on 30 Dec 2017

In the preview view it's a good idea yes.

I just need to find where to it in the source code 😄

Spy-Seth on 30 Dec 2017

I'd assume it's something you configure in the webpack.config.js ?

That'd be located here:
https://github.com/storybooks/storybook/blob/master/app/react/src/server/config/webpack.config.js

ndelangen on 3 Jan 2018

The webpack stuff got moved to a new package core, should not be to difficult to find though.

Are you still interested in making a PR @Spy-Seth ?

ndelangen on 31 Jan 2018

after looking at how create-react-app now does things i am not confident that react-error-overlay is all that is needed for this stuff. do we need [webpackHotDevClient](https://github.com/facebook/create-react-app/blob/25184c4e91ebabd16fe1cde3d8630830e4a36a01/packages/react-dev-utils/webpackHotDevClient.js)? when i tried implementing just react-error-overlay, nothing happened when i intentionally threw an error on my storybook. it seems that webpackHotDevClient reexports ErrorOverlay anyway so it looks like i just need to make that work. Now i have no idea how to configure webpackHotDevClient as just adding it to my webpack.config.js doesn't do anything.