UI: Add global error boundary for Storybook UI

[Copilot]

When code in the Manager UI throws (e.g., custom addon code or manager.ts configuration), Storybook crashes to a white screen with no recovery path. This adds a global error boundary that catches these errors and displays a helpful error UI.

Changes

• New ManagerErrorBoundary component - React error boundary that catches Manager UI errors and renders a fallback UI with:

  • Error message and stack trace (expandable)
  • "Reload Storybook" button for recovery
  • Themed styling using polished for transparency

• Wrapped App in error boundary (index.tsx) - Placed inside ThemeProvider so fallback UI can use theme colors

• Added stories - 5 stories demonstrating error boundary behavior (immediate error, deep stack trace, interactive trigger, etc.)

Reproduction

// .storybook/manager.ts
import { addons, type State } from 'storybook/manager-api'

addons.setConfig({
  layoutCustomisations: {
    showToolbar(state: State) {
      if (state.storyId?.includes('button')) {
        throw new Error('Boom')
      }
      return true
    },
  },
})

Screenshot

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Bug]: Storybook goes into white screen if code fails in the Manager UI</issue_title>
<issue_description>### Describe the bug

When code in the Storybook Manager UI breaks, such as: foo.bar = 10 where foo is undefined, Storybook crashes completely into a white screen. This has happened a few times in different places in Storybook, most recently (though already fixed) when registering new shortcuts on MacOS and using special characters.

The experience of the crash is the following:

The ideal solution has to be discussed with the team, we should add a global error boundary and provide a helpful error UI (perhaps notifications, similar to VSCode?)

Reproduction steps

An easy way to reproduce this error is by using a custom .storybook/manager.ts file with code that will break, e.g.:

import { addons, type State } from 'storybook/manager-api'

addons.setConfig({
  layoutCustomisations: {
    showToolbar(state: State, defaultValue: boolean) {
      if (state.storyId?.includes('button')) {
        throw new Error('Boom')
      }

      return true
    },
  },
})

</issue_description>

<agent_instructions>Provide Storybook stories that can demonstrate the work you did.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes [Bug]: Storybook goes into white screen if code fails in the Manager UI #32968

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 05f2d17

Command	Status	Duration	Result
nx run-many -t compile --parallel=3	✅ Succeeded	44s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-11-28 15:31:57 UTC