feat: improve warning and error log format

packages/core/lib/bundler/bundler.ts

@@ -187,12 +187,18 @@ export class ReactNativeEsbuildBundler extends BundlerEventEmitter {
     this.emit('build-status-change', { id: context.id, ...buildState });
   }
 
-  private handleBuildEnd(result: BuildResult, context: PluginContext): void {
+  private handleBuildEnd(
+    data: { result: BuildResult; success: boolean },
+    context: PluginContext,
+  ): void {
+    if (!data.success) {
+      process.exit(1);
+    }
     const bundleEndedAt = new Date();
     const bundleFilename = context.outfile;
     const bundleSourcemapFilename = `${bundleFilename}.map`;
     const revisionId = bundleEndedAt.getTime().toString();
-    const { outputFiles } = result;
+    const { outputFiles } = data.result;
 
     // `outputFiles` available when only `write: false`
     if (outputFiles === undefined) return;

packages/core/lib/bundler/plugins/statusPlugin/StatusLogger.ts

@@ -1,6 +1,6 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import type { BuildResult } from 'esbuild';
+import esbuild, { type BuildResult, type Message } from 'esbuild';
 import ora, { type Ora } from 'ora';
 import { getBuildStatusCachePath } from '@react-native-esbuild/config';
 import { colors, isTTY } from '@react-native-esbuild/utils';
@@ -45,6 +45,25 @@ export class StatusLogger {
     process.stdout.write(`${messages.join(' ')}\n`);
   }
 
+  private async printMessages(
+    messages: Message[],
+    kind: 'warning' | 'error',
+  ): Promise<void> {
+    const formattedMessages = await esbuild
+      .formatMessages(messages, { kind, color: isTTY() })
+      .catch((error) => {
+        logger.error('unable to format error messages', error as Error);
+        return null;
+      });
+
+    if (formattedMessages !== null) {
+      formattedMessages.forEach((message) => {
+        kind === 'warning' ? logger.warn(message) : logger.error(message);
+        this.print(''); // trailing new line
+      });
+    }
+  }
+
   getStatus(): BuildStatus {
     return {
       total: this.totalModuleCount,
@@ -73,27 +92,15 @@ export class StatusLogger {
       : this.print(`${this.platformText} build in progress...`);
   }
 
-  summary({ warnings, errors }: BuildResult): void {
+  async summary({ warnings, errors }: BuildResult): Promise<boolean> {
     const duration = (new Date().getTime() - this.buildStartedAt) / 1000;
+    const isSuccess = errors.length === 0;
 
-    warnings.forEach((warning, index) => {
-      logger.warn(
-        `#${index + 1} ${warning.text}`,
-        undefined,
-        warning.location ?? undefined,
-      );
-    });
-
-    errors.forEach((error, index) => {
-      logger.error(
-        `#${index + 1} ${error.text}`,
-        undefined,
-        error.location ?? undefined,
-      );
-    });
+    await this.printMessages(warnings, 'warning');
+    await this.printMessages(errors, 'error');
 
     if (isTTY()) {
-      errors.length
+      isSuccess
         ? this.spinner.fail(`${this.platformText} failed!`)
         : this.spinner.succeed(`${this.platformText} done!`);
 
@@ -111,14 +118,16 @@ export class StatusLogger {
       );
       this.print(colors.gray('╰─'), colors.cyan(`${duration}s\n`));
     } else {
-      errors.length
+      isSuccess
         ? this.print(`${this.platformText} failed!`)
         : this.print(`${this.platformText} done!`);
 
       this.print(`> ${warnings.length} warnings`);
       this.print(`> ${errors.length} errors`);
       this.print(`> ${duration}s`);
     }
+
+    return isSuccess;
   }
 
   loadStatus(): Promise<void> {

packages/core/lib/bundler/plugins/statusPlugin/statusPlugin.ts

@@ -12,7 +12,13 @@ const NAME = 'build-status-plugin';
 export const createBuildStatusPlugin: EsbuildPluginFactory<{
   onStart: (context: PluginContext) => void;
   onUpdate: (buildState: BuildStatus, context: PluginContext) => void;
-  onEnd: (result: BuildResult, context: PluginContext) => void;
+  onEnd: (
+    data: {
+      result: BuildResult;
+      success: boolean;
+    },
+    context: PluginContext,
+  ) => void;
 }> = (config) => {
   return function buildStatusPlugin(context) {
     return {
@@ -45,10 +51,10 @@ export const createBuildStatusPlugin: EsbuildPluginFactory<{
           return null;
         });
 
-        build.onEnd((result: BuildResult) => {
-          statusLogger.summary(result);
-          statusLogger.persistStatus();
-          config?.onEnd(result, context);
+        build.onEnd(async (result: BuildResult) => {
+          const success = await statusLogger.summary(result);
+          await statusLogger.persistStatus();
+          config?.onEnd({ result, success }, context);
         });
       },
     };

packages/plugins/lib/assetRegisterPlugin/assetRegisterPlugin.ts

@@ -118,7 +118,9 @@ export const createAssetRegisterPlugin: EsbuildPluginFactory<
           },
         );
 
-        build.onEnd(async () => {
+        build.onEnd(async (result) => {
+          // skip copying assets on build failure
+          if (result.errors.length) return;
           await copyAssetsToDevServer(context, assets);
           await copyAssetsToDestination(context, assets);
         });