Group by errors

kasperpeulen · kasperpeulen · commit 8f03c22dcbca · 2025-10-30T12:10:52.000+01:00
diff --git a/code/core/src/common/index.ts b/code/core/src/common/index.ts
@@ -45,6 +45,7 @@ export * from './js-package-manager';
 export * from './utils/scan-and-transform-files';
 export * from './utils/transform-imports';
 export * from '../shared/utils/module';
+export * from './utils/utils';
 
 export { versions };
 
diff --git a/code/core/src/common/utils/utils.ts b/code/core/src/common/utils/utils.ts
@@ -0,0 +1,26 @@
+// Object.groupBy polyfill
+export const groupBy = <K extends PropertyKey, T>(
+  items: T[],
+  keySelector: (item: T, index: number) => K
+) => {
+  return items.reduce<Record<K, T[]>>(
+    (acc, item, index) => {
+      const key = keySelector(item, index);
+      acc[key] ??= [];
+      acc[key].push(item);
+      return acc;
+    },
+    {} as Record<K, T[]>
+  );
+};
+
+// This invariant allows for lazy evaluation of the message, which we need to avoid excessive computation.
+export function invariant(
+  condition: unknown,
+  message?: string | (() => string)
+): asserts condition {
+  if (condition) {
+    return;
+  }
+  throw new Error((typeof message === 'function' ? message() : message) ?? 'Invariant failed');
+}
diff --git a/code/core/src/core-server/manifest.ts b/code/core/src/core-server/manifest.ts
@@ -1,3 +1,5 @@
+import { groupBy } from 'storybook/internal/common';
+
 import { dedent } from 'ts-dedent';
 
 import type { ComponentManifest, ComponentsManifest } from '../types';
@@ -35,6 +37,34 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
 
   const grid = entries.map(([key, c], idx) => renderComponentCard(key, c, idx)).join('');
 
+  const errorGroups = Object.entries(
+    groupBy(
+      entries.map(([, it]) => it).filter((it) => it.error),
+      (manifest) => manifest.error?.name ?? 'Error'
+    )
+  );
+
+  const errorGroupsHTML = errorGroups
+    .map(([error, grouped]) => {
+      const id = error.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+      const headerText = `${esc(error)}`;
+      const cards = grouped
+        .map((manifest, id) => renderComponentCard(manifest.id, manifest, id))
+        .join('');
+      return `
+        <section class="group">
+          <input id="${id}-toggle" class="group-tg" type="checkbox" hidden />
+          <label for="${id}-toggle" class="group-header">
+            <span class="caret">▸</span>
+            <span class="group-title">${headerText}</span>
+            <span class="group-count">${grouped.length}</span>
+          </label>
+          <div class="group-cards">${cards}</div>
+        </section>
+      `;
+    })
+    .join('');
+
   return dedent`<!doctype html>
 <html lang="en">
 <head>
@@ -127,12 +157,34 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
   .dot-err{background:var(--err)}
   .ex-name{font-weight:600}
 
+  /* Error groups (visible in errors filter) */
+  .error-groups{display:none; margin-bottom:16px;}
+  .group{border:1px solid var(--border);background:var(--panel);border-radius:14px;overflow:hidden}
+  .group + .group{margin-top:12px}
+  .group-header{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--border)}
+  .group-header:hover{background:#141722}
+  .group-title{font-weight:600;flex:1}
+  .group-count{font-size:12px;color:var(--muted);}
+  .group-cards{display:none;padding:12px}
+  .group .card{margin:12px 0}
+  .group .card:first-child{margin-top:0}
+  .group .card:last-child{margin-bottom:0}
+  /* caret rotation */
+  .group-tg:checked + label .caret{transform:rotate(90deg)}
+  .caret{transition:transform .15s ease}
+  /* toggle body */
+  .group-tg:checked ~ .group-cards{display:block}
+
   /* CSS-only filtering of cards via top pills */
   #filter-errors:target ~ main .card:not(.has-error):not(.has-example-error){display:none}
   #filter-warnings:target ~ main .card:not(.has-warn){display:none}
   #filter-example-errors:target ~ main .card:not(.has-example-error){display:none}
   #filter-all:target ~ main .card{display:block}
-  
+  /* In errors view, hide standalone component-error cards in the regular grid (they will appear in groups) */
+  #filter-errors:target ~ main .grid .card.has-error{display:none}
+  /* Show grouped section only in errors view */
+  #filter-errors:target ~ main .error-groups{display:block}
+
   /* When a toggle is checked, show the corresponding panel */
   .card > .tg-err:checked ~ .panels .panel-err { display: grid; }
   .card > .tg-warn:checked ~ .panels .panel-warn { display: grid; }
@@ -173,6 +225,7 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
       <div class="grid" role="list">
         ${grid || `<div class="card"><div class="head"><div class="hint">No components.</div></div></div>`}
       </div>
+      ${errorGroups.length ? `<div class="error-groups" role="region" aria-label="Error groups">${errorGroupsHTML}</div>` : ''}
     </div>
   </main>
 </body>
diff --git a/code/renderers/react/src/componentManifest/generator.ts b/code/renderers/react/src/componentManifest/generator.ts
@@ -71,11 +71,11 @@ export const componentManifestGenerator = async () => {
 
           const error = !componentName
             ? {
-                name: 'NoMetaComponentError',
+                name: 'No meta.component specified',
                 message: 'Specify meta.component for the component to be included in the manifest.',
               }
             : {
-                name: 'NoComponentImportError',
+                name: 'No component import found',
                 message: `No component file found for the "${componentName}" component.`,
               };
           return {
@@ -101,7 +101,7 @@ export const componentManifestGenerator = async () => {
             name,
             examples,
             error: {
-              name: 'ComponentReadError',
+              name: 'Component file could not be read',
               message: `Could not read the component file located at "${entry.componentPath}".\nPrefer relative imports.`,
             },
           };
@@ -115,7 +115,7 @@ export const componentManifestGenerator = async () => {
 
         const error = !docgen
           ? {
-              name: 'DocgenError',
+              name: 'Docgen evaluation failed',
               message:
                 `Could not parse props information for the component file located at "${entry.componentPath}"\n` +
                 `Avoid barrel files when importing your component file.\n` +
