Merge pull request #25055 from storybookjs/valentin/react-docgen-erro…

…r-handling React-Docgen: Make error-handling more gentle
storybookjs · Nov 30, 2023 · fc6022c · fc6022c
2 parents aebcbee + b9e9a41
commit fc6022c
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts
@@ -43,9 +43,9 @@ describe('framework-preset-react-docgen', () => {
         module: {
           rules: [
             {
-              exclude: /node_modules/,
+              exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/,
               loader: '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader',
-              options: { babelOptions: { plugins: [], presets: [] } },
+              options: { babelOptions: { plugins: [], presets: [] }, debug: false },
               test: /\.(cjs|mjs|tsx?|jsx?)$/,
             },
           ],
@@ -88,9 +88,9 @@ describe('framework-preset-react-docgen', () => {
         module: {
           rules: [
             {
-              exclude: /node_modules/,
+              exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/,
               loader: '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader',
-              options: { babelOptions: { plugins: [], presets: [] } },
+              options: { babelOptions: { plugins: [], presets: [] }, debug: false },
               test: /\.(cjs|mjs|jsx?)$/,
             },
           ],

diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.ts b/code/presets/react-webpack/src/framework-preset-react-docs.ts
@@ -11,6 +11,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (
   if (!hasDocsOrControls(options)) return config;
 
   const typescriptOptions = await options.presets.apply('typescript', {} as any);
+  const debug = options.loglevel === 'debug';
 
   const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions || {};
 
@@ -34,8 +35,9 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (
             ),
             options: {
               babelOptions,
+              debug,
             },
-            exclude: /node_modules/,
+            exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/,
           },
         ],
       },
@@ -60,8 +62,9 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (
           ),
           options: {
             babelOptions,
+            debug,
           },
-          exclude: /node_modules/,
+          exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/,
         },
       ],
     },

diff --git a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts
@@ -9,6 +9,8 @@ import {
 import MagicString from 'magic-string';
 import type { LoaderContext } from 'webpack';
 import type { Handler, NodePath, babelTypes as t, Documentation } from 'react-docgen';
+import { logger } from '@storybook/node-logger';
+import type { TransformOptions } from '@babel/core';
 
 const { getNameOrValue, isReactForwardRefCall } = utils;
 
@@ -56,11 +58,14 @@ const defaultResolver = new docgenResolver.FindExportedDefinitionsResolver();
 const defaultImporter = docgenImporters.fsImporter;
 const handlers = [...defaultHandlers, actualNameHandler];
 
-export default async function reactDocgenLoader(this: LoaderContext<any>, source: string) {
+export default async function reactDocgenLoader(
+  this: LoaderContext<{ babelOptions: TransformOptions; debug: boolean }>,
+  source: string
+) {
   const callback = this.async();
   // get options
   const options = this.getOptions() || {};
-  const { babelOptions = {} } = options;
+  const { babelOptions = {}, debug = false } = options;
 
   const { plugins, presets } = babelOptions;
 
@@ -94,7 +99,18 @@ export default async function reactDocgenLoader(this: LoaderContext<any>, source
     if (error.code === ERROR_CODES.MISSING_DEFINITION) {
       callback(null, source);
     } else {
-      callback(error);
+      if (!debug) {
+        logger.warn(
+          `Failed to parse ${this.resourcePath} with react-docgen. Rerun Storybook with --loglevel=debug to get more info.`
+        );
+      } else {
+        logger.warn(
+          `Failed to parse ${this.resourcePath} with react-docgen. Please use the below error message and the content of the file which causes the error to report the issue to the maintainers of react-docgen. https://github.com/reactjs/react-docgen`
+        );
+        logger.error(error);
+      }
+
+      callback(null, source);
     }
   }
 }