[Bug]: Component on Docs page doesn't recover from error

[valentinpalkovic]

Describe the bug

When visiting a docs page and changing a story so that it throws an error, the docs page successfully shows the error. Reverting the change and make the story render successfully doesn't lead to a recovered docs page. The docs page remains in an error state.

Reproduction link

Reproduction steps

1. Checkout Mealdrop
2. Start Storybook
3. Go to http://localhost:6006/?path=/docs/components-button--docs
4. Edit src/components/Button/Button.tsx -> Add a useEffect and throw an error inside it
5. Go to the browser, component successfully crashes
6. Revert the change
7. Go to the browser -> component doesn’t recover. It remains in an error state

System

-

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This is likely related to error boundary handling in the docs page. The fix would involve: 1. Modify code/ui/components/preview/Preview.tsx to ensure the error boundary resets when the story content changes 2. Add a key prop to the error boundary component that changes when the story updates: tsx // In Preview.tsx <ErrorBoundary key={storyId || previewId}> {/* story content */} </ErrorBoundary> This will force the error boundary to remount when the story changes, allowing recovery from errors.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile