instructions for adding react-error-overlay?

[tsiq-swyx]

Issue details

Hi friends! i would like to add react-error-overlay to my storybook webpack.config.js but i dont know how... any help would be appreciated!

Steps to reproduce

what i have so far:

in .storybook/webpack.config.js:

module.exports = {
  plugins: [
    // your custom plugins
  ],
  entry: [
    require.resolve('react-error-overlay') // https://github.com/facebook/create-react-app/issues/2344
  ],
  module: {
    rules: [
      // add your custom rules.
    ],
  },
};

and in .storybook/middleware.js:

const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');

// this works
// module.exports = function(app) {
//   app.use(errorOverlayMiddleware())
// }

//this also works
module.exports = errorOverlayMiddleware;

and storybook runs fine but it doesnt catch the error and render the ErrorOverlay iframe.

Please specify which version of Storybook and optionally any affected addons that you're running

"webpack": "^3.10.0",
"@storybook/react": "^3.3.11",
"@storybook/addon-actions": "^3.3.11",
"@storybook/addon-links": "^3.3.11",
"@storybook/addons": "^3.3.11",

please let me know your ideas and i would be happy to try them out!

[ndelangen]

There's some info / discussion on this here: #1088

[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? 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.

[Hypnosphi]

Note that you can't modify entry point in custom webpack config. You may want to add something like this at the top of your config.js instead:

if (process.env.NODE_ENV !== 'production') {
  require('react-error-overlay');
}

[Hypnosphi]

As for middleware, we have a non-documented (unfortunately) feature of adding it using middleware.js file in config dir:

const errorOverlayMiddleware = require('react-error-overlay/middleware')

module.exports = router => router.use(errorOverlayMiddleware())

[tsiq-swyx]

well whaddaya know!!!!

config.js:

import { configure } from '@storybook/react';
if (process.env.NODE_ENV !== 'production') {
  require('react-error-overlay');
  require('react-dev-utils/webpackHotDevClient')
}

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);

middleware.js:

const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');

module.exports = router => router.use(errorOverlayMiddleware())

[tsiq-swyx]

thanks so much for your help guys! you're amazing. same day issue solving. wow.

[ChristopherHButler]

@tsiq-swyx any idea how I could use this with an iFrame inside a react app? I am making an app similar to codesandbox and I would like to show this when there is a runtime error or bundling error.