Improve error reporting with react-error-overlay

[ndelangen]

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

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

[m19c]

Mine. PR soon.

[ndelangen]

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

[ijajmulani]

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.

[thongdong7]

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

[ijajmulani]

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

[ndelangen]

@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.

[ijajmulani]

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

[ritch]

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

[armandabric]

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

[stale]

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!

[ndelangen]

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

[armandabric]

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

[ndelangen]

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

[armandabric]

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

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

[ndelangen]

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]

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 ?

[tsiq-swyx]

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.

[swyxio]

future people looking at this - this is solved with the undocumented middleware.js option. #2890

might look into doing a PR for this to make it default behavior in storybook

[Hypnosphi]

@sw-yx sure, go for it!

[swyxio]

done!

[stale]

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!

[tsiq-swyx]

i believe this was merged so someone should close this as resolved (i can't)

for people from the future: the actual issue was switched to #2941