feat: improve build error messages

e2e/cases/plugin-api/plugin-transform-error-handle/index.test.ts

@@ -8,8 +8,7 @@ rspackOnlyTest('should handle transform error in dev mode', async () => {
 
   await expectPoll(() =>
     logs.some(
-      (log) =>
-        log.includes('transform error') && log.includes('Failed to compile'),
+      (log) => log.includes('transform error') && log.includes('Build error:'),
     ),
   ).toBeTruthy();
 

e2e/cases/server/overlay-type-errors/index.test.ts

@@ -24,10 +24,10 @@ test('should display type errors on overlay correctly', async ({ page }) => {
 
   await expect(errorOverlay.locator('.title')).toHaveText('Build failed');
 
-  // The first span is "<span style="color:#888">TS2322: </span>"
-  const firstSpan = errorOverlay.locator('span').first();
-  expect(await firstSpan.textContent()).toEqual('TS2322: ');
-  expect(await firstSpan.getAttribute('style')).toEqual('color:#888;');
+  // Get "<span style="color:#888">TS2322: </span>"
+  const tsSpan = errorOverlay.locator('span').getByText('TS2322: ');
+  expect(await tsSpan.textContent()).toEqual('TS2322: ');
+  expect(await tsSpan.getAttribute('style')).toEqual('color:#888;');
 
   // The first link is "<a class="file-link">./path/to/src/index.ts:3:1</a>"
   const firstLink = errorOverlay.locator('.file-link').first();

packages/core/src/helpers/format.ts

@@ -1,6 +1,13 @@
 import type { StatsCompilation, StatsError } from '@rspack/core';
 import color from '../../compiled/picocolors/index.js';
 
+const formatFileName = (fileName: string) => {
+  // add default column add lines for linking
+  return /:\d+:\d+/.test(fileName)
+    ? `File: ${color.cyan(fileName)}\n`
+    : `File: ${color.cyan(fileName)}:1:1\n`;
+};
+
 function resolveFileName(stats: StatsError) {
   // Get the real source file path with stats.moduleIdentifier.
   // e.g. moduleIdentifier is "builtin:react-refresh-loader!/Users/x/src/App.jsx"
@@ -10,15 +17,14 @@ function resolveFileName(stats: StatsError) {
     if (matched) {
       const fileName = matched.pop();
       if (fileName) {
-        // add default column add lines for linking
-        return `File: ${fileName}:1:1\n`;
+        return formatFileName(fileName);
       }
     }
   }
 
   // fallback to file or moduleName if moduleIdentifier parse failed
   const file = stats.file || stats.moduleName;
-  return file ? `File: ${file}\n` : '';
+  return file ? formatFileName(file) : '';
 }
 
 function resolveModuleTrace(stats: StatsError) {

packages/core/src/helpers/stats.ts

@@ -6,18 +6,15 @@ import { isMultiCompiler } from './';
 import { formatStatsMessages } from './format.js';
 
 function formatErrorMessage(errors: string[]) {
-  const title = color.bold(color.red('Compile error: '));
+  const title = color.bold(color.red('Build error: '));
 
   if (!errors.length) {
     return `${title}\n${color.yellow(`For more details, please setting 'stats.errors: true' `)}`;
   }
 
-  const tip = color.yellow(
-    'Failed to compile, check the errors for troubleshooting.',
-  );
   const text = `${errors.join('\n\n')}\n`;
 
-  return `${title}\n${tip}\n${text}`;
+  return `${title}\n${text}`;
 }
 
 export const getAllStatsErrors = (

website/docs/en/guide/faq/exceptions.mdx

@@ -8,7 +8,7 @@ When this happens, you can specify directories or modules that need to be compil
 
 ---
 
-### Compile error `Error: [object Object] is not a PostCSS plugin` ?
+### Build error `Error: [object Object] is not a PostCSS plugin` ?
 
 Currently, Rsbuild is using PostCSS v8. If you encounter the `Error: [object Object] is not a PostCSS plugin` error during the compilation process, it is usually caused by referencing the wrong version of PostCSS, for example, the version of `postcss` (peerDependencies) in `cssnano` does not meet expectations.
 
@@ -25,7 +25,7 @@ npm ls postcss
 
 ---
 
-### Compile error `You may need additional loader`?
+### Build error `You may need additional loader`?
 
 If the following error message is encountered during the compilation process, it means that there are individual files that cannot be compiled correctly.