feat(react-email): Improved error feedback on all CLI commands (#1784)

.changeset/smooth-zebras-learn.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+Improve error messages for all CLI commands

packages/react-email/src/actions/render-email-by-path.tsx

@@ -7,7 +7,7 @@ import chalk from 'chalk';
 import { getEmailComponent } from '../utils/get-email-component';
 import type { ErrorObject } from '../utils/types/error-object';
 import { improveErrorWithSourceMap } from '../utils/improve-error-with-sourcemap';
-import { closeOraOnSIGNIT } from '../utils/close-ora-on-sigint';
+import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping';
 
 export interface RenderedEmailMetadata {
   markup: string;
@@ -33,7 +33,7 @@ export const renderEmailByPath = async (
       text: `Rendering email template ${emailFilename}\n`,
       prefixText: ' ',
     }).start();
-    closeOraOnSIGNIT(spinner);
+    registerSpinnerAutostopping(spinner);
   }
 
   const result = await getEmailComponent(emailPath);

packages/react-email/src/cli/commands/build.ts

@@ -7,7 +7,7 @@ import {
   getEmailsDirectoryMetadata,
 } from '../../actions/get-emails-directory-metadata';
 import { cliPacakgeLocation } from '../utils';
-import { closeOraOnSIGNIT } from '../../utils/close-ora-on-sigint';
+import { registerSpinnerAutostopping } from '../../utils/register-spinner-autostopping';
 import logSymbols from 'log-symbols';
 
 interface Args {
@@ -224,11 +224,11 @@ export const build = async ({
       text: 'Starting build process...',
       prefixText: '  ',
     }).start();
-    closeOraOnSIGNIT(spinner);
+    registerSpinnerAutostopping(spinner);
 
-    spinner.text = 'Checking if emails folder exists';
+    spinner.text = `Checking if ${emailsDirRelativePath} folder exists`;
     if (!fs.existsSync(emailsDirRelativePath)) {
-      throw new Error(`Missing ${emailsDirRelativePath} folder`);
+      process.exit(1);
     }
 
     const emailsDirPath = path.join(process.cwd(), emailsDirRelativePath);

packages/react-email/src/cli/commands/dev.ts

@@ -9,7 +9,8 @@ interface Args {
 export const dev = async ({ dir: emailsDirRelativePath, port }: Args) => {
   try {
     if (!fs.existsSync(emailsDirRelativePath)) {
-      throw new Error(`Missing ${emailsDirRelativePath} folder`);
+      console.error(`Missing ${emailsDirRelativePath} folder`);
+      process.exit(1);
     }
 
     const devServer = await startDevServer(

packages/react-email/src/cli/commands/export.ts

@@ -7,7 +7,7 @@ import ora from 'ora';
 import logSymbols from 'log-symbols';
 import type { Options } from '@react-email/render';
 import normalize from 'normalize-path';
-import { closeOraOnSIGNIT } from '../../utils/close-ora-on-sigint';
+import { registerSpinnerAutostopping } from '../../utils/register-spinner-autostopping';
 import { tree } from '../utils';
 import {
   EmailsDirectory,
@@ -49,7 +49,7 @@ export const exportTemplates = async (
   let spinner: ora.Ora | undefined;
   if (!options.silent) {
     spinner = ora('Preparing files...\n').start();
-    closeOraOnSIGNIT(spinner);
+    registerSpinnerAutostopping(spinner);
   }
 
   const emailsDirectoryMetadata = await getEmailsDirectoryMetadata(
@@ -90,14 +90,7 @@ export const exportTemplates = async (
         text: 'Failed to build emails',
       });
     }
-
-    console.warn(buildFailure.warnings);
-    console.error(buildFailure.errors);
-    throw new Error(
-      `esbuild bundling process for email templates failed:\n${allTemplates
-        .map((p) => `- ${p}`)
-        .join('\n')}`,
-    );
+    process.exit(1);
   }
 
   if (spinner) {
@@ -144,7 +137,7 @@ export const exportTemplates = async (
         });
       }
       console.error(exception);
-      throw exception;
+      process.exit(1);
     }
   }
   if (spinner) {
@@ -178,9 +171,10 @@ export const exportTemplates = async (
           text: 'Failed to copy static files',
         });
       }
-      throw new Error(
+      console.error(
         `Something went wrong while copying the file to ${pathToWhereEmailMarkupShouldBeDumped}/static, ${exception}`,
       );
+      process.exit(1);
     }
   }
 

packages/react-email/src/cli/commands/start.ts

@@ -10,9 +10,10 @@ export const start = async () => {
       './.react-email',
     );
     if (!fs.existsSync(builtPreviewPath)) {
-      throw new Error(
-        "Could not find `.react-email`, maybe you haven't ran `email build`?",
+      console.error(
+        "Could not find .react-email, maybe you haven't ran email build?",
       );
+      process.exit(1);
     }
 
     const nextStart = spawn('npm', ['start'], {

packages/react-email/src/cli/utils/preview/start-dev-server.ts

@@ -6,7 +6,7 @@ import ora from 'ora';
 import logSymbols from 'log-symbols';
 import chalk from 'chalk';
 import packageJson from '../../../../package.json';
-import { closeOraOnSIGNIT } from '../../../utils/close-ora-on-sigint';
+import { registerSpinnerAutostopping } from '../../../utils/register-spinner-autostopping';
 import { serveStaticFile } from './serve-static-file';
 import { getEnvVariablesForPreviewApp } from './get-env-variables-for-preview-app';
 
@@ -113,7 +113,7 @@ export const startDevServer = async (
     prefixText: ' ',
   }).start();
 
-  closeOraOnSIGNIT(spinner);
+  registerSpinnerAutostopping(spinner);
   const timeBeforeNextReady = performance.now();
 
   // these environment variables are used on the next app

packages/react-email/src/utils/register-spinner-autostopping.ts

@@ -0,0 +1,28 @@
+import logSymbols from 'log-symbols';
+import type { Ora } from 'ora';
+
+const spinners = new Set<Ora>();
+
+process.on('SIGINT', () => {
+  spinners.forEach((spinner) => {
+    if (spinner.isSpinning) {
+      spinner.stop();
+    }
+  });
+});
+
+process.on('exit', (code) => {
+  if (code !== 0) {
+    spinners.forEach((spinner) => {
+      if (spinner.isSpinning) {
+        spinner.stopAndPersist({
+          symbol: logSymbols.error,
+        });
+      }
+    });
+  }
+});
+
+export const registerSpinnerAutostopping = (spinner: Ora) => {
+  spinners.add(spinner);
+};