feat: improve build time logs with error state (#6608)

Author: chenjiahan

e2e/cases/diagnostic/build-failed-time/index.test.ts

@@ -0,0 +1,15 @@
+import { rspackTest } from '@e2e/helper';
+
+const EXPECTED_LOG = /build failed in [\d.]+ s/;
+
+rspackTest('should print build failed time in dev', async ({ devOnly }) => {
+  const rsbuild = await devOnly();
+  await rsbuild.expectLog(EXPECTED_LOG);
+});
+
+rspackTest('should print build failed time in build', async ({ build }) => {
+  const rsbuild = await build({
+    catchBuildError: true,
+  });
+  await rsbuild.expectLog(EXPECTED_LOG);
+});

e2e/cases/diagnostic/build-failed-time/src/index.js

@@ -0,0 +1 @@
+import './not-exist.js';

e2e/cases/diagnostic/build-time/index.test.ts

@@ -0,0 +1,13 @@
+import { rspackTest } from '@e2e/helper';
+
+const EXPECTED_LOG = /built in [\d.]+ s/;
+
+rspackTest('should print build time in dev', async ({ devOnly }) => {
+  const rsbuild = await devOnly();
+  await rsbuild.expectLog(EXPECTED_LOG);
+});
+
+rspackTest('should print build time in build', async ({ build }) => {
+  const rsbuild = await build();
+  await rsbuild.expectLog(EXPECTED_LOG);
+});

e2e/cases/diagnostic/build-time/src/index.js

@@ -0,0 +1 @@
+// empty

packages/compat/webpack/src/progress/helpers/nonTty.ts

@@ -27,7 +27,7 @@ export function createNonTTYLogger() {
 
       prevPercentage = 100;
       if (hasErrors) {
-        logger.error(`built failed in ${compileTime} ${suffix}`);
+        logger.error(`build failed in ${compileTime} ${suffix}`);
       } else {
         logger.ready(`built in ${compileTime} ${suffix}`);
       }

packages/core/src/provider/createCompiler.ts

@@ -186,7 +186,7 @@ export async function createCompiler(options: InitConfigsOptions): Promise<{
     });
   }
 
-  const printTime = (index: number) => {
+  const printTime = (index: number, hasErrors: boolean) => {
     if (startTime === null) {
       return;
     }
@@ -197,13 +197,19 @@ export async function createCompiler(options: InitConfigsOptions): Promise<{
 
     // When using multiple compilers, print the name to distinguish different environments
     const suffix = isMultiCompiler ? color.dim(` (${name})`) : '';
-    logger.ready(`built in ${prettyTime(time / 1000)}${suffix}`);
+    const timeStr = `${prettyTime(time / 1000)}${suffix}`;
+
+    if (hasErrors) {
+      logger.error(`build failed in ${timeStr}`);
+    } else {
+      logger.ready(`built in ${timeStr}`);
+    }
   };
 
   if (isMultiCompiler) {
     (compiler as Rspack.MultiCompiler).compilers.forEach((item, index) => {
-      item.hooks.done.tap(HOOK_NAME, () => {
-        printTime(index);
+      item.hooks.done.tap(HOOK_NAME, (stats) => {
+        printTime(index, stats.hasErrors());
       });
     });
   }
@@ -219,10 +225,6 @@ export async function createCompiler(options: InitConfigsOptions): Promise<{
       context.buildState.hasErrors = hasErrors;
       context.socketServer?.onBuildDone();
 
-      if (!isMultiCompiler) {
-        printTime(0);
-      }
-
       const { message, level } = formatStats(stats, hasErrors);
 
       if (level === 'error') {
@@ -231,6 +233,9 @@ export async function createCompiler(options: InitConfigsOptions): Promise<{
       if (level === 'warning') {
         logger.warn(message);
       }
+      if (!isMultiCompiler) {
+        printTime(0, hasErrors);
+      }
 
       isCompiling = false;
     },