Core: Prevent BAIL state from showing in interactions panel when switching stories

[ghengeveld]

Closes #

What I did

Originally fixed for #32163 but regressed when another (more severe) issue was fixed. So this is the 2nd attempt at fixing the problem, in a way that avoids reintroducing the more severe problem.

The source of these bugs is overlapping STORY_RENDER_PHASE_CHANGED events originating from different render cycles and/or stories. The two issues are:

• Interaction logs being cleared on preparing phase for render cycles that never actually render, causing the logs to stay empty. This is the most severe issue and was resolved by ignoring the preparing and loading phases and only clear the log on the rendering phase.
• Status badge showing BAIL when switching stories. This happens when the previous story's render cycle is aborted. The render cycle for the new story would only kick in at the rendering phase, and so if aborted arrives before rendering starts, you'd see the BAIL label on the new story even though that update was intended for the previous story.

That's why in this PR, I have extended the condition to ignore preparing / loading only when we're not switching stories. If we are switching stories, the preparing phase will update lastRenderId, thereby causing the aborted update to be ignored (as it uses an older renderId).

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

Switch between two stories which have (long-running) play functions. In the interactions panel, there should not be a purple BAIL label showing when switching stories. When you HMR while the play function is running, the BAIL label should show.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-32172-sha-72b63e9f. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information

Published version	0.0.0-pr-32172-sha-72b63e9f
Triggered by	@yannbf
Repository	storybookjs/storybook
Branch	reset-on-change-story
Commit	72b63e9f
Datetime	Fri Aug 1 11:06:48 UTC 2025 (1754046408)
Workflow run	16673478050

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=32172

Greptile Summary

This PR fixes a race condition issue that causes the interactions panel to incorrectly display a "BAIL" status when switching between stories in Storybook. The root cause stems from overlapping STORY_RENDER_PHASE_CHANGED events from different render cycles, where an aborted render cycle from the previous story can interfere with the new story's render phases.

The solution involves two key changes to the event handling logic:

1. Smart phase filtering in Panel.tsx: Instead of blindly ignoring preparing and loading phases (which caused the BAIL issue), the code now tracks the current story ID using a lastStoryId ref. It only ignores early phases when re-rendering the same story, allowing story switches to proceed normally while still protecting against premature log clearing during rerenders.

2. Terminal state protection in StoryRender.ts: The checkIfAborted method now prevents emitting STORY_RENDER_PHASE_CHANGED events with 'aborted' phase when the render is already in a terminal state (['finished', 'aborted', 'errored']). This prevents stale abort events from previous render cycles from affecting new stories.

The changes integrate well with Storybook's existing render phase management system, building on the existing STORY_RENDER_PHASE_CHANGED event infrastructure while adding safeguards against race conditions. Additionally, the PR includes a minor test refactoring in SaveStory.stories.tsx that switches from userEvent to fireEvent for simpler input testing.

Confidence score: 4/5

• This PR addresses a well-documented race condition with a targeted solution that maintains existing functionality while fixing the specific BAIL state issue
• The logic appears sound but deals with complex async event timing that could have edge cases not immediately apparent
• The StoryRender.ts and Panel.tsx files need careful review as they handle critical render phase state management

[greptile-apps]

_{3 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 72b63e9

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 9s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-08-01 11:15:22 UTC

[storybook-app-bot]

Package Benchmarks

^{Commit: 72b63e9, ran on 1 August 2025 at 11:05:35 UTC}

The following packages have significant changes to their size or dependencies:

storybook

	Before	After	Difference
Dependency count	51	51	0
Self size	41.36 MB	41.37 MB	🚨 +16 KB 🚨
Dependency size	18.13 MB	18.13 MB	0 B
Bundle Size Analyzer	Link	Link

sb

	Before	After	Difference
Dependency count	52	52	0
Self size	1 KB	1 KB	0 B
Dependency size	59.49 MB	59.51 MB	🚨 +16 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	220	220	0
Self size	585 KB	585 KB	0 B
Dependency size	103.95 MB	103.97 MB	🚨 +16 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	189	189	0
Self size	31 KB	31 KB	0 B
Dependency size	88.04 MB	88.06 MB	🚨 +16 KB 🚨
Bundle Size Analyzer	Link	Link

[ndelangen]

@ghengeveld please fill in the manual testing section for us to do QA on this PR