Addon Test: Improve unhandled error messages #30755

yannbf · 2025-03-05T12:27:33Z

What I did

This change is currently blocked as it needs a new version of Vitest to be released. Until then, the E2E tests will fail.

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

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

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 PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

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

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	79.9 MB	79.9 MB	0 B	0.32	0%
initSize	79.9 MB	79.9 MB	0 B	0.32	0%
diffSize	97 B	97 B	0 B	-	0%
buildSize	7.47 MB	7.57 MB	93.1 kB	1	1.2%
buildSbAddonsSize	1.98 MB	1.98 MB	3 B	0.9	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.88 MB	1.88 MB	0 B	-	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.06 MB	4.06 MB	3 B	0.9	0%
buildPreviewSize	3.42 MB	3.51 MB	93.1 kB	0.88	2.7%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	11.5s	8s	-3s -544ms	-1.21	-44.1%
generateTime	20.2s	20.1s	-143ms	0.42	-0.7%
initTime	4.9s	4.8s	-141ms	0.27	-2.9%
buildTime	9.1s	10.2s	1s	1.05	10.5%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.6s	5.3s	675ms	0.21	12.7%
devManagerResponsive	4.4s	5.1s	663ms	0.28	13%
devManagerHeaderVisible	782ms	911ms	129ms	0.61	14.2%
devManagerIndexVisible	793ms	919ms	126ms	0.4	13.7%
devStoryVisibleUncached	2.7s	1.8s	-851ms	-2.56	🔰-45.3%
devStoryVisible	1.2s	1.3s	187ms	0.49	13.4%
devAutodocsVisible	1.1s	1.2s	111ms	0.5	9%
devMDXVisible	1.1s	1.2s	146ms	0.49	11.4%
buildManagerHeaderVisible	880ms	1.2s	334ms	2.98	🔺27.5%
buildManagerIndexVisible	885ms	1.2s	370ms	3.1	🔺29.5%
buildStoryVisible	869ms	1.2s	332ms	2.98	🔺27.6%
buildAutodocsVisible	618ms	1.4s	817ms	4.38	🔺56.9%
buildMDXVisible	666ms	995ms	329ms	2.01	🔺33.1%

Greptile Summary

Enhanced error reporting for unhandled errors in Storybook's Addon Test framework, adding detailed context about error origins and improving test coverage.

Added UnhandledErrors.stories.tsx to demonstrate error handling with both synchronous and asynchronous unhandled errors
Enhanced reporter.ts to include file paths and test names in error messages via new getErrorOrigin function
Added E2E test coverage in component-testing.spec.ts to verify unhandled error reporting
Switched test environment from 'happy-dom' to 'jsdom' in vitest.workspace.ts for better error handling support

greptile-apps

_{4 file(s) reviewed, 3 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-03-05T12:28:16Z

test-storybooks/portable-stories-kitchen-sink/react/stories/UnhandledErrors.stories.tsx

+        setTimeout(unhandledRejection, 0);
+      } else if (errorType === 'error') {
+        setTimeout(unhandledError, 0);
+      }


style: setTimeout with 0 delay may be flaky in tests. Consider using queueMicrotask() or Promise.resolve() for more reliable async behavior

greptile-apps · 2025-03-05T12:28:30Z

code/addons/test/src/node/reporter.ts

+      const error = e as VitestError;
+      const origin = getErrorOrigin(error);


logic: Type assertion could fail if e is not actually a VitestError. Consider adding a type guard or handling non-VitestError cases.

greptile-apps · 2025-03-05T12:28:31Z

code/addons/test/src/node/reporter.ts

+        error.message = `${error.message}\n${origin}`;
+        error.stack = `${error.stack}\n${origin}`;
+      }


logic: Stack trace could be undefined. Need null check before concatenation.

Suggested change

error.message = `${error.message}\n${origin}`;

error.stack = `${error.stack}\n${origin}`;

}

error.message = `${error.message}\n${origin}`;

if (error.stack) error.stack = `${error.stack}\n${origin}`;

}

nx-cloud · 2025-03-05T12:32:33Z

View your CI Pipeline Execution ↗ for commit 9aa6637.

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

☁️ Nx Cloud last updated this comment at 2025-03-07 14:36:35 UTC

JReinhold

A few comments, but looks good! ✨

JReinhold · 2025-03-07T09:07:48Z

code/addons/test/src/node/reporter.ts

+    unhandledErrors.forEach((e: unknown) => {
+      const error = e as VitestError;


Suggested change

unhandledErrors.forEach((e: unknown) => {

const error = e as VitestError;

unhandledErrors.forEach((error: VitestError) => {

that will cause type failures because the types don't match :<
we rely on internal stuff for this solution

JReinhold · 2025-03-07T09:11:22Z

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts

+    await expect(errorLink).toContainText('2 unhandled errors', { timeout: 30000 });
+    await errorLink.click();
+
+    await expect(page.locator('pre')).toContainText('I THREW AN UNHANDLED ERROR!');


isn't the important bit of this test, that it actually outputs the correct path, and so shouldn't we assert on that?

Because it's an absolute path it's going to be different per environment, but then at least just assert that it contains the story file name?

JReinhold · 2025-03-07T09:12:04Z

test-storybooks/portable-stories-kitchen-sink/react/vitest.workspace.ts

@@ -30,7 +30,7 @@ export default defineWorkspace([
        }]
      },
      setupFiles: ["./.storybook/vitest.setup.ts"],
-      environment: "happy-dom",


why is this change necessary?

storybook-pr-benchmarking · 2025-03-07T14:40:35Z

Package Benchmarks

^{Commit: 9aa6637, ran on 7 March 2025 at 14:40:32 UTC}

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

`@storybook/addon-a11y`

	Before	After	Difference
Dependency count	3	51	🚨 +48 🚨
Self size	445 KB	445 KB	🚨 +44 B 🚨
Dependency size	2.81 MB	12.05 MB	🚨 +9.24 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-interactions`

	Before	After	Difference
Dependency count	5	51	🚨 +46 🚨
Self size	129 KB	129 KB	🚨 +62 B 🚨
Dependency size	3.11 MB	12.07 MB	🚨 +8.96 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-test`

	Before	After	Difference
Dependency count	9	55	🚨 +46 🚨
Self size	844 KB	845 KB	🚨 +778 B 🚨
Dependency size	4.56 MB	13.52 MB	🚨 +8.96 MB 🚨
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	98	51	🎉 -47 🎉
Self size	21.54 MB	19.64 MB	🎉 -1.90 MB 🎉
Dependency size	21.69 MB	14.26 MB	🎉 -7.43 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/experimental-nextjs-vite`

	Before	After	Difference
Dependency count	141	167	🚨 +26 🚨
Self size	215 KB	215 KB	🚨 +77 B 🚨
Dependency size	39.37 MB	31.38 MB	🎉 -7.98 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/nextjs`

	Before	After	Difference
Dependency count	540	572	🚨 +32 🚨
Self size	218 KB	218 KB	🚨 +57 B 🚨
Dependency size	58.82 MB	66.13 MB	🚨 +7.31 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-vite`

	Before	After	Difference
Dependency count	122	124	🚨 +2 🚨
Self size	15 KB	15 KB	🚨 +127 B 🚨
Dependency size	20.46 MB	20.48 MB	🚨 +12 KB 🚨
Bundle Size Analyzer	Link	Link

`sb`

	Before	After	Difference
Dependency count	99	52	🎉 -47 🎉
Self size	1 KB	1 KB	0 B
Dependency size	43.24 MB	33.90 MB	🎉 -9.34 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	388	356	🎉 -32 🎉
Self size	282 KB	284 KB	🚨 +2 KB 🚨
Dependency size	93.24 MB	84.40 MB	🎉 -8.83 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	309	274	🎉 -35 🎉
Self size	614 KB	617 KB	🚨 +3 KB 🚨
Dependency size	74.84 MB	65.99 MB	🎉 -8.85 MB 🎉
Bundle Size Analyzer	Link	Link

yannbf added feature request ci: do not merge addon: test labels Mar 5, 2025

yannbf self-assigned this Mar 5, 2025

greptile-apps bot reviewed Mar 5, 2025

View reviewed changes

yannbf added the ci:normal label Mar 5, 2025

yannbf added 2 commits March 6, 2025 17:38

Addon Test: Improve unhandled errors message

2c1c317

update to vitest 3.0.8

3442715

yannbf force-pushed the yann/vitest-unhandled-errors branch from 43567a9 to 3442715 Compare March 6, 2025 16:39

yannbf removed the ci: do not merge label Mar 6, 2025

Merge branch 'next' into yann/vitest-unhandled-errors

e76640c

JReinhold approved these changes Mar 7, 2025

View reviewed changes

yannbf added 2 commits March 7, 2025 12:01

update vitest in addon test package

4d4a83a

fix glob

9aa6637

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Addon Test: Improve unhandled error messages #30755

Addon Test: Improve unhandled error messages #30755

yannbf commented Mar 5, 2025 •

edited by storybook-pr-benchmarking bot

Loading

greptile-apps bot left a comment

greptile-apps bot Mar 5, 2025

greptile-apps bot Mar 5, 2025

greptile-apps bot Mar 5, 2025

nx-cloud bot commented Mar 5, 2025 •

edited

Loading

JReinhold left a comment

JReinhold Mar 7, 2025

yannbf Mar 7, 2025

JReinhold Mar 7, 2025

JReinhold Mar 7, 2025

storybook-pr-benchmarking bot commented Mar 7, 2025

		const error = e as VitestError;
		const origin = getErrorOrigin(error);

		unhandledErrors.forEach((e: unknown) => {
		const error = e as VitestError;

	unhandledErrors.forEach((e: unknown) => {
	const error = e as VitestError;
	unhandledErrors.forEach((error: VitestError) => {

Addon Test: Improve unhandled error messages #30755

Are you sure you want to change the base?

Addon Test: Improve unhandled error messages #30755

Conversation

yannbf commented Mar 5, 2025 • edited by storybook-pr-benchmarking bot Loading

What I did

Checklist for Contributors

Testing

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

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Mar 5, 2025

Choose a reason for hiding this comment

greptile-apps bot Mar 5, 2025

Choose a reason for hiding this comment

greptile-apps bot Mar 5, 2025

Choose a reason for hiding this comment

nx-cloud bot commented Mar 5, 2025 • edited Loading

JReinhold left a comment

Choose a reason for hiding this comment

JReinhold Mar 7, 2025

Choose a reason for hiding this comment

yannbf Mar 7, 2025

Choose a reason for hiding this comment

JReinhold Mar 7, 2025

Choose a reason for hiding this comment

JReinhold Mar 7, 2025

Choose a reason for hiding this comment

storybook-pr-benchmarking bot commented Mar 7, 2025

Package Benchmarks

@storybook/addon-a11y

@storybook/addon-interactions

@storybook/addon-test

storybook

@storybook/experimental-nextjs-vite

@storybook/nextjs

@storybook/react-vite

sb

@storybook/cli

@storybook/codemod

yannbf commented Mar 5, 2025 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Mar 5, 2025 •

edited

Loading

`@storybook/addon-a11y`

`@storybook/addon-interactions`

`@storybook/addon-test`

`storybook`

`@storybook/experimental-nextjs-vite`

`@storybook/nextjs`

`@storybook/react-vite`

`sb`

`@storybook/cli`

`@storybook/codemod`