Broken/outdated stories crash app

[nurse-the-code]

Describe the bug As a codebase evolves overtime, sometimes stories get broken (often because the components the stories were testing were updated without checking how that effects the rendering in Storybook). When another developer taps on that story in Storybook, it causes the whole Storybook environment to crash and the app has to be rebuilt. A single broken story (or even several broken stories) should not crash the whole Storybook environment. This results in significant lack of productivity when using Storybook and causes a significant negative user experience impact.

To Reproduce Steps to reproduce the behavior: Create a broken story (a great way to do this is to import a component without its state or Provider, or to provide invalid props -- when using TypeScript or PropTypes). Then try to click/tap on that story in Storybook. Depending on how significant the error is (e.g. "red" vs "yellow" error), an error will show up taking up the entire screen and when you dismiss the error the screen is black. The only way to get back to Storybook is to delete the app from the device, rebuild the app, and make sure not to tap on the broken component again.

Expected behavior Broken stories (e.g. with invalid props or missing Providers, state) should not crash the entire Storybook environment.

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets If applicable, add code samples to help explain your problem.

System:

Environment Info:

  System:
    OS: macOS 12.5
    CPU: (8) x64 Apple M1
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v14.17.5/bin/yarn
    npm: 6.14.14 - ~/.nvm/versions/node/v14.17.5/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 103.0.1
    Safari: 15.6
  npmPackages:
    @storybook/addon-knobs: 5.3.18 => 5.3.18 
    @storybook/addon-ondevice-backgrounds: 5.3.18 => 5.3.18 
    @storybook/addon-ondevice-knobs: 5.3.18 => 5.3.18 
    @storybook/addons: 5.3.18 => 5.3.18 
    @storybook/react-native: 5.3.18 => 5.3.18 

Additional context Add any other context about the problem here.

[dannyhw]

Hey thanks for raising this issue.

I suppose it could be possible to avoid fatal crashes by having an error boundary.

As a workaround could you try adding a global decorator with an error boundary?

If its successful I could add something like that to the package.

[dannyhw]

@nurse-the-code are you able to test it with an error boundary?

[nurse-the-code]

@dannyhw That is a good idea. I considered adding one in my code. I will have to check it out. Might try to do that after work.

[iuricmp]

Error boundary will give you a fancy error page, but will not prevent the storybook from crashing. 😢 That was the outcome of my tests.

[dannyhw]

@iuricmp well an error boundary could be put in the storybook UI, maybe that would solve this?

[dannyhw]

I have a fix for this in v7 which should have a beta relatively soon.