CLI: Reduce installation noise and improve error handling

code/lib/cli/src/generators/baseGenerator.ts

@@ -17,6 +17,7 @@ import {
   extractEslintInfo,
   suggestESLintPlugin,
 } from '../automigrate/helpers/eslintPlugin';
+import { HandledError } from '../HandledError';
 
 const logger = console;
 
@@ -171,6 +172,31 @@ export async function baseGenerator(
   options: FrameworkOptions = defaultOptions,
   framework?: SupportedFrameworks
 ) {
+  // This is added so that we can handle the scenario where the user presses Ctrl+C and report a canceled event.
+  // Given that there are subprocesses running as part of this function, we need to handle the signal ourselves otherwise it might run into race conditions.
+  // TODO: This should be revisited once we have a better way to handle this.
+  let isNodeProcessExiting = false;
+  const setNodeProcessExiting = () => {
+    isNodeProcessExiting = true;
+  };
+  process.on('SIGINT', setNodeProcessExiting);
+
+  const stopIfExiting = async <T>(callback: () => Promise<T>) => {
+    if (isNodeProcessExiting) {
+      throw new HandledError('Canceled by the user');
+    }
+
+    try {
+      return await callback();
+    } catch (error) {
+      if (isNodeProcessExiting) {
+        throw new HandledError('Canceled by the user');
+      }
+
+      throw error;
+    }
+  };
+
   const {
     extraAddons: extraAddonPackages,
     extraPackages,
@@ -262,7 +288,9 @@ export async function baseGenerator(
     indent: 2,
     text: `Getting the correct version of ${packages.length} packages`,
   }).start();
-  const versionedPackages = await packageManager.getVersionedPackages(packages);
+  const versionedPackages = await stopIfExiting(async () =>
+    packageManager.getVersionedPackages(packages)
+  );
   versionedPackagesSpinner.succeed();
 
   await fse.ensureDir(`./${storybookConfigFolder}`);
@@ -346,23 +374,31 @@ export async function baseGenerator(
       indent: 2,
       text: 'Installing Storybook dependencies',
     }).start();
-    await packageManager.addDependencies({ ...npmOptions, packageJson }, depsToInstall);
+    await stopIfExiting(async () =>
+      packageManager.addDependencies({ ...npmOptions, packageJson }, depsToInstall)
+    );
     addDependenciesSpinner.succeed();
   }
 
   if (addScripts) {
-    await packageManager.addStorybookCommandInScripts({
-      port: 6006,
-    });
+    await stopIfExiting(async () =>
+      packageManager.addStorybookCommandInScripts({
+        port: 6006,
+      })
+    );
   }
 
   if (addComponents) {
     const templateLocation = hasFrameworkTemplates(framework) ? framework : rendererId;
-    await copyTemplateFiles({
-      renderer: templateLocation,
-      packageManager,
-      language,
-      destination: componentsDestinationPath,
-    });
+    await stopIfExiting(async () =>
+      copyTemplateFiles({
+        renderer: templateLocation,
+        packageManager,
+        language,
+        destination: componentsDestinationPath,
+      })
+    );
   }
+
+  process.off('SIGINT', setNodeProcessExiting);
 }

code/lib/cli/src/initiate.ts

@@ -199,7 +199,7 @@ const installStorybook = async <Project extends ProjectType>(
   try {
     return await runGenerator();
   } catch (err) {
-    if (err?.stack) {
+    if (err?.message !== 'Canceled by the user' && err?.stack) {
       logger.error(`\n     ${chalk.red(err.stack)}`);
     }
     throw new HandledError(err);
@@ -238,12 +238,6 @@ const projectTypeInquirer = async (
 };
 
 async function doInitiate(options: CommandOptions, pkg: PackageJson): Promise<void> {
-  process.on('SIGINT', () => {
-    logger.log();
-    logger.log('Storybook init canceled by the user.');
-    process.exit(0);
-  });
-
   let { packageManager: pkgMgr } = options;
   if (options.useNpm) {
     useNpmWarning();
@@ -292,7 +286,7 @@ async function doInitiate(options: CommandOptions, pkg: PackageJson): Promise<vo
 
   const storybookInstantiated = isStorybookInstantiated();
 
-  if (storybookInstantiated && projectType !== ProjectType.ANGULAR) {
+  if (options.force === false && storybookInstantiated && projectType !== ProjectType.ANGULAR) {
     logger.log();
     const { force } = await prompts([
       {

code/lib/core-server/src/withTelemetry.ts

@@ -100,16 +100,30 @@ export async function withTelemetry<T>(
   options: TelemetryOptions,
   run: () => Promise<T>
 ): Promise<T> {
+  // We catch Ctrl+C user interactions to be able to detect a cancel event
+  process.on('SIGINT', async () => {
+    if (!options.cliOptions.disableTelemetry) {
+      await telemetry('canceled', { eventType }, { stripMetadata: true, immediate: true });
+      process.exit(0);
+    }
+
+    process.exit(0);
+  });
+
   if (!options.cliOptions.disableTelemetry)
     telemetry('boot', { eventType }, { stripMetadata: true });
 
   try {
     return await run();
   } catch (error) {
+    if (error?.message === 'Canceled by the user') {
+      return undefined;
+    }
+
     const { printError = logger.error } = options;
     printError(error);
-
     await sendTelemetryError(error, eventType, options);
+
     throw error;
   }
 }

code/lib/telemetry/src/types.ts

@@ -9,6 +9,7 @@ export type EventType =
   | 'build'
   | 'upgrade'
   | 'init'
+  | 'canceled'
   | 'error'
   | 'error-metadata'
   | 'version-update';