From cd46fac7eb3baa209e83abef90dc660dcf6ad99c Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 18 Aug 2025 10:48:00 +0800
Subject: [PATCH 01/10] Add utm_source to Configure.mdx
---
.../nextjs-vite/template/cli/js/Configure.mdx | 22 +++++++++----------
.../nextjs-vite/template/cli/ts/Configure.mdx | 22 +++++++++----------
.../nextjs/template/cli/js/Configure.mdx | 22 +++++++++----------
.../nextjs/template/cli/ts/Configure.mdx | 22 +++++++++----------
.../rendererAssets/common/Configure.mdx | 22 +++++++++----------
.../yarn-pnp/src/stories/Configure.mdx | 22 +++++++++----------
6 files changed, 66 insertions(+), 66 deletions(-)
diff --git a/code/frameworks/nextjs-vite/template/cli/js/Configure.mdx b/code/frameworks/nextjs-vite/template/cli/js/Configure.mdx
index 8734a26fe4bc..f3774c652d30 100644
--- a/code/frameworks/nextjs-vite/template/cli/js/Configure.mdx
+++ b/code/frameworks/nextjs-vite/template/cli/js/Configure.mdx
@@ -52,7 +52,7 @@ export const RightArrow = () => Add styling and CSS
Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
Learn more
@@ -67,7 +67,7 @@ export const RightArrow = () => Provide context and mocking
Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.
Learn more
@@ -85,7 +85,7 @@ export const RightArrow = () =>
Learn more
@@ -113,7 +113,7 @@ export const RightArrow = () => Auto-generate living,
interactive reference documentation from your components and stories.
Learn more
@@ -128,7 +128,7 @@ export const RightArrow = () => Publish to Chromatic
Publish your Storybook to review and collaborate with your entire team.
Learn more
@@ -144,7 +144,7 @@ export const RightArrow = () => Embed your stories into Figma to cross-reference the design and live
implementation in one place.
Learn more
@@ -160,7 +160,7 @@ export const RightArrow = () => Use stories to test a component in all its variations, no matter how
complex.
Learn more
@@ -175,7 +175,7 @@ export const RightArrow = () => Accessibility
Automatically test your components for a11y issues as you develop.
Learn more
@@ -190,7 +190,7 @@ export const RightArrow = () => Theming
Theme Storybook's UI to personalize it to your project.
Learn more
@@ -202,7 +202,7 @@ export const RightArrow = () => Addons
Integrate your tools with Storybook to connect workflows.
Discover all addons
@@ -281,7 +281,7 @@ export const RightArrow = () => Follow guided walkthroughs on for key workflows.
Discover tutorials
diff --git a/code/frameworks/nextjs-vite/template/cli/ts/Configure.mdx b/code/frameworks/nextjs-vite/template/cli/ts/Configure.mdx
index 8734a26fe4bc..f3774c652d30 100644
--- a/code/frameworks/nextjs-vite/template/cli/ts/Configure.mdx
+++ b/code/frameworks/nextjs-vite/template/cli/ts/Configure.mdx
@@ -52,7 +52,7 @@ export const RightArrow = () => Add styling and CSS
Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
Learn more
@@ -67,7 +67,7 @@ export const RightArrow = () => Provide context and mocking
Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.
Learn more
@@ -85,7 +85,7 @@ export const RightArrow = () =>
Learn more
@@ -113,7 +113,7 @@ export const RightArrow = () => Auto-generate living,
interactive reference documentation from your components and stories.
Learn more
@@ -128,7 +128,7 @@ export const RightArrow = () => Publish to Chromatic
Publish your Storybook to review and collaborate with your entire team.
Learn more
@@ -144,7 +144,7 @@ export const RightArrow = () => Embed your stories into Figma to cross-reference the design and live
implementation in one place.
Learn more
@@ -160,7 +160,7 @@ export const RightArrow = () => Use stories to test a component in all its variations, no matter how
complex.
Learn more
@@ -175,7 +175,7 @@ export const RightArrow = () => Accessibility
Automatically test your components for a11y issues as you develop.
Learn more
@@ -190,7 +190,7 @@ export const RightArrow = () => Theming
Theme Storybook's UI to personalize it to your project.
Learn more
@@ -202,7 +202,7 @@ export const RightArrow = () => Addons
Integrate your tools with Storybook to connect workflows.
Discover all addons
@@ -281,7 +281,7 @@ export const RightArrow = () => Follow guided walkthroughs on for key workflows.
Discover tutorials
diff --git a/code/frameworks/nextjs/template/cli/js/Configure.mdx b/code/frameworks/nextjs/template/cli/js/Configure.mdx
index 8734a26fe4bc..f3774c652d30 100644
--- a/code/frameworks/nextjs/template/cli/js/Configure.mdx
+++ b/code/frameworks/nextjs/template/cli/js/Configure.mdx
@@ -52,7 +52,7 @@ export const RightArrow = () => Add styling and CSS
Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
Learn more
@@ -67,7 +67,7 @@ export const RightArrow = () => Provide context and mocking
Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.
Learn more
@@ -85,7 +85,7 @@ export const RightArrow = () =>
Learn more
@@ -113,7 +113,7 @@ export const RightArrow = () => Auto-generate living,
interactive reference documentation from your components and stories.
Learn more
@@ -128,7 +128,7 @@ export const RightArrow = () => Publish to Chromatic
Publish your Storybook to review and collaborate with your entire team.
Learn more
@@ -144,7 +144,7 @@ export const RightArrow = () => Embed your stories into Figma to cross-reference the design and live
implementation in one place.
Learn more
@@ -160,7 +160,7 @@ export const RightArrow = () => Use stories to test a component in all its variations, no matter how
complex.
Learn more
@@ -175,7 +175,7 @@ export const RightArrow = () => Accessibility
Automatically test your components for a11y issues as you develop.
Learn more
@@ -190,7 +190,7 @@ export const RightArrow = () => Theming
Theme Storybook's UI to personalize it to your project.
Learn more
@@ -202,7 +202,7 @@ export const RightArrow = () => Addons
Integrate your tools with Storybook to connect workflows.
Discover all addons
@@ -281,7 +281,7 @@ export const RightArrow = () => Follow guided walkthroughs on for key workflows.
Discover tutorials
diff --git a/code/frameworks/nextjs/template/cli/ts/Configure.mdx b/code/frameworks/nextjs/template/cli/ts/Configure.mdx
index 8734a26fe4bc..f3774c652d30 100644
--- a/code/frameworks/nextjs/template/cli/ts/Configure.mdx
+++ b/code/frameworks/nextjs/template/cli/ts/Configure.mdx
@@ -52,7 +52,7 @@ export const RightArrow = () => Add styling and CSS
Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
Learn more
@@ -67,7 +67,7 @@ export const RightArrow = () => Provide context and mocking
Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.
Learn more
@@ -85,7 +85,7 @@ export const RightArrow = () =>
Learn more
@@ -113,7 +113,7 @@ export const RightArrow = () => Auto-generate living,
interactive reference documentation from your components and stories.
Learn more
@@ -128,7 +128,7 @@ export const RightArrow = () => Publish to Chromatic
Publish your Storybook to review and collaborate with your entire team.
Learn more
@@ -144,7 +144,7 @@ export const RightArrow = () => Embed your stories into Figma to cross-reference the design and live
implementation in one place.
Learn more
@@ -160,7 +160,7 @@ export const RightArrow = () => Use stories to test a component in all its variations, no matter how
complex.
Learn more
@@ -175,7 +175,7 @@ export const RightArrow = () => Accessibility
Automatically test your components for a11y issues as you develop.
Learn more
@@ -190,7 +190,7 @@ export const RightArrow = () => Theming
Theme Storybook's UI to personalize it to your project.
Learn more
@@ -202,7 +202,7 @@ export const RightArrow = () => Addons
Integrate your tools with Storybook to connect workflows.
Discover all addons
@@ -281,7 +281,7 @@ export const RightArrow = () => Follow guided walkthroughs on for key workflows.
Discover tutorials
diff --git a/code/lib/create-storybook/rendererAssets/common/Configure.mdx b/code/lib/create-storybook/rendererAssets/common/Configure.mdx
index e8bd42548d4e..da58ecd3d9b2 100644
--- a/code/lib/create-storybook/rendererAssets/common/Configure.mdx
+++ b/code/lib/create-storybook/rendererAssets/common/Configure.mdx
@@ -48,7 +48,7 @@ export const RightArrow = () => Add styling and CSS
Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
Learn more
@@ -60,7 +60,7 @@ export const RightArrow = () => Provide context and mocking
Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.
Learn more
@@ -72,7 +72,7 @@ export const RightArrow = () =>
Learn more
@@ -94,7 +94,7 @@ export const RightArrow = () => Auto-generate living,
interactive reference documentation from your components and stories.
Learn more
@@ -103,7 +103,7 @@ export const RightArrow = () => Publish to Chromatic
Publish your Storybook to review and collaborate with your entire team.
Learn more
@@ -113,7 +113,7 @@ export const RightArrow = () => Embed your stories into Figma to cross-reference the design and live
implementation in one place.
Learn more
@@ -123,7 +123,7 @@ export const RightArrow = () => Use stories to test a component in all its variations, no matter how
complex.
Learn more
@@ -132,7 +132,7 @@ export const RightArrow = () => Accessibility
Automatically test your components for a11y issues as you develop.
Learn more
@@ -141,7 +141,7 @@ export const RightArrow = () => Theming
Theme Storybook's UI to personalize it to your project.
Learn more
@@ -153,7 +153,7 @@ export const RightArrow = () => Addons
Integrate your tools with Storybook to connect workflows.
Discover all addons
@@ -199,7 +199,7 @@ export const RightArrow = () => Follow guided walkthroughs on for key workflows.
Discover tutorials
diff --git a/test-storybooks/yarn-pnp/src/stories/Configure.mdx b/test-storybooks/yarn-pnp/src/stories/Configure.mdx
index 55c21a8afaf3..6349ba4852a1 100644
--- a/test-storybooks/yarn-pnp/src/stories/Configure.mdx
+++ b/test-storybooks/yarn-pnp/src/stories/Configure.mdx
@@ -48,7 +48,7 @@ export const RightArrow = () => Add styling and CSS
Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
Learn more
@@ -60,7 +60,7 @@ export const RightArrow = () => Provide context and mocking
Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.
Learn more
@@ -72,7 +72,7 @@ export const RightArrow = () =>
Learn more
@@ -94,7 +94,7 @@ export const RightArrow = () => Auto-generate living,
interactive reference documentation from your components and stories.
Learn more
@@ -103,7 +103,7 @@ export const RightArrow = () => Publish to Chromatic
Publish your Storybook to review and collaborate with your entire team.
Learn more
@@ -113,7 +113,7 @@ export const RightArrow = () => Embed your stories into Figma to cross-reference the design and live
implementation in one place.
Learn more
@@ -123,7 +123,7 @@ export const RightArrow = () => Use stories to test a component in all its variations, no matter how
complex.
Learn more
@@ -132,7 +132,7 @@ export const RightArrow = () => Accessibility
Automatically test your components for a11y issues as you develop.
Learn more
@@ -141,7 +141,7 @@ export const RightArrow = () => Theming
Theme Storybook's UI to personalize it to your project.
Learn more
@@ -153,7 +153,7 @@ export const RightArrow = () => Addons
Integrate your tools with Storybook to connect workflows.
Discover all addons
@@ -199,7 +199,7 @@ export const RightArrow = () => Follow guided walkthroughs on for key workflows.
Discover tutorials
From 4c48038c55fca82cbbc08c7fe837b67b69637fad Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 18 Aug 2025 11:14:45 +0800
Subject: [PATCH 02/10] Add utm parameter to error links
---
code/core/src/__tests/storybook-error.test.ts | 2 +-
.../utils/__tests__/remove-mdx-stories.test.ts | 2 +-
code/core/src/csf-tools/CsfFile.test.ts | 14 +++++++-------
code/core/src/csf-tools/CsfFile.ts | 8 ++++----
.../modules/preview-web/parseArgsParam.ts | 2 +-
code/core/src/preview-api/modules/store/args.ts | 4 ++--
.../modules/store/csf/portable-stories.ts | 2 +-
code/core/src/preview-errors.ts | 2 +-
code/core/src/router/utils.ts | 2 +-
code/core/src/server-errors.ts | 9 +++++----
code/core/src/storybook-error.ts | 8 +++++---
code/core/src/test/testing-library.ts | 2 +-
.../helpers/logMigrationSummary.test.ts | 6 +++---
.../src/automigrate/helpers/logMigrationSummary.ts | 2 +-
.../lib/cli-storybook/src/codemod/csf-factories.ts | 4 ++--
15 files changed, 36 insertions(+), 33 deletions(-)
diff --git a/code/core/src/__tests/storybook-error.test.ts b/code/core/src/__tests/storybook-error.test.ts
index 770997b00fe9..1a8b50e71ea8 100644
--- a/code/core/src/__tests/storybook-error.test.ts
+++ b/code/core/src/__tests/storybook-error.test.ts
@@ -28,7 +28,7 @@ describe('StorybookError', () => {
it('should generate the correct message with internal documentation link', () => {
const error = new TestError(true);
const expectedMessage =
- 'This is a test error.\n\nMore info: https://storybook.js.org/error/SB_TEST_CATEGORY_0123\n';
+ 'This is a test error.\n\nMore info: https://storybook.js.org/error/SB_TEST_CATEGORY_0123?utm_source=error\n';
expect(error.message).toBe(expectedMessage);
});
diff --git a/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts b/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts
index 3f8258f012f3..810ce5b49b7c 100644
--- a/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts
+++ b/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts
@@ -56,7 +56,7 @@ Your main configuration somehow does not contain a 'stories' field, or it resolv
Please check your main configuration file and make sure it exports a 'stories' field that is not an empty array.
-More info: https://storybook.js.org/docs/faq#can-i-have-a-storybook-with-no-local-stories
+More info: https://storybook.js.org/docs/faq#can-i-have-a-storybook-with-no-local-stories?utm_source=error
]
`);
});
diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index e269c804f73a..2505ce182a2d 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -2513,7 +2513,7 @@ describe('CsfFile', () => {
).toThrowErrorMatchingInlineSnapshot(`
[MultipleMetaError: CSF: multiple meta objects (line 4, col 24)
- More info: https://storybook.js.org/docs/writing-stories#default-export]
+ More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error]
`);
});
@@ -2531,7 +2531,7 @@ describe('CsfFile', () => {
).toThrowErrorMatchingInlineSnapshot(`
[MultipleMetaError: CSF: multiple meta objects (line 3, col 25)
- More info: https://storybook.js.org/docs/writing-stories#default-export]
+ More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error]
`);
});
@@ -2549,7 +2549,7 @@ describe('CsfFile', () => {
).toThrowErrorMatchingInlineSnapshot(`
[MultipleMetaError: CSF: multiple meta objects
- More info: https://storybook.js.org/docs/writing-stories#default-export]
+ More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error]
`);
});
@@ -2565,7 +2565,7 @@ describe('CsfFile', () => {
).toThrowErrorMatchingInlineSnapshot(`
[BadMetaError: CSF: meta() factory must be imported from .storybook/preview configuration (line 1, col 0)
- More info: https://storybook.js.org/docs/writing-stories#default-export]
+ More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error]
`);
});
@@ -2582,7 +2582,7 @@ describe('CsfFile', () => {
).toThrowErrorMatchingInlineSnapshot(`
[BadMetaError: CSF: meta() factory must be imported from .storybook/preview configuration (line 4, col 28)
- More info: https://storybook.js.org/docs/writing-stories#default-export]
+ More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error]
`);
});
@@ -2599,7 +2599,7 @@ describe('CsfFile', () => {
).toThrowErrorMatchingInlineSnapshot(`
[MixedFactoryError: CSF: expected factory story (line 4, col 17)
- More info: https://storybook.js.org/docs/writing-stories#default-export]
+ More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error]
`);
});
@@ -2616,7 +2616,7 @@ describe('CsfFile', () => {
).toThrowErrorMatchingInlineSnapshot(`
[MixedFactoryError: CSF: expected non-factory story (line 4, col 28)
- More info: https://storybook.js.org/docs/writing-stories#default-export]
+ More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error]
`);
});
});
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 50e5e5fd3c8a..5fa8c2f3153d 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -181,7 +181,7 @@ export class NoMetaError extends Error {
super(dedent`
CSF: ${msg} ${formatLocation(ast, fileName)}
- More info: https://storybook.js.org/docs/writing-stories#default-export
+ More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error
`);
this.name = this.constructor.name;
}
@@ -193,7 +193,7 @@ export class MultipleMetaError extends Error {
super(dedent`
CSF: ${message} ${formatLocation(ast, fileName)}
- More info: https://storybook.js.org/docs/writing-stories#default-export
+ More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error
`);
this.name = this.constructor.name;
}
@@ -205,7 +205,7 @@ export class MixedFactoryError extends Error {
super(dedent`
CSF: ${message} ${formatLocation(ast, fileName)}
- More info: https://storybook.js.org/docs/writing-stories#default-export
+ More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error
`);
this.name = this.constructor.name;
}
@@ -217,7 +217,7 @@ export class BadMetaError extends Error {
super(dedent`
CSF: ${message} ${formatLocation(ast, fileName)}
- More info: https://storybook.js.org/docs/writing-stories#default-export
+ More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error
`);
this.name = this.constructor.name;
}
diff --git a/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts b/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts
index d630634ee352..728032573440 100644
--- a/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts
+++ b/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts
@@ -114,7 +114,7 @@ export const parseArgsParam = (argsString: string): Args => {
once.warn(dedent`
Omitted potentially unsafe URL args.
- More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url
+ More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url?utm_source=error
`);
return acc;
}, {} as Args);
diff --git a/code/core/src/preview-api/modules/store/args.ts b/code/core/src/preview-api/modules/store/args.ts
index 96e9a10dde3e..a54edf34fcbf 100644
--- a/code/core/src/preview-api/modules/store/args.ts
+++ b/code/core/src/preview-api/modules/store/args.ts
@@ -119,7 +119,7 @@ export const validateOptions = (args: Args, argTypes: ArgTypes): Args => {
once.error(dedent`
Invalid argType: '${key}.options' should be an array.
- More info: https://storybook.js.org/docs/api/arg-types
+ More info: https://storybook.js.org/docs/api/arg-types?utm_source=error
`);
return allowArg();
}
@@ -128,7 +128,7 @@ export const validateOptions = (args: Args, argTypes: ArgTypes): Args => {
once.error(dedent`
Invalid argType: '${key}.options' should only contain primitives. Use a 'mapping' for complex values.
- More info: https://storybook.js.org/docs/writing-stories/args#mapping-to-complex-arg-values
+ More info: https://storybook.js.org/docs/writing-stories/args#mapping-to-complex-arg-values?utm_source=error
`);
return allowArg();
}
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index 3d5750e2a1c8..12cf809a352b 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -339,7 +339,7 @@ export function createPlaywrightTest(
do:
await mount( )
- More info: https://storybook.js.org/docs/api/portable-stories-playwright
+ More info: https://storybook.js.org/docs/api/portable-stories-playwright?utm_source=error
`);
}
diff --git a/code/core/src/preview-errors.ts b/code/core/src/preview-errors.ts
index 1a389dced2d9..90f09bc5f2d5 100644
--- a/code/core/src/preview-errors.ts
+++ b/code/core/src/preview-errors.ts
@@ -231,7 +231,7 @@ export class MountMustBeDestructuredError extends StorybookError {
Note that Angular is not supported. As async/await is transpiled to support the zone.js polyfill.
- More info: https://storybook.js.org/docs/writing-tests/interaction-testing#run-code-before-the-component-gets-rendered
+ More info: https://storybook.js.org/docs/writing-tests/interaction-testing#run-code-before-the-component-gets-rendered?utm_source=error
Received the following play function:
${data.playFunction}`,
diff --git a/code/core/src/router/utils.ts b/code/core/src/router/utils.ts
index 2305c01f5fb7..b3ed2fc9f472 100644
--- a/code/core/src/router/utils.ts
+++ b/code/core/src/router/utils.ts
@@ -197,7 +197,7 @@ export const buildArgsParam = (initialArgs: Args | undefined, args: Args): strin
once.warn(dedent`
Omitted potentially unsafe URL args.
- More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url
+ More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url?utm_source=error
`);
return acc;
}, {} as Args);
diff --git a/code/core/src/server-errors.ts b/code/core/src/server-errors.ts
index 66861bfe60a7..975616acbcee 100644
--- a/code/core/src/server-errors.ts
+++ b/code/core/src/server-errors.ts
@@ -218,7 +218,8 @@ export class MissingAngularJsonError extends StorybookError {
super({
category: Category.CLI_INIT,
code: 2,
- documentation: 'https://storybook.js.org/docs/faq#error-no-angularjson-file-found',
+ documentation:
+ 'https://storybook.js.org/docs/faq#error-no-angularjson-file-found?utm_source=error',
message: dedent`
An angular.json file was not found in the current working directory: ${data.path}
Storybook needs it to work properly, so please rerun the command at the root of your project, where the angular.json file is located.`,
@@ -356,13 +357,13 @@ export class MainFileMissingError extends StorybookError {
storybook: {
helperMessage:
'You can pass a --config-dir flag to tell Storybook, where your main.js file is located at.',
- documentation: 'https://storybook.js.org/docs/configure',
+ documentation: 'https://storybook.js.org/docs/configure?utm_source=error',
},
vitest: {
helperMessage:
'You can pass a configDir plugin option to tell where your main.js file is located at.',
// TODO: add proper docs once available
- documentation: 'https://storybook.js.org/docs/configure',
+ documentation: 'https://storybook.js.org/docs/configure?utm_source=error',
},
};
const { documentation, helperMessage } = map[data.source || 'storybook'];
@@ -542,7 +543,7 @@ export class CommonJsConfigNotSupportedError extends StorybookError {
super({
category: Category.CLI_AUTOMIGRATE,
code: 1,
- documentation: 'https://storybook.js.org/docs/configure/overview#es-modules',
+ documentation: 'https://storybook.js.org/docs/configure/overview#es-modules?utm_source=error',
message: dedent`
Support for CommonJS Storybook config files has been removed in Storybook 10.0.0.
Please migrate your config to a valid ESM file.
diff --git a/code/core/src/storybook-error.ts b/code/core/src/storybook-error.ts
index c7b09eacb8fe..f3bed41d12e5 100644
--- a/code/core/src/storybook-error.ts
+++ b/code/core/src/storybook-error.ts
@@ -65,11 +65,13 @@ export abstract class StorybookError extends Error {
let page: string | undefined;
if (documentation === true) {
- page = `https://storybook.js.org/error/${parseErrorCode({ code, category })}`;
+ page = `https://storybook.js.org/error/${parseErrorCode({ code, category })}?utm_source=error`;
} else if (typeof documentation === 'string') {
- page = documentation;
+ page = documentation.includes('storybook.js.org')
+ ? `${documentation}${documentation.includes('?') ? '&' : '?'}utm_source=error`
+ : documentation;
} else if (Array.isArray(documentation)) {
- page = `\n${documentation.map((doc) => `\t- ${doc}`).join('\n')}`;
+ page = `\n${documentation.map((doc) => `\t- ${doc.includes('storybook.js.org') ? `${doc}${doc.includes('?') ? '&' : '?'}utm_source=error` : doc}`).join('\n')}`;
}
return `${message}${page != null ? `\n\nMore info: ${page}\n` : ''}`;
diff --git a/code/core/src/test/testing-library.ts b/code/core/src/test/testing-library.ts
index 6c91eb8f52db..37c8b7e63d68 100644
--- a/code/core/src/test/testing-library.ts
+++ b/code/core/src/test/testing-library.ts
@@ -26,7 +26,7 @@ testingLibrary.screen = new Proxy(testingLibrary.screen, {
get(target, prop, receiver) {
once.warn(dedent`
You are using Testing Library's \`screen\` object. Use \`within(canvasElement)\` instead.
- More info: https://storybook.js.org/docs/essentials/interactions
+ More info: https://storybook.js.org/docs/essentials/interactions?utm_source=error
`);
return Reflect.get(target, prop, receiver);
},
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.test.ts b/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.test.ts
index 1dcdce0c2526..51ab2581be18 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.test.ts
@@ -111,7 +111,7 @@ describe('logMigrationSummary', () => {
The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
- Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide
+ Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?utm_source=error
And reach out on Discord if you need help: https://discord.gg/storybook"
`);
});
@@ -132,7 +132,7 @@ describe('logMigrationSummary', () => {
The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
- Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide
+ Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?utm_source=error
And reach out on Discord if you need help: https://discord.gg/storybook"
`);
});
@@ -153,7 +153,7 @@ describe('logMigrationSummary', () => {
The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
- Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide
+ Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?utm_source=error
And reach out on Discord if you need help: https://discord.gg/storybook"
`);
});
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.ts b/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.ts
index 6e676dcd53e4..b095044b50bb 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.ts
@@ -63,7 +63,7 @@ export function logMigrationSummary({
The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
Please check the changelog and migration guide for manual migrations and more information: ${picocolors.yellow(
- 'https://storybook.js.org/docs/releases/migration-guide'
+ 'https://storybook.js.org/docs/releases/migration-guide?utm_source=error'
)}
And reach out on Discord if you need help: ${picocolors.yellow('https://discord.gg/storybook')}
`);
diff --git a/code/lib/cli-storybook/src/codemod/csf-factories.ts b/code/lib/cli-storybook/src/codemod/csf-factories.ts
index 52c8c24aabd4..5284e92f38bf 100644
--- a/code/lib/cli-storybook/src/codemod/csf-factories.ts
+++ b/code/lib/cli-storybook/src/codemod/csf-factories.ts
@@ -70,7 +70,7 @@ export const csfFactories: CommandFix = {
However, please note that this might not work if you have an outdated tsconfig, use custom paths, or have type alias plugins configured in your project. You can always rerun this codemod and select another option to update your code later.
- More info: ${picocolors.yellow('https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports')}
+ More info: ${picocolors.yellow('https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports?utm_source=error')}
As we modify your story files, we can create two types of imports:
@@ -127,7 +127,7 @@ export const csfFactories: CommandFix = {
You can now run Storybook with the new CSF factories format.
For more info, check out the docs:
- ${picocolors.yellow('https://storybook.js.org/docs/api/csf/csf-factories')}
+ ${picocolors.yellow('https://storybook.js.org/docs/api/csf/csf-factories?utm_source=error')}
`
);
},
From fbadc4785de2eb875b448773ca838c89761411f3 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 18 Aug 2025 11:37:32 +0800
Subject: [PATCH 03/10] Add additional utm_source=upgrade/error/ui
---
.../docs/src/blocks/components/ArgsTable/ArgControl.tsx | 2 +-
.../docs/src/blocks/components/ArgsTable/ArgsTable.tsx | 2 +-
code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx | 4 ++--
code/addons/docs/src/blocks/components/Story.tsx | 2 +-
code/addons/vitest/src/preset.ts | 2 +-
code/core/src/core-server/utils/StoryIndexGenerator.ts | 2 +-
.../src/manager/components/mobile/about/MobileAbout.tsx | 2 +-
code/core/src/manager/components/panel/Panel.tsx | 2 +-
code/core/src/manager/components/sidebar/RefBlocks.tsx | 2 +-
code/core/src/manager/components/sidebar/RefIndicator.tsx | 4 ++--
code/core/src/manager/settings/About.tsx | 2 +-
code/core/src/manager/settings/SettingsFooter.tsx | 4 ++--
code/lib/cli-storybook/src/autoblock/block-major-version.ts | 4 ++--
.../src/automigrate/helpers/logMigrationSummary.test.ts | 6 +++---
.../src/automigrate/helpers/logMigrationSummary.ts | 2 +-
code/lib/cli-storybook/src/codemod/csf-factories.ts | 4 ++--
code/lib/cli-storybook/src/upgrade.ts | 2 +-
17 files changed, 24 insertions(+), 24 deletions(-)
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
index a5c18cc927dc..6b0781e4816e 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
@@ -72,7 +72,7 @@ export const ArgControl: FC = ({ row, arg, updateArgs, isHovere
if (!control || control.disable) {
const canBeSetup = control?.disable !== true && row?.type?.name !== 'function';
return isHovered && canBeSetup ? (
-
+
Setup controls
) : (
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
index 4f458a703cae..81d920f46802 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
@@ -331,7 +331,7 @@ export const ArgsTable: FC = (props) => {
return (
{error}
-
+
Read the docs
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx b/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx
index e2c1cda1f6df..1c2560bd9fb8 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx
@@ -67,7 +67,7 @@ export const Empty: FC = ({ inAddonPanel }) => {
{inAddonPanel && (
<>
@@ -77,7 +77,7 @@ export const Empty: FC = ({ inAddonPanel }) => {
)}
{!inAddonPanel && (
diff --git a/code/addons/docs/src/blocks/components/Story.tsx b/code/addons/docs/src/blocks/components/Story.tsx
index 178475f1fa49..1086ce4e6bf8 100644
--- a/code/addons/docs/src/blocks/components/Story.tsx
+++ b/code/addons/docs/src/blocks/components/Story.tsx
@@ -126,7 +126,7 @@ const Story: FunctionComponent = (props) => {
return (
This story mounts inside of play. Set{' '}
- autoplay {' '}
+ autoplay {' '}
to true to view this story.
);
diff --git a/code/addons/vitest/src/preset.ts b/code/addons/vitest/src/preset.ts
index 34f0a2e49649..dffe792b6e7d 100644
--- a/code/addons/vitest/src/preset.ts
+++ b/code/addons/vitest/src/preset.ts
@@ -66,7 +66,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
log(dedent`
You're using ${framework}, which is a Webpack-based builder. In order to use Storybook Test, with your project, you need to use '@storybook/nextjs-vite', a high performance Vite-based equivalent.
- Information on how to upgrade here: ${picocolors.yellow('https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite')}\n
+ Information on how to upgrade here: ${picocolors.yellow('https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite?utm_source=upgrade')}\n
`);
}
return channel;
diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index ccf1221f4853..697e3449e865 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -593,7 +593,7 @@ export class StoryIndexGenerator {
if (err && (err as { source: any }).source?.match(/mdast-util-mdx-jsx/g)) {
logger.warn(
`💡 This seems to be an MDX2 syntax error. Please refer to the MDX section in the following resource for assistance on how to fix this: ${picocolors.yellow(
- 'https://storybook.js.org/migration-guides/7.0'
+ 'https://storybook.js.org/migration-guides/7.0?utm_source=error'
)}`
);
}
diff --git a/code/core/src/manager/components/mobile/about/MobileAbout.tsx b/code/core/src/manager/components/mobile/about/MobileAbout.tsx
index 03edc8beae1c..87d21618524e 100644
--- a/code/core/src/manager/components/mobile/about/MobileAbout.tsx
+++ b/code/core/src/manager/components/mobile/about/MobileAbout.tsx
@@ -40,7 +40,7 @@ export const MobileAbout: FC = () => {
diff --git a/code/core/src/manager/components/panel/Panel.tsx b/code/core/src/manager/components/panel/Panel.tsx
index 4af4608a69df..aa24870abc0c 100644
--- a/code/core/src/manager/components/panel/Panel.tsx
+++ b/code/core/src/manager/components/panel/Panel.tsx
@@ -75,7 +75,7 @@ export const AddonPanel = React.memo<{
>
}
footer={
-
+
Explore integrations catalog
}
diff --git a/code/core/src/manager/components/sidebar/RefBlocks.tsx b/code/core/src/manager/components/sidebar/RefBlocks.tsx
index 64f45b091b99..c1a1fa6114ac 100644
--- a/code/core/src/manager/components/sidebar/RefBlocks.tsx
+++ b/code/core/src/manager/components/sidebar/RefBlocks.tsx
@@ -120,7 +120,7 @@ export const ErrorBlock: FC<{ error: Error }> = ({ error }) => (
View error
{' '}
-
+
View docs
diff --git a/code/core/src/manager/components/sidebar/RefIndicator.tsx b/code/core/src/manager/components/sidebar/RefIndicator.tsx
index ae8c6d010220..01095b18eba5 100644
--- a/code/core/src/manager/components/sidebar/RefIndicator.tsx
+++ b/code/core/src/manager/components/sidebar/RefIndicator.tsx
@@ -308,7 +308,7 @@ const ReadDocsMessage: FC = () => {
const theme = useTheme();
return (
-
+
Read Composition docs
@@ -351,7 +351,7 @@ const PerformanceDegradedMessage: FC = () => {
const theme = useTheme();
return (
-
+
Reduce lag
diff --git a/code/core/src/manager/settings/About.tsx b/code/core/src/manager/settings/About.tsx
index e2507eebdfb8..b5a01e5472cc 100644
--- a/code/core/src/manager/settings/About.tsx
+++ b/code/core/src/manager/settings/About.tsx
@@ -73,7 +73,7 @@ const AboutScreen: FC<{ onNavigateToWhatsNew?: () => void }> = ({ onNavigateToWh
-
+
Documentation
diff --git a/code/core/src/manager/settings/SettingsFooter.tsx b/code/core/src/manager/settings/SettingsFooter.tsx
index e2e767f2b254..3ee76ae32c0f 100644
--- a/code/core/src/manager/settings/SettingsFooter.tsx
+++ b/code/core/src/manager/settings/SettingsFooter.tsx
@@ -18,7 +18,7 @@ const Footer = styled.div(({ theme }) => ({
}));
const SettingsFooter: FC = (props) => (
-
+
Docs
@@ -26,7 +26,7 @@ const SettingsFooter: FC = (props) => (
diff --git a/code/lib/cli-storybook/src/autoblock/block-major-version.ts b/code/lib/cli-storybook/src/autoblock/block-major-version.ts
index 00b5a93b81d3..2ce062a3bc96 100644
--- a/code/lib/cli-storybook/src/autoblock/block-major-version.ts
+++ b/code/lib/cli-storybook/src/autoblock/block-major-version.ts
@@ -79,7 +79,7 @@ export const blocker = createBlocker({
Your Storybook version (v${data.currentVersion}) is newer than the target release (v${versions.storybook}).Downgrading is not supported.
Please follow the 8.0 migration guide to upgrade to v8.0 first.
`,
- link: 'https://storybook.js.org/docs/8/migration-guide',
+ link: 'https://storybook.js.org/docs/8/migration-guide?utm_source=upgrade',
};
}
@@ -94,7 +94,7 @@ export const blocker = createBlocker({
You can upgrade to version ${nextMajor} by running:
${CLI_COLORS.info(`npx storybook@${nextMajor} upgrade`)}
`,
- link: `https://storybook.js.org/docs/${nextMajor}/migration-guide`,
+ link: `https://storybook.js.org/docs/${nextMajor}/migration-guide?utm_source=upgrade`,
};
}
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.test.ts b/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.test.ts
index 51ab2581be18..32fce4176067 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.test.ts
@@ -111,7 +111,7 @@ describe('logMigrationSummary', () => {
The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
- Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?utm_source=error
+ Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?utm_source=upgrade
And reach out on Discord if you need help: https://discord.gg/storybook"
`);
});
@@ -132,7 +132,7 @@ describe('logMigrationSummary', () => {
The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
- Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?utm_source=error
+ Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?utm_source=upgrade
And reach out on Discord if you need help: https://discord.gg/storybook"
`);
});
@@ -153,7 +153,7 @@ describe('logMigrationSummary', () => {
The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
- Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?utm_source=error
+ Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?utm_source=upgrade
And reach out on Discord if you need help: https://discord.gg/storybook"
`);
});
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.ts b/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.ts
index b095044b50bb..6db36fbbeefb 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.ts
@@ -63,7 +63,7 @@ export function logMigrationSummary({
The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
Please check the changelog and migration guide for manual migrations and more information: ${picocolors.yellow(
- 'https://storybook.js.org/docs/releases/migration-guide?utm_source=error'
+ 'https://storybook.js.org/docs/releases/migration-guide?utm_source=upgrade'
)}
And reach out on Discord if you need help: ${picocolors.yellow('https://discord.gg/storybook')}
`);
diff --git a/code/lib/cli-storybook/src/codemod/csf-factories.ts b/code/lib/cli-storybook/src/codemod/csf-factories.ts
index 5284e92f38bf..75ab11f2b2f2 100644
--- a/code/lib/cli-storybook/src/codemod/csf-factories.ts
+++ b/code/lib/cli-storybook/src/codemod/csf-factories.ts
@@ -70,7 +70,7 @@ export const csfFactories: CommandFix = {
However, please note that this might not work if you have an outdated tsconfig, use custom paths, or have type alias plugins configured in your project. You can always rerun this codemod and select another option to update your code later.
- More info: ${picocolors.yellow('https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports?utm_source=error')}
+ More info: ${picocolors.yellow('https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports?utm_source=upgrade')}
As we modify your story files, we can create two types of imports:
@@ -127,7 +127,7 @@ export const csfFactories: CommandFix = {
You can now run Storybook with the new CSF factories format.
For more info, check out the docs:
- ${picocolors.yellow('https://storybook.js.org/docs/api/csf/csf-factories?utm_source=error')}
+ ${picocolors.yellow('https://storybook.js.org/docs/api/csf/csf-factories?utm_source=upgrade')}
`
);
},
diff --git a/code/lib/cli-storybook/src/upgrade.ts b/code/lib/cli-storybook/src/upgrade.ts
index ce2dd03fbcd7..6ca6a7b40189 100644
--- a/code/lib/cli-storybook/src/upgrade.ts
+++ b/code/lib/cli-storybook/src/upgrade.ts
@@ -265,7 +265,7 @@ function logUpgradeResults(
}
logger.log(
- `For a full list of changes, please check our migration guide: ${CLI_COLORS.cta('https://storybook.js.org/docs/releases/migration-guide')}`
+ `For a full list of changes, please check our migration guide: ${CLI_COLORS.cta('https://storybook.js.org/docs/releases/migration-guide?utm_source=upgrade')}`
);
}
From 0ce927bd9b82e64c27050bdfca4d26defa277d91 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 18 Aug 2025 13:25:32 +0800
Subject: [PATCH 04/10] Fix linting
---
.../src/blocks/components/ArgsTable/ArgControl.tsx | 6 +++++-
code/addons/docs/src/blocks/components/Story.tsx | 4 +++-
code/core/src/manager/components/panel/Panel.tsx | 6 +++++-
code/core/src/manager/components/sidebar/RefBlocks.tsx | 7 ++++++-
.../src/manager/components/sidebar/RefIndicator.tsx | 10 ++++++++--
5 files changed, 27 insertions(+), 6 deletions(-)
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
index 6b0781e4816e..794e16e9d13d 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
@@ -72,7 +72,11 @@ export const ArgControl: FC = ({ row, arg, updateArgs, isHovere
if (!control || control.disable) {
const canBeSetup = control?.disable !== true && row?.type?.name !== 'function';
return isHovered && canBeSetup ? (
-
+
Setup controls
) : (
diff --git a/code/addons/docs/src/blocks/components/Story.tsx b/code/addons/docs/src/blocks/components/Story.tsx
index 1086ce4e6bf8..c2e38d1da0b1 100644
--- a/code/addons/docs/src/blocks/components/Story.tsx
+++ b/code/addons/docs/src/blocks/components/Story.tsx
@@ -126,7 +126,9 @@ const Story: FunctionComponent = (props) => {
return (
This story mounts inside of play. Set{' '}
- autoplay {' '}
+
+ autoplay
+ {' '}
to true to view this story.
);
diff --git a/code/core/src/manager/components/panel/Panel.tsx b/code/core/src/manager/components/panel/Panel.tsx
index aa24870abc0c..8ae73f209c96 100644
--- a/code/core/src/manager/components/panel/Panel.tsx
+++ b/code/core/src/manager/components/panel/Panel.tsx
@@ -75,7 +75,11 @@ export const AddonPanel = React.memo<{
>
}
footer={
-
+
Explore integrations catalog
}
diff --git a/code/core/src/manager/components/sidebar/RefBlocks.tsx b/code/core/src/manager/components/sidebar/RefBlocks.tsx
index c1a1fa6114ac..5655ca59fbe9 100644
--- a/code/core/src/manager/components/sidebar/RefBlocks.tsx
+++ b/code/core/src/manager/components/sidebar/RefBlocks.tsx
@@ -120,7 +120,12 @@ export const ErrorBlock: FC<{ error: Error }> = ({ error }) => (
View error
{' '}
-
+
View docs
diff --git a/code/core/src/manager/components/sidebar/RefIndicator.tsx b/code/core/src/manager/components/sidebar/RefIndicator.tsx
index 01095b18eba5..a759e9f54baa 100644
--- a/code/core/src/manager/components/sidebar/RefIndicator.tsx
+++ b/code/core/src/manager/components/sidebar/RefIndicator.tsx
@@ -308,7 +308,10 @@ const ReadDocsMessage: FC = () => {
const theme = useTheme();
return (
-
+
Read Composition docs
@@ -351,7 +354,10 @@ const PerformanceDegradedMessage: FC = () => {
const theme = useTheme();
return (
-
+
Reduce lag
From 009bd770ccdd9271fa4142c7aca6bc32eb72dc58 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 19 Aug 2025 09:48:08 +0800
Subject: [PATCH 05/10] Use ref instead of utm_source
---
code/addons/vitest/src/preset.ts | 2 +-
code/core/src/__tests/storybook-error.test.ts | 2 +-
.../src/core-server/utils/StoryIndexGenerator.ts | 2 +-
.../utils/__tests__/remove-mdx-stories.test.ts | 2 +-
code/core/src/csf-tools/CsfFile.test.ts | 14 +++++++-------
code/core/src/csf-tools/CsfFile.ts | 8 ++++----
.../modules/preview-web/parseArgsParam.ts | 2 +-
code/core/src/preview-api/modules/store/args.ts | 4 ++--
.../modules/store/csf/portable-stories.ts | 2 +-
code/core/src/preview-errors.ts | 2 +-
code/core/src/router/utils.ts | 2 +-
code/core/src/server-errors.ts | 9 ++++-----
code/core/src/storybook-error.ts | 6 +++---
code/core/src/test/testing-library.ts | 2 +-
.../src/autoblock/block-major-version.ts | 4 ++--
.../helpers/logMigrationSummary.test.ts | 6 +++---
.../src/automigrate/helpers/logMigrationSummary.ts | 2 +-
.../lib/cli-storybook/src/codemod/csf-factories.ts | 4 ++--
code/lib/cli-storybook/src/upgrade.ts | 2 +-
19 files changed, 38 insertions(+), 39 deletions(-)
diff --git a/code/addons/vitest/src/preset.ts b/code/addons/vitest/src/preset.ts
index dffe792b6e7d..738ace28432f 100644
--- a/code/addons/vitest/src/preset.ts
+++ b/code/addons/vitest/src/preset.ts
@@ -66,7 +66,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
log(dedent`
You're using ${framework}, which is a Webpack-based builder. In order to use Storybook Test, with your project, you need to use '@storybook/nextjs-vite', a high performance Vite-based equivalent.
- Information on how to upgrade here: ${picocolors.yellow('https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite?utm_source=upgrade')}\n
+ Information on how to upgrade here: ${picocolors.yellow('https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite?ref=upgrade')}\n
`);
}
return channel;
diff --git a/code/core/src/__tests/storybook-error.test.ts b/code/core/src/__tests/storybook-error.test.ts
index 1a8b50e71ea8..fa57a2db1076 100644
--- a/code/core/src/__tests/storybook-error.test.ts
+++ b/code/core/src/__tests/storybook-error.test.ts
@@ -28,7 +28,7 @@ describe('StorybookError', () => {
it('should generate the correct message with internal documentation link', () => {
const error = new TestError(true);
const expectedMessage =
- 'This is a test error.\n\nMore info: https://storybook.js.org/error/SB_TEST_CATEGORY_0123?utm_source=error\n';
+ 'This is a test error.\n\nMore info: https://storybook.js.org/error/SB_TEST_CATEGORY_0123?ref=error\n';
expect(error.message).toBe(expectedMessage);
});
diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index 697e3449e865..39547e7a0618 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -593,7 +593,7 @@ export class StoryIndexGenerator {
if (err && (err as { source: any }).source?.match(/mdast-util-mdx-jsx/g)) {
logger.warn(
`💡 This seems to be an MDX2 syntax error. Please refer to the MDX section in the following resource for assistance on how to fix this: ${picocolors.yellow(
- 'https://storybook.js.org/migration-guides/7.0?utm_source=error'
+ 'https://storybook.js.org/migration-guides/7.0?ref=error'
)}`
);
}
diff --git a/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts b/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts
index 810ce5b49b7c..a9fa1f41af93 100644
--- a/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts
+++ b/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts
@@ -56,7 +56,7 @@ Your main configuration somehow does not contain a 'stories' field, or it resolv
Please check your main configuration file and make sure it exports a 'stories' field that is not an empty array.
-More info: https://storybook.js.org/docs/faq#can-i-have-a-storybook-with-no-local-stories?utm_source=error
+More info: https://storybook.js.org/docs/faq#can-i-have-a-storybook-with-no-local-stories?ref=error
]
`);
});
diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index 2505ce182a2d..4299b8d586ff 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -2513,7 +2513,7 @@ describe('CsfFile', () => {
).toThrowErrorMatchingInlineSnapshot(`
[MultipleMetaError: CSF: multiple meta objects (line 4, col 24)
- More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error]
+ More info: https://storybook.js.org/docs/writing-stories#default-export?ref=error]
`);
});
@@ -2531,7 +2531,7 @@ describe('CsfFile', () => {
).toThrowErrorMatchingInlineSnapshot(`
[MultipleMetaError: CSF: multiple meta objects (line 3, col 25)
- More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error]
+ More info: https://storybook.js.org/docs/writing-stories#default-export?ref=error]
`);
});
@@ -2549,7 +2549,7 @@ describe('CsfFile', () => {
).toThrowErrorMatchingInlineSnapshot(`
[MultipleMetaError: CSF: multiple meta objects
- More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error]
+ More info: https://storybook.js.org/docs/writing-stories#default-export?ref=error]
`);
});
@@ -2565,7 +2565,7 @@ describe('CsfFile', () => {
).toThrowErrorMatchingInlineSnapshot(`
[BadMetaError: CSF: meta() factory must be imported from .storybook/preview configuration (line 1, col 0)
- More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error]
+ More info: https://storybook.js.org/docs/writing-stories#default-export?ref=error]
`);
});
@@ -2582,7 +2582,7 @@ describe('CsfFile', () => {
).toThrowErrorMatchingInlineSnapshot(`
[BadMetaError: CSF: meta() factory must be imported from .storybook/preview configuration (line 4, col 28)
- More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error]
+ More info: https://storybook.js.org/docs/writing-stories#default-export?ref=error]
`);
});
@@ -2599,7 +2599,7 @@ describe('CsfFile', () => {
).toThrowErrorMatchingInlineSnapshot(`
[MixedFactoryError: CSF: expected factory story (line 4, col 17)
- More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error]
+ More info: https://storybook.js.org/docs/writing-stories#default-export?ref=error]
`);
});
@@ -2616,7 +2616,7 @@ describe('CsfFile', () => {
).toThrowErrorMatchingInlineSnapshot(`
[MixedFactoryError: CSF: expected non-factory story (line 4, col 28)
- More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error]
+ More info: https://storybook.js.org/docs/writing-stories#default-export?ref=error]
`);
});
});
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 5fa8c2f3153d..7e88d731e6e9 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -181,7 +181,7 @@ export class NoMetaError extends Error {
super(dedent`
CSF: ${msg} ${formatLocation(ast, fileName)}
- More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error
+ More info: https://storybook.js.org/docs/writing-stories#default-export?ref=error
`);
this.name = this.constructor.name;
}
@@ -193,7 +193,7 @@ export class MultipleMetaError extends Error {
super(dedent`
CSF: ${message} ${formatLocation(ast, fileName)}
- More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error
+ More info: https://storybook.js.org/docs/writing-stories#default-export?ref=error
`);
this.name = this.constructor.name;
}
@@ -205,7 +205,7 @@ export class MixedFactoryError extends Error {
super(dedent`
CSF: ${message} ${formatLocation(ast, fileName)}
- More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error
+ More info: https://storybook.js.org/docs/writing-stories#default-export?ref=error
`);
this.name = this.constructor.name;
}
@@ -217,7 +217,7 @@ export class BadMetaError extends Error {
super(dedent`
CSF: ${message} ${formatLocation(ast, fileName)}
- More info: https://storybook.js.org/docs/writing-stories#default-export?utm_source=error
+ More info: https://storybook.js.org/docs/writing-stories#default-export?ref=error
`);
this.name = this.constructor.name;
}
diff --git a/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts b/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts
index 728032573440..bacf9f71b3ca 100644
--- a/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts
+++ b/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts
@@ -114,7 +114,7 @@ export const parseArgsParam = (argsString: string): Args => {
once.warn(dedent`
Omitted potentially unsafe URL args.
- More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url?utm_source=error
+ More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url?ref=error
`);
return acc;
}, {} as Args);
diff --git a/code/core/src/preview-api/modules/store/args.ts b/code/core/src/preview-api/modules/store/args.ts
index a54edf34fcbf..b0ea443e274b 100644
--- a/code/core/src/preview-api/modules/store/args.ts
+++ b/code/core/src/preview-api/modules/store/args.ts
@@ -119,7 +119,7 @@ export const validateOptions = (args: Args, argTypes: ArgTypes): Args => {
once.error(dedent`
Invalid argType: '${key}.options' should be an array.
- More info: https://storybook.js.org/docs/api/arg-types?utm_source=error
+ More info: https://storybook.js.org/docs/api/arg-types?ref=error
`);
return allowArg();
}
@@ -128,7 +128,7 @@ export const validateOptions = (args: Args, argTypes: ArgTypes): Args => {
once.error(dedent`
Invalid argType: '${key}.options' should only contain primitives. Use a 'mapping' for complex values.
- More info: https://storybook.js.org/docs/writing-stories/args#mapping-to-complex-arg-values?utm_source=error
+ More info: https://storybook.js.org/docs/writing-stories/args#mapping-to-complex-arg-values?ref=error
`);
return allowArg();
}
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index 12cf809a352b..639627cf4aa9 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -339,7 +339,7 @@ export function createPlaywrightTest(
do:
await mount( )
- More info: https://storybook.js.org/docs/api/portable-stories-playwright?utm_source=error
+ More info: https://storybook.js.org/docs/api/portable-stories-playwright?ref=error
`);
}
diff --git a/code/core/src/preview-errors.ts b/code/core/src/preview-errors.ts
index 90f09bc5f2d5..3c96dc1aeb68 100644
--- a/code/core/src/preview-errors.ts
+++ b/code/core/src/preview-errors.ts
@@ -231,7 +231,7 @@ export class MountMustBeDestructuredError extends StorybookError {
Note that Angular is not supported. As async/await is transpiled to support the zone.js polyfill.
- More info: https://storybook.js.org/docs/writing-tests/interaction-testing#run-code-before-the-component-gets-rendered?utm_source=error
+ More info: https://storybook.js.org/docs/writing-tests/interaction-testing#run-code-before-the-component-gets-rendered?ref=error
Received the following play function:
${data.playFunction}`,
diff --git a/code/core/src/router/utils.ts b/code/core/src/router/utils.ts
index b3ed2fc9f472..6dccce564d5f 100644
--- a/code/core/src/router/utils.ts
+++ b/code/core/src/router/utils.ts
@@ -197,7 +197,7 @@ export const buildArgsParam = (initialArgs: Args | undefined, args: Args): strin
once.warn(dedent`
Omitted potentially unsafe URL args.
- More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url?utm_source=error
+ More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url?ref=error
`);
return acc;
}, {} as Args);
diff --git a/code/core/src/server-errors.ts b/code/core/src/server-errors.ts
index 975616acbcee..b7eb5a588c56 100644
--- a/code/core/src/server-errors.ts
+++ b/code/core/src/server-errors.ts
@@ -218,8 +218,7 @@ export class MissingAngularJsonError extends StorybookError {
super({
category: Category.CLI_INIT,
code: 2,
- documentation:
- 'https://storybook.js.org/docs/faq#error-no-angularjson-file-found?utm_source=error',
+ documentation: 'https://storybook.js.org/docs/faq#error-no-angularjson-file-found?ref=error',
message: dedent`
An angular.json file was not found in the current working directory: ${data.path}
Storybook needs it to work properly, so please rerun the command at the root of your project, where the angular.json file is located.`,
@@ -357,13 +356,13 @@ export class MainFileMissingError extends StorybookError {
storybook: {
helperMessage:
'You can pass a --config-dir flag to tell Storybook, where your main.js file is located at.',
- documentation: 'https://storybook.js.org/docs/configure?utm_source=error',
+ documentation: 'https://storybook.js.org/docs/configure?ref=error',
},
vitest: {
helperMessage:
'You can pass a configDir plugin option to tell where your main.js file is located at.',
// TODO: add proper docs once available
- documentation: 'https://storybook.js.org/docs/configure?utm_source=error',
+ documentation: 'https://storybook.js.org/docs/configure?ref=error',
},
};
const { documentation, helperMessage } = map[data.source || 'storybook'];
@@ -543,7 +542,7 @@ export class CommonJsConfigNotSupportedError extends StorybookError {
super({
category: Category.CLI_AUTOMIGRATE,
code: 1,
- documentation: 'https://storybook.js.org/docs/configure/overview#es-modules?utm_source=error',
+ documentation: 'https://storybook.js.org/docs/configure/overview#es-modules?ref=error',
message: dedent`
Support for CommonJS Storybook config files has been removed in Storybook 10.0.0.
Please migrate your config to a valid ESM file.
diff --git a/code/core/src/storybook-error.ts b/code/core/src/storybook-error.ts
index f3bed41d12e5..b622ff829c5a 100644
--- a/code/core/src/storybook-error.ts
+++ b/code/core/src/storybook-error.ts
@@ -65,13 +65,13 @@ export abstract class StorybookError extends Error {
let page: string | undefined;
if (documentation === true) {
- page = `https://storybook.js.org/error/${parseErrorCode({ code, category })}?utm_source=error`;
+ page = `https://storybook.js.org/error/${parseErrorCode({ code, category })}?ref=error`;
} else if (typeof documentation === 'string') {
page = documentation.includes('storybook.js.org')
- ? `${documentation}${documentation.includes('?') ? '&' : '?'}utm_source=error`
+ ? `${documentation}${documentation.includes('?') ? '&' : '?'}ref=error`
: documentation;
} else if (Array.isArray(documentation)) {
- page = `\n${documentation.map((doc) => `\t- ${doc.includes('storybook.js.org') ? `${doc}${doc.includes('?') ? '&' : '?'}utm_source=error` : doc}`).join('\n')}`;
+ page = `\n${documentation.map((doc) => `\t- ${doc.includes('storybook.js.org') ? `${doc}${doc.includes('?') ? '&' : '?'}ref=error` : doc}`).join('\n')}`;
}
return `${message}${page != null ? `\n\nMore info: ${page}\n` : ''}`;
diff --git a/code/core/src/test/testing-library.ts b/code/core/src/test/testing-library.ts
index 37c8b7e63d68..94b338e679d2 100644
--- a/code/core/src/test/testing-library.ts
+++ b/code/core/src/test/testing-library.ts
@@ -26,7 +26,7 @@ testingLibrary.screen = new Proxy(testingLibrary.screen, {
get(target, prop, receiver) {
once.warn(dedent`
You are using Testing Library's \`screen\` object. Use \`within(canvasElement)\` instead.
- More info: https://storybook.js.org/docs/essentials/interactions?utm_source=error
+ More info: https://storybook.js.org/docs/essentials/interactions?ref=error
`);
return Reflect.get(target, prop, receiver);
},
diff --git a/code/lib/cli-storybook/src/autoblock/block-major-version.ts b/code/lib/cli-storybook/src/autoblock/block-major-version.ts
index 2ce062a3bc96..03c390321fa3 100644
--- a/code/lib/cli-storybook/src/autoblock/block-major-version.ts
+++ b/code/lib/cli-storybook/src/autoblock/block-major-version.ts
@@ -79,7 +79,7 @@ export const blocker = createBlocker({
Your Storybook version (v${data.currentVersion}) is newer than the target release (v${versions.storybook}).Downgrading is not supported.
Please follow the 8.0 migration guide to upgrade to v8.0 first.
`,
- link: 'https://storybook.js.org/docs/8/migration-guide?utm_source=upgrade',
+ link: 'https://storybook.js.org/docs/8/migration-guide?ref=upgrade',
};
}
@@ -94,7 +94,7 @@ export const blocker = createBlocker({
You can upgrade to version ${nextMajor} by running:
${CLI_COLORS.info(`npx storybook@${nextMajor} upgrade`)}
`,
- link: `https://storybook.js.org/docs/${nextMajor}/migration-guide?utm_source=upgrade`,
+ link: `https://storybook.js.org/docs/${nextMajor}/migration-guide?ref=upgrade`,
};
}
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.test.ts b/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.test.ts
index 32fce4176067..1c4f22ff5bc7 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.test.ts
@@ -111,7 +111,7 @@ describe('logMigrationSummary', () => {
The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
- Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?utm_source=upgrade
+ Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?ref=upgrade
And reach out on Discord if you need help: https://discord.gg/storybook"
`);
});
@@ -132,7 +132,7 @@ describe('logMigrationSummary', () => {
The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
- Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?utm_source=upgrade
+ Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?ref=upgrade
And reach out on Discord if you need help: https://discord.gg/storybook"
`);
});
@@ -153,7 +153,7 @@ describe('logMigrationSummary', () => {
The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
- Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?utm_source=upgrade
+ Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/releases/migration-guide?ref=upgrade
And reach out on Discord if you need help: https://discord.gg/storybook"
`);
});
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.ts b/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.ts
index 6db36fbbeefb..527b15db41ad 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/logMigrationSummary.ts
@@ -63,7 +63,7 @@ export function logMigrationSummary({
The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
Please check the changelog and migration guide for manual migrations and more information: ${picocolors.yellow(
- 'https://storybook.js.org/docs/releases/migration-guide?utm_source=upgrade'
+ 'https://storybook.js.org/docs/releases/migration-guide?ref=upgrade'
)}
And reach out on Discord if you need help: ${picocolors.yellow('https://discord.gg/storybook')}
`);
diff --git a/code/lib/cli-storybook/src/codemod/csf-factories.ts b/code/lib/cli-storybook/src/codemod/csf-factories.ts
index 75ab11f2b2f2..cc7e23dc0e6c 100644
--- a/code/lib/cli-storybook/src/codemod/csf-factories.ts
+++ b/code/lib/cli-storybook/src/codemod/csf-factories.ts
@@ -70,7 +70,7 @@ export const csfFactories: CommandFix = {
However, please note that this might not work if you have an outdated tsconfig, use custom paths, or have type alias plugins configured in your project. You can always rerun this codemod and select another option to update your code later.
- More info: ${picocolors.yellow('https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports?utm_source=upgrade')}
+ More info: ${picocolors.yellow('https://storybook.js.org/docs/api/csf/csf-factories#subpath-imports?ref=upgrade')}
As we modify your story files, we can create two types of imports:
@@ -127,7 +127,7 @@ export const csfFactories: CommandFix = {
You can now run Storybook with the new CSF factories format.
For more info, check out the docs:
- ${picocolors.yellow('https://storybook.js.org/docs/api/csf/csf-factories?utm_source=upgrade')}
+ ${picocolors.yellow('https://storybook.js.org/docs/api/csf/csf-factories?ref=upgrade')}
`
);
},
diff --git a/code/lib/cli-storybook/src/upgrade.ts b/code/lib/cli-storybook/src/upgrade.ts
index 6ca6a7b40189..2d009c1fcef4 100644
--- a/code/lib/cli-storybook/src/upgrade.ts
+++ b/code/lib/cli-storybook/src/upgrade.ts
@@ -265,7 +265,7 @@ function logUpgradeResults(
}
logger.log(
- `For a full list of changes, please check our migration guide: ${CLI_COLORS.cta('https://storybook.js.org/docs/releases/migration-guide?utm_source=upgrade')}`
+ `For a full list of changes, please check our migration guide: ${CLI_COLORS.cta('https://storybook.js.org/docs/releases/migration-guide?ref=upgrade')}`
);
}
From 5473b316e8ab484dfa5c8455f3ab692b4af449fa Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 19 Aug 2025 11:47:30 +0800
Subject: [PATCH 06/10] Fix UI links
---
.../src/manager/components/mobile/about/MobileAbout.tsx | 2 +-
code/core/src/manager/components/panel/Panel.tsx | 6 +-----
code/core/src/manager/components/sidebar/RefBlocks.tsx | 7 +------
code/core/src/manager/components/sidebar/RefIndicator.tsx | 4 ++--
code/core/src/manager/settings/SettingsFooter.tsx | 4 ++--
5 files changed, 7 insertions(+), 16 deletions(-)
diff --git a/code/core/src/manager/components/mobile/about/MobileAbout.tsx b/code/core/src/manager/components/mobile/about/MobileAbout.tsx
index 87d21618524e..12cd552039d8 100644
--- a/code/core/src/manager/components/mobile/about/MobileAbout.tsx
+++ b/code/core/src/manager/components/mobile/about/MobileAbout.tsx
@@ -40,7 +40,7 @@ export const MobileAbout: FC = () => {
diff --git a/code/core/src/manager/components/panel/Panel.tsx b/code/core/src/manager/components/panel/Panel.tsx
index 8ae73f209c96..837ad6411fbe 100644
--- a/code/core/src/manager/components/panel/Panel.tsx
+++ b/code/core/src/manager/components/panel/Panel.tsx
@@ -75,11 +75,7 @@ export const AddonPanel = React.memo<{
>
}
footer={
-
+
Explore integrations catalog
}
diff --git a/code/core/src/manager/components/sidebar/RefBlocks.tsx b/code/core/src/manager/components/sidebar/RefBlocks.tsx
index 5655ca59fbe9..96a8eb4e468e 100644
--- a/code/core/src/manager/components/sidebar/RefBlocks.tsx
+++ b/code/core/src/manager/components/sidebar/RefBlocks.tsx
@@ -120,12 +120,7 @@ export const ErrorBlock: FC<{ error: Error }> = ({ error }) => (
View error
{' '}
-
+
View docs
diff --git a/code/core/src/manager/components/sidebar/RefIndicator.tsx b/code/core/src/manager/components/sidebar/RefIndicator.tsx
index a759e9f54baa..c7259181b29d 100644
--- a/code/core/src/manager/components/sidebar/RefIndicator.tsx
+++ b/code/core/src/manager/components/sidebar/RefIndicator.tsx
@@ -309,7 +309,7 @@ const ReadDocsMessage: FC = () => {
return (
@@ -355,7 +355,7 @@ const PerformanceDegradedMessage: FC = () => {
return (
diff --git a/code/core/src/manager/settings/SettingsFooter.tsx b/code/core/src/manager/settings/SettingsFooter.tsx
index 3ee76ae32c0f..aef9622b0b4b 100644
--- a/code/core/src/manager/settings/SettingsFooter.tsx
+++ b/code/core/src/manager/settings/SettingsFooter.tsx
@@ -18,7 +18,7 @@ const Footer = styled.div(({ theme }) => ({
}));
const SettingsFooter: FC = (props) => (
-
+
Docs
@@ -26,7 +26,7 @@ const SettingsFooter: FC = (props) => (
From 14b804173bbf288fd315fa21329e28501360d8a8 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 19 Aug 2025 12:05:12 +0800
Subject: [PATCH 07/10] Missing links
---
.../docs/src/blocks/components/ArgsTable/ArgControl.tsx | 2 +-
.../addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx | 2 +-
code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx | 4 ++--
code/addons/docs/src/blocks/components/Story.tsx | 2 +-
code/core/src/manager/settings/About.tsx | 2 +-
5 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
index 794e16e9d13d..c9b6064f9099 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
@@ -73,7 +73,7 @@ export const ArgControl: FC = ({ row, arg, updateArgs, isHovere
const canBeSetup = control?.disable !== true && row?.type?.name !== 'function';
return isHovered && canBeSetup ? (
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
index 81d920f46802..acb832016b49 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
@@ -331,7 +331,7 @@ export const ArgsTable: FC = (props) => {
return (
{error}
-
+
Read the docs
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx b/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx
index 1c2560bd9fb8..b8e0b8fbd11e 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx
@@ -67,7 +67,7 @@ export const Empty: FC = ({ inAddonPanel }) => {
{inAddonPanel && (
<>
@@ -77,7 +77,7 @@ export const Empty: FC = ({ inAddonPanel }) => {
)}
{!inAddonPanel && (
diff --git a/code/addons/docs/src/blocks/components/Story.tsx b/code/addons/docs/src/blocks/components/Story.tsx
index c2e38d1da0b1..147dd5c713ff 100644
--- a/code/addons/docs/src/blocks/components/Story.tsx
+++ b/code/addons/docs/src/blocks/components/Story.tsx
@@ -126,7 +126,7 @@ const Story: FunctionComponent = (props) => {
return (
This story mounts inside of play. Set{' '}
-
+
autoplay
{' '}
to true to view this story.
diff --git a/code/core/src/manager/settings/About.tsx b/code/core/src/manager/settings/About.tsx
index b5a01e5472cc..7985a8d4f146 100644
--- a/code/core/src/manager/settings/About.tsx
+++ b/code/core/src/manager/settings/About.tsx
@@ -73,7 +73,7 @@ const AboutScreen: FC<{ onNavigateToWhatsNew?: () => void }> = ({ onNavigateToWh
-
+
Documentation
From aa587d9d8f7b1ed8ef50c0bc93f98bdfc374f8e4 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 19 Aug 2025 12:29:43 +0800
Subject: [PATCH 08/10] Fix typos
---
code/addons/docs/src/blocks/components/Story.tsx | 2 +-
code/addons/vitest/src/preset.ts | 2 +-
code/core/src/manager/settings/SettingsFooter.tsx | 2 +-
code/core/src/preview-api/modules/store/args.ts | 2 +-
code/core/src/preview-errors.ts | 2 +-
code/core/src/router/utils.ts | 2 +-
code/core/src/server-errors.ts | 2 +-
7 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/code/addons/docs/src/blocks/components/Story.tsx b/code/addons/docs/src/blocks/components/Story.tsx
index 147dd5c713ff..5af081fce655 100644
--- a/code/addons/docs/src/blocks/components/Story.tsx
+++ b/code/addons/docs/src/blocks/components/Story.tsx
@@ -126,7 +126,7 @@ const Story: FunctionComponent = (props) => {
return (
This story mounts inside of play. Set{' '}
-
+
autoplay
{' '}
to true to view this story.
diff --git a/code/addons/vitest/src/preset.ts b/code/addons/vitest/src/preset.ts
index 738ace28432f..b96623a7ea27 100644
--- a/code/addons/vitest/src/preset.ts
+++ b/code/addons/vitest/src/preset.ts
@@ -66,7 +66,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
log(dedent`
You're using ${framework}, which is a Webpack-based builder. In order to use Storybook Test, with your project, you need to use '@storybook/nextjs-vite', a high performance Vite-based equivalent.
- Information on how to upgrade here: ${picocolors.yellow('https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite?ref=upgrade')}\n
+ Information on how to upgrade here: ${picocolors.yellow('https://storybook.js.org/docs/get-started/frameworks/nextjs?ref=upgrade#with-vite')}\n
`);
}
return channel;
diff --git a/code/core/src/manager/settings/SettingsFooter.tsx b/code/core/src/manager/settings/SettingsFooter.tsx
index aef9622b0b4b..7bdabf27f6cc 100644
--- a/code/core/src/manager/settings/SettingsFooter.tsx
+++ b/code/core/src/manager/settings/SettingsFooter.tsx
@@ -26,7 +26,7 @@ const SettingsFooter: FC = (props) => (
diff --git a/code/core/src/preview-api/modules/store/args.ts b/code/core/src/preview-api/modules/store/args.ts
index b0ea443e274b..ffee84daa6ab 100644
--- a/code/core/src/preview-api/modules/store/args.ts
+++ b/code/core/src/preview-api/modules/store/args.ts
@@ -128,7 +128,7 @@ export const validateOptions = (args: Args, argTypes: ArgTypes): Args => {
once.error(dedent`
Invalid argType: '${key}.options' should only contain primitives. Use a 'mapping' for complex values.
- More info: https://storybook.js.org/docs/writing-stories/args#mapping-to-complex-arg-values?ref=error
+ More info: https://storybook.js.org/docs/writing-stories/args?ref=error#mapping-to-complex-arg-values
`);
return allowArg();
}
diff --git a/code/core/src/preview-errors.ts b/code/core/src/preview-errors.ts
index 3c96dc1aeb68..7abb4ea12ccd 100644
--- a/code/core/src/preview-errors.ts
+++ b/code/core/src/preview-errors.ts
@@ -231,7 +231,7 @@ export class MountMustBeDestructuredError extends StorybookError {
Note that Angular is not supported. As async/await is transpiled to support the zone.js polyfill.
- More info: https://storybook.js.org/docs/writing-tests/interaction-testing#run-code-before-the-component-gets-rendered?ref=error
+ More info: https://storybook.js.org/docs/writing-tests/interaction-testing?ref=error#run-code-before-the-component-gets-rendered
Received the following play function:
${data.playFunction}`,
diff --git a/code/core/src/router/utils.ts b/code/core/src/router/utils.ts
index 6dccce564d5f..a21a2c5eae07 100644
--- a/code/core/src/router/utils.ts
+++ b/code/core/src/router/utils.ts
@@ -197,7 +197,7 @@ export const buildArgsParam = (initialArgs: Args | undefined, args: Args): strin
once.warn(dedent`
Omitted potentially unsafe URL args.
- More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url?ref=error
+ More info: https://storybook.js.org/docs/writing-stories/args?ref=error#setting-args-through-the-url
`);
return acc;
}, {} as Args);
diff --git a/code/core/src/server-errors.ts b/code/core/src/server-errors.ts
index b7eb5a588c56..a69ab949bd04 100644
--- a/code/core/src/server-errors.ts
+++ b/code/core/src/server-errors.ts
@@ -542,7 +542,7 @@ export class CommonJsConfigNotSupportedError extends StorybookError {
super({
category: Category.CLI_AUTOMIGRATE,
code: 1,
- documentation: 'https://storybook.js.org/docs/configure/overview#es-modules?ref=error',
+ documentation: 'https://storybook.js.org/docs/configure/overview?ref=error#es-modules',
message: dedent`
Support for CommonJS Storybook config files has been removed in Storybook 10.0.0.
Please migrate your config to a valid ESM file.
From f5e89e1c89837045a004f69935c58f4680ac8a3a Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Wed, 20 Aug 2025 10:47:12 +0800
Subject: [PATCH 09/10] Review comments
---
code/core/src/core-server/utils/StoryIndexGenerator.ts | 2 +-
.../src/core-server/utils/__tests__/remove-mdx-stories.test.ts | 2 +-
code/core/src/manager/components/mobile/about/MobileAbout.tsx | 2 +-
code/core/src/manager/components/panel/Panel.tsx | 2 +-
code/core/src/preview-api/modules/store/csf/portable-stories.ts | 2 +-
code/core/src/test/testing-library.ts | 2 +-
6 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index 39547e7a0618..64841b4727a4 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -593,7 +593,7 @@ export class StoryIndexGenerator {
if (err && (err as { source: any }).source?.match(/mdast-util-mdx-jsx/g)) {
logger.warn(
`💡 This seems to be an MDX2 syntax error. Please refer to the MDX section in the following resource for assistance on how to fix this: ${picocolors.yellow(
- 'https://storybook.js.org/migration-guides/7.0?ref=error'
+ 'https://storybook.js.org/docs/7/migration-guide?ref=error'
)}`
);
}
diff --git a/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts b/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts
index a9fa1f41af93..53fde3953412 100644
--- a/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts
+++ b/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts
@@ -56,7 +56,7 @@ Your main configuration somehow does not contain a 'stories' field, or it resolv
Please check your main configuration file and make sure it exports a 'stories' field that is not an empty array.
-More info: https://storybook.js.org/docs/faq#can-i-have-a-storybook-with-no-local-stories?ref=error
+More info: https://storybook.js.org/docs/faq?ref=error#can-i-have-a-storybook-with-no-local-stories
]
`);
});
diff --git a/code/core/src/manager/components/mobile/about/MobileAbout.tsx b/code/core/src/manager/components/mobile/about/MobileAbout.tsx
index 12cd552039d8..c117a5410350 100644
--- a/code/core/src/manager/components/mobile/about/MobileAbout.tsx
+++ b/code/core/src/manager/components/mobile/about/MobileAbout.tsx
@@ -40,7 +40,7 @@ export const MobileAbout: FC = () => {
diff --git a/code/core/src/manager/components/panel/Panel.tsx b/code/core/src/manager/components/panel/Panel.tsx
index 837ad6411fbe..5bc1993603ae 100644
--- a/code/core/src/manager/components/panel/Panel.tsx
+++ b/code/core/src/manager/components/panel/Panel.tsx
@@ -75,7 +75,7 @@ export const AddonPanel = React.memo<{
>
}
footer={
-
+
Explore integrations catalog
}
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index 639627cf4aa9..7b5d1aa6c7ee 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -339,7 +339,7 @@ export function createPlaywrightTest(
do:
await mount( )
- More info: https://storybook.js.org/docs/api/portable-stories-playwright?ref=error
+ More info: https://storybook.js.org/docs/api/portable-stories/portable-stories-playwright?ref=error
`);
}
diff --git a/code/core/src/test/testing-library.ts b/code/core/src/test/testing-library.ts
index 94b338e679d2..4c3df3ece65f 100644
--- a/code/core/src/test/testing-library.ts
+++ b/code/core/src/test/testing-library.ts
@@ -26,7 +26,7 @@ testingLibrary.screen = new Proxy(testingLibrary.screen, {
get(target, prop, receiver) {
once.warn(dedent`
You are using Testing Library's \`screen\` object. Use \`within(canvasElement)\` instead.
- More info: https://storybook.js.org/docs/essentials/interactions?ref=error
+ More info: https://storybook.js.org/docs/writing-tests/interaction-testing?ref=error
`);
return Reflect.get(target, prop, receiver);
},
From 6aa17df15ec671e3b24a3c0947104425d1b8c110 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Wed, 20 Aug 2025 12:33:19 +0800
Subject: [PATCH 10/10] Fix error ref handling
---
code/core/src/__tests/storybook-error.test.ts | 86 ++++++++++++++++++-
code/core/src/storybook-error.ts | 22 ++++-
2 files changed, 101 insertions(+), 7 deletions(-)
diff --git a/code/core/src/__tests/storybook-error.test.ts b/code/core/src/__tests/storybook-error.test.ts
index fa57a2db1076..3af3244d0d35 100644
--- a/code/core/src/__tests/storybook-error.test.ts
+++ b/code/core/src/__tests/storybook-error.test.ts
@@ -1,6 +1,6 @@
import { describe, expect, it } from 'vitest';
-import { StorybookError } from '../storybook-error';
+import { StorybookError, appendErrorRef } from '../storybook-error';
describe('StorybookError', () => {
class TestError extends StorybookError {
@@ -45,14 +45,14 @@ describe('StorybookError', () => {
it('should generate the correct message with multiple external documentation links', () => {
const error = new TestError([
'https://example.com/docs/first-error',
- 'https://example.com/docs/second-error',
+ 'https://storybook.js.org/docs/second-error',
]);
expect(error.message).toMatchInlineSnapshot(`
"This is a test error.
More info:
- https://example.com/docs/first-error
- - https://example.com/docs/second-error
+ - https://storybook.js.org/docs/second-error?ref=error
"
`);
});
@@ -62,3 +62,83 @@ describe('StorybookError', () => {
expect(error.documentation).toBe(false);
});
});
+
+describe('appendErrorRef', () => {
+ it('should append ref=error to storybook.js.org URLs without query parameters', () => {
+ const url = 'https://storybook.js.org/docs/example';
+ const result = appendErrorRef(url);
+ expect(result).toBe('https://storybook.js.org/docs/example?ref=error');
+ });
+
+ it('should append ref=error to storybook.js.org URLs with existing query parameters', () => {
+ const url = 'https://storybook.js.org/docs/example?foo=bar';
+ const result = appendErrorRef(url);
+ expect(result).toBe('https://storybook.js.org/docs/example?foo=bar&ref=error');
+ });
+
+ it('should append ref=error to storybook.js.org URLs with multiple existing query parameters', () => {
+ const url = 'https://storybook.js.org/docs/example?foo=bar&baz=qux';
+ const result = appendErrorRef(url);
+ expect(result).toBe('https://storybook.js.org/docs/example?foo=bar&baz=qux&ref=error');
+ });
+
+ it('should handle storybook.js.org URLs with hash fragments', () => {
+ const url = 'https://storybook.js.org/docs/example#section';
+ const result = appendErrorRef(url);
+ expect(result).toBe('https://storybook.js.org/docs/example?ref=error#section');
+ });
+
+ it('should handle storybook.js.org URLs with query parameters and hash fragments', () => {
+ const url = 'https://storybook.js.org/docs/example?foo=bar#section';
+ const result = appendErrorRef(url);
+ expect(result).toBe('https://storybook.js.org/docs/example?foo=bar&ref=error#section');
+ });
+
+ it('should not modify non-storybook.js.org URLs', () => {
+ const url = 'https://example.com/docs/test-error';
+ const result = appendErrorRef(url);
+ expect(result).toBe('https://example.com/docs/test-error');
+ });
+
+ it('should not modify relative URLs', () => {
+ const url = '/docs/example';
+ const result = appendErrorRef(url);
+ expect(result).toBe('/docs/example');
+ });
+
+ it('should not modify empty string URLs', () => {
+ const url = '';
+ const result = appendErrorRef(url);
+ expect(result).toBe('');
+ });
+
+ it('should not modify other domain URLs', () => {
+ const url = 'https://github.com/storybookjs/storybook/issues/123';
+ const result = appendErrorRef(url);
+ expect(result).toBe('https://github.com/storybookjs/storybook/issues/123');
+ });
+
+ it('should not append ref=error if it already exists in the URL', () => {
+ const url = 'https://storybook.js.org/docs/example?ref=error';
+ const result = appendErrorRef(url);
+ expect(result).toBe('https://storybook.js.org/docs/example?ref=error');
+ });
+
+ it('should not append ref=error if it already exists with other parameters', () => {
+ const url = 'https://storybook.js.org/docs/example?foo=bar&ref=error&baz=qux';
+ const result = appendErrorRef(url);
+ expect(result).toBe('https://storybook.js.org/docs/example?foo=bar&ref=error&baz=qux');
+ });
+
+ it('should not append ref=error if it already exists in URL with hash fragment', () => {
+ const url = 'https://storybook.js.org/docs/example?ref=error#target';
+ const result = appendErrorRef(url);
+ expect(result).toBe('https://storybook.js.org/docs/example?ref=error#target');
+ });
+
+ it('should append ref=error before hash fragment when no existing ref parameter', () => {
+ const url = 'https://storybook.js.org/docs/example#target';
+ const result = appendErrorRef(url);
+ expect(result).toBe('https://storybook.js.org/docs/example?ref=error#target');
+ });
+});
diff --git a/code/core/src/storybook-error.ts b/code/core/src/storybook-error.ts
index b622ff829c5a..ba8d7455f5d1 100644
--- a/code/core/src/storybook-error.ts
+++ b/code/core/src/storybook-error.ts
@@ -6,6 +6,22 @@ function parseErrorCode({
return `SB_${category}_${paddedCode}`;
}
+export function appendErrorRef(url: string): string {
+ // Skip if not storybook.js.org OR already has ref=error
+ if (/^(?!.*storybook\.js\.org)|[?&]ref=error\b/.test(url)) {
+ return url;
+ }
+
+ try {
+ const urlObj = new URL(url);
+ urlObj.searchParams.set('ref', 'error');
+ return urlObj.toString();
+ } catch {
+ // Fallback for invalid URLs - return as-is
+ return url;
+ }
+}
+
export abstract class StorybookError extends Error {
/** Category of the error. Used to classify the type of error, e.g., 'PREVIEW_API'. */
public readonly category: string;
@@ -67,11 +83,9 @@ export abstract class StorybookError extends Error {
if (documentation === true) {
page = `https://storybook.js.org/error/${parseErrorCode({ code, category })}?ref=error`;
} else if (typeof documentation === 'string') {
- page = documentation.includes('storybook.js.org')
- ? `${documentation}${documentation.includes('?') ? '&' : '?'}ref=error`
- : documentation;
+ page = appendErrorRef(documentation);
} else if (Array.isArray(documentation)) {
- page = `\n${documentation.map((doc) => `\t- ${doc.includes('storybook.js.org') ? `${doc}${doc.includes('?') ? '&' : '?'}ref=error` : doc}`).join('\n')}`;
+ page = `\n${documentation.map((doc) => `\t- ${appendErrorRef(doc)}`).join('\n')}`;
}
return `${message}${page != null ? `\n\nMore info: ${page}\n` : ''}`;