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