improve sandbox command error handling and debugging

scripts/sandbox.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax, no-await-in-loop */
 import path from 'path';
-import { remove, pathExists, readJSON, writeJSON, ensureSymlink } from 'fs-extra';
+import { remove, pathExists, readJSON, writeJSON, ensureSymlink, ensureDir } from 'fs-extra';
 import prompts from 'prompts';
 
 import { getOptionsOrPrompt } from './utils/options';
@@ -75,6 +75,10 @@ async function getOptions() {
     dryRun: {
       description: "Don't execute commands, just list them (dry run)?",
     },
+    debug: {
+      description: 'Print all the logs to the console',
+      promptType: false,
+    },
   });
 }
 
@@ -147,6 +151,12 @@ async function addPackageScripts({
 
 async function readMainConfig({ cwd }: { cwd: string }) {
   const configDir = path.join(cwd, '.storybook');
+  if (!pathExists(configDir)) {
+    throw new Error(
+      `Unable to find the Storybook folder in "${configDir}". Are you sure it exists? Or maybe this folder uses a custom Storybook config directory?`
+    );
+  }
+
   const mainConfigPath = getInterpretedFile(path.resolve(configDir, 'main'));
   return readConfig(mainConfigPath);
 }
@@ -197,7 +207,10 @@ async function addStories(paths: string[], { mainConfig }: { mainConfig: ConfigF
 async function main() {
   const optionValues = await getOptions();
 
-  const { template, forceDelete, forceReuse, link, dryRun } = optionValues;
+  const { template, forceDelete, forceReuse, link, dryRun, debug } = optionValues;
+
+  await ensureDir(sandboxDir);
+
   const cwd = path.join(sandboxDir, template.replace('/', '-'));
 
   const exists = await pathExists(cwd);
@@ -222,6 +235,7 @@ async function main() {
       optionValues: { output: cwd, branch: 'next' },
       cwd: sandboxDir,
       dryRun,
+      debug,
     });
 
     const mainConfig = await readMainConfig({ cwd });
@@ -251,7 +265,7 @@ async function main() {
 
     for (const addon of optionValues.addon) {
       const addonName = `@storybook/addon-${addon}`;
-      await executeCLIStep(steps.add, { argument: addonName, cwd, dryRun });
+      await executeCLIStep(steps.add, { argument: addonName, cwd, dryRun, debug });
     }
 
     for (const addon of [...defaultAddons, ...optionValues.addon]) {
@@ -268,6 +282,7 @@ async function main() {
         cwd: codeDir,
         dryRun,
         optionValues: { local: true, start: false },
+        debug,
       });
     } else {
       await exec('yarn local-registry --publish', { cwd: codeDir }, { dryRun });
@@ -313,10 +328,11 @@ async function main() {
         dryRun,
         startMessage: `⬆️  Starting Storybook`,
         errorMessage: `🚨 Starting Storybook failed`,
+        debug: true,
       }
     );
   } else {
-    await executeCLIStep(steps.build, { cwd, dryRun });
+    await executeCLIStep(steps.build, { cwd, dryRun, debug });
     // TODO serve
   }
 

scripts/utils/cli-step.ts

@@ -19,6 +19,7 @@ export async function executeCLIStep<TOptions extends OptionSpecifier>(
     optionValues?: Partial<OptionValues<TOptions>>;
     cwd: string;
     dryRun?: boolean;
+    debug: boolean;
   }
 ) {
   if (cliStep.hasArgument && !options.argument)
@@ -38,6 +39,7 @@ export async function executeCLIStep<TOptions extends OptionSpecifier>(
       startMessage: `${cliStep.icon} ${cliStep.description}`,
       errorMessage: `🚨 ${cliStep.description} failed`,
       dryRun: options.dryRun,
+      debug: options.debug,
     }
   );
 }

scripts/utils/exec.ts

@@ -1,17 +1,21 @@
-import shell, { ExecOptions } from 'shelljs';
+import execa, { Options } from 'execa';
 import chalk from 'chalk';
 
 const logger = console;
 
+type StepOptions = {
+  startMessage?: string;
+  errorMessage?: string;
+  dryRun?: boolean;
+  debug?: boolean;
+};
+
 export const exec = async (
   command: string,
-  options: ExecOptions = {},
-  {
-    startMessage,
-    errorMessage,
-    dryRun,
-  }: { startMessage?: string; errorMessage?: string; dryRun?: boolean } = {}
-) => {
+  options: Options = {},
+  { startMessage, errorMessage, dryRun, debug }: StepOptions = {}
+): Promise<void> => {
+  logger.info();
   if (startMessage) logger.info(startMessage);
 
   if (dryRun) {
@@ -20,27 +24,16 @@ export const exec = async (
   }
 
   logger.debug(command);
-  return new Promise((resolve, reject) => {
-    const defaultOptions: ExecOptions = {
-      silent: false,
-    };
-    const child = shell.exec(command, {
-      ...defaultOptions,
-      ...options,
-      async: true,
-      silent: false,
-    });
-
-    child.stderr.pipe(process.stderr);
+  const defaultOptions: Options = {
+    stdout: debug ? 'inherit' : 'ignore',
+  };
+  try {
+    await execa.command(command, { ...defaultOptions, ...options });
+  } catch (err) {
+    logger.error(chalk.red(`An error occurred while executing: \`${command}\``));
+    logger.log(errorMessage);
+    logger.log(err.message);
+  }
 
-    child.on('exit', (code) => {
-      if (code === 0) {
-        resolve(undefined);
-      } else {
-        logger.error(chalk.red(`An error occurred while executing: \`${command}\``));
-        logger.log(errorMessage);
-        reject(new Error(`command exited with code: ${code}: `));
-      }
-    });
-  });
+  return undefined;
 };