Merge pull request #24371 from storybookjs/yann/add-error-name

Core: Add class name to Storybook error name
storybookjs · Oct 5, 2023 · 9619860 · 9619860
2 parents 3b276e7 + 19b8468
commit 9619860
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/code/lib/core-events/src/errors/storybook-error.test.ts b/code/lib/core-events/src/errors/storybook-error.test.ts
@@ -13,7 +13,7 @@ describe('StorybookError', () => {
 
   it('should generate the correct error name', () => {
     const error = new TestError();
-    expect(error.name).toBe('SB_TEST_CATEGORY_0123');
+    expect(error.name).toBe('SB_TEST_CATEGORY_0123 (TestError)');
   });
 
   it('should generate the correct message without documentation link', () => {

diff --git a/code/lib/core-events/src/errors/storybook-error.ts b/code/lib/core-events/src/errors/storybook-error.ts
@@ -33,12 +33,18 @@ export abstract class StorybookError extends Error {
    */
   readonly fromStorybook: true = true as const;
 
+  get fullErrorCode() {
+    const paddedCode = String(this.code).padStart(4, '0');
+    return `SB_${this.category}_${paddedCode}` as `SB_${this['category']}_${string}`;
+  }
+
   /**
    * Overrides the default `Error.name` property in the format: SB_<CATEGORY>_<CODE>.
    */
   get name() {
-    const paddedCode = String(this.code).padStart(4, '0');
-    return `SB_${this.category}_${paddedCode}` as `SB_${this['category']}_${string}`;
+    const errorName = this.constructor.name;
+
+    return `${this.fullErrorCode} (${errorName})`;
   }
 
   /**
@@ -48,13 +54,13 @@ export abstract class StorybookError extends Error {
     let page: string | undefined;
 
     if (this.documentation === true) {
-      page = `https://storybook.js.org/error/${this.name}`;
+      page = `https://storybook.js.org/error/${this.fullErrorCode}`;
     } else if (typeof this.documentation === 'string') {
       page = this.documentation;
     } else if (Array.isArray(this.documentation)) {
       page = `\n${this.documentation.map((doc) => `\t- ${doc}`).join('\n')}`;
     }
 
-    return this.template() + (page != null ? `\n\nMore info: ${page}\n` : '');
+    return `${this.template()}${page != null ? `\n\nMore info: ${page}\n` : ''}`;
   }
 }