feat(core): improve module trace formatting in error messages

e2e/cases/diagnostic/import-traces/index.test.ts

@@ -0,0 +1,25 @@
+import { expect, test } from '@e2e/helper';
+
+const EXPECTED_LOG = `Import traces (entry → error):
+  ./src/index.js
+  ./src/child1.js
+  ./src/child2.js
+  ./src/child3.js ×`;
+
+test('should print import traces if module build failed in dev', async ({
+  dev,
+}) => {
+  const rsbuild = await dev();
+  await rsbuild.expectLog(EXPECTED_LOG);
+});
+
+test('should print import traces if module build failed in build', async ({
+  build,
+}) => {
+  const rsbuild = await build({
+    catchBuildError: true,
+  });
+
+  expect(rsbuild.buildError).toBeTruthy();
+  await rsbuild.expectLog(EXPECTED_LOG);
+});

e2e/cases/diagnostic/import-traces/src/child1.js

@@ -0,0 +1 @@
+import './child2';

e2e/cases/diagnostic/import-traces/src/child2.js

@@ -0,0 +1 @@
+import './child3';

e2e/cases/diagnostic/import-traces/src/child3.js

@@ -0,0 +1 @@
+import './child4';

e2e/cases/diagnostic/import-traces/src/index.js

@@ -0,0 +1 @@
+import './child1';

packages/core/src/helpers/format.ts

@@ -19,7 +19,7 @@ function resolveFileName(stats: StatsError) {
     stats.moduleName;
 
   if (file) {
-    return formatFileName(file);
+    return file;
   }
 
   // `moduleIdentifier` is the absolute path with inline loaders
@@ -30,26 +30,44 @@ function resolveFileName(stats: StatsError) {
     if (matched) {
       const fileName = matched.pop();
       if (fileName) {
-        return formatFileName(fileName);
+        return fileName;
       }
     }
   }
 
   return '';
 }
 
-function resolveModuleTrace(stats: StatsError) {
-  let traceStr = '';
-  if (stats.moduleTrace) {
-    for (const trace of stats.moduleTrace) {
-      if (trace.originName) {
-        // TODO: missing moduleTrace.dependencies[].loc in rspack
-        traceStr += `\n @ ${trace.originName}`;
-      }
-    }
+/**
+ * Format the module trace, the output be like:
+ * Import traces (entry → error):
+ *   ./src/index.tsx
+ *   ./src/App.tsx
+ *   ./src/Foo.tsx ×
+ */
+function formatModuleTrace(stats: StatsError, errorFile: string) {
+  if (!stats.moduleTrace) {
+    return;
+  }
+
+  const moduleNames = stats.moduleTrace
+    .map((trace) => trace.originName)
+    .filter(Boolean) as string[];
+
+  if (!moduleNames.length) {
+    return;
   }
 
-  return traceStr;
+  if (errorFile) {
+    moduleNames.unshift(`${errorFile} ${color.bold(color.red('×'))}`);
+  }
+
+  const rawTrace = moduleNames
+    .reverse()
+    .map((item) => `\n  ${item}`)
+    .join('');
+
+  return color.dim(`Import traces (entry → error):${rawTrace}`);
 }
 
 function hintUnknownFiles(message: string): string {
@@ -202,9 +220,9 @@ export function formatStatsError(stats: StatsError, verbose?: boolean): string {
   const details =
     verbose && stats.details ? `\nDetails: ${stats.details}\n` : '';
   const stack = verbose && stats.stack ? `\n${stats.stack}` : '';
-  const moduleTrace = resolveModuleTrace(stats);
+  const moduleTrace = formatModuleTrace(stats, fileName) ?? '';
 
-  message = `${fileName}${mainMessage}${details}${stack}${moduleTrace}`;
+  message = `${formatFileName(fileName)}${mainMessage}${details}${stack}${moduleTrace}`;
 
   // Remove inner error message
   const innerError = '-- inner error --';