storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.08k stars 9.25k forks source link

[Bug]: Network error when starting dev server leads to confusing "circular structure" error output #29222

Open kaiyoma opened 1 day ago

kaiyoma commented 1 day ago

Describe the bug

It's possible for Storybook to encounter a network error when starting its dev server, and when it tries to stringify the error, it encounters a circular object, which then leads to another error. The error output becomes concerned only with this second error, and the original issue is lost entirely.

Here's the full error output:

@storybook/core v8.3.3

info => Starting manager..
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    --- property 'issuerCertificate' closes the circle
    at JSON.stringify (<anonymous>)
    at renderHTML (file:///.../common/temp/node_modules/.pnpm/@storybook+core@8.3.3/node_modules/@storybook/core/dist/builder-manager/index.js:2836:41)
    at async starterGeneratorFn (file:///.../common/temp/node_modules/.pnpm/@storybook+core@8.3.3/node_modules/@storybook/core/dist/builder-manager/index.js:3054:11)
    at async Module.start (file:///.../common/temp/node_modules/.pnpm/@storybook+core@8.3.3/node_modules/@storybook/core/dist/builder-manager/index.js:3146:9)
    at async storybookDevServer (...\common\temp\node_modules\.pnpm\@storybook+core@8.3.3\node_modules\@storybook\core\dist\core-server\index.cjs:47306:11)
    at async buildOrThrow (...\common\temp\node_modules\.pnpm\@storybook+core@8.3.3\node_modules\@storybook\core\dist\core-server\index.cjs:46581:12)
    at async buildDevStandalone (...\common\temp\node_modules\.pnpm\@storybook+core@8.3.3\node_modules\@storybook\core\dist\core-server\index.cjs:48518:78)
    at async withTelemetry (...\common\temp\node_modules\.pnpm\@storybook+core@8.3.3\node_modules\@storybook\core\dist\core-server\index.cjs:47080:12)
    at async dev (...\common\temp\node_modules\.pnpm\@storybook+core@8.3.3\node_modules\@storybook\core\dist\cli\bin\index.cjs:2877:3)
    at async r.<anonymous> (...\common\temp\node_modules\.pnpm\@storybook+core@8.3.3\node_modules\@storybook\core\dist\cli\bin\index.cjs:2929:74)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Reproduction link

N/A

Reproduction steps

We're not exactly sure what caused this, but it seemed to be a transient network issue, since the problem went away on its own after 5-10 minutes.

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
  Binaries:
    Node: 20.11.1 - C:\Program Files\Node.js\node.EXE
    npm: 10.8.2 - C:\Program Files\Node.js\npm.CMD
    pnpm: 9.7.1 - C:\Program Files\Node.js\pnpm.CMD <----- active
  Browsers:
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @storybook/react: link:apps/geiger/node_modules/@storybook/react => 8.3.3
    storybook: link:apps/geiger/node_modules/storybook => 8.3.3

Additional context

No response

cpmotion commented 1 day ago

Saw the same, and seems resolved now too.

bhainesva commented 1 day ago

Also saw this and it seems resolved now. It seemed to correspond to the period of time when storybook.js.org was also unavailable with a cert error.

kaiyoma commented 1 day ago

Also saw this and it seems resolve now. It seemed to correspond to the period of time when storybook.js.org was also unavailable with a cert error.

That would certainly explain why issuerCertificate appears in the error message.