fix: render TS errors on error overlay (#6303)

Author: chenjiahan

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

@@ -1,20 +1,8 @@
 import { expect, test } from '@e2e/helper';
+import type { Page } from 'playwright';
 
-// TODO: fixme
-test.skip('should display type errors on overlay correctly', async ({
-  page,
-  dev,
-  logHelper,
-}) => {
-  const { addLog, expectLog } = logHelper;
-  page.on('console', (consoleMessage) => {
-    addLog(consoleMessage.text());
-  });
-
-  await dev();
-
-  await expectLog('TS2322:');
-
+const expectErrorOverlay = async (page: Page) => {
+  await page.waitForSelector('rsbuild-error-overlay', { state: 'attached' });
   const errorOverlay = page.locator('rsbuild-error-overlay');
   await expect(errorOverlay.locator('.title')).toHaveText('Build failed');
 
@@ -30,4 +18,23 @@ test.skip('should display type errors on overlay correctly', async ({
   expect(
     linkText?.endsWith('/src/index.ts:3:1') && linkText.startsWith('.'),
   ).toBeTruthy();
+};
+
+test('should display type errors on overlay correctly', async ({
+  page,
+  dev,
+  logHelper,
+}) => {
+  const { addLog, expectLog } = logHelper;
+  page.on('console', (consoleMessage) => {
+    addLog(consoleMessage.text());
+  });
+
+  await dev();
+  await expectLog('TS2322:');
+  await expectErrorOverlay(page);
+
+  // The error overlay should be rendered after reloading the page
+  page.reload();
+  await expectErrorOverlay(page);
 });

packages/core/src/server/assets-middleware/index.ts

@@ -9,7 +9,7 @@
 import type { ReadStream } from 'node:fs';
 import { createRequire } from 'node:module';
 import type { Compiler, MultiCompiler, Watching } from '@rspack/core';
-import { applyToCompiler, isMultiCompiler } from '../../helpers';
+import { applyToCompiler, isMultiCompiler, pick } from '../../helpers';
 import { logger } from '../../logger';
 import type {
   InternalContext,
@@ -94,11 +94,16 @@ const isNodeCompiler = (compiler: Compiler) => {
   return false;
 };
 
+const isTsError = (error: Rspack.RspackError) =>
+  'message' in error && error.stack?.includes('ts-checker-rspack-plugin');
+
 export const setupServerHooks = ({
+  context,
   compiler,
   token,
   socketServer,
 }: {
+  context: InternalContext;
   compiler: Compiler;
   token: string;
   socketServer: SocketServer;
@@ -108,15 +113,53 @@ export const setupServerHooks = ({
     return;
   }
 
+  // Track errors count to detect if the `done` hook is called multiple times
+  let errorsCount: number | null = null;
+
   compiler.hooks.invalid.tap('rsbuild-dev-server', (fileName) => {
+    errorsCount = null;
+
     // reload page when HTML template changed
     if (typeof fileName === 'string' && fileName.endsWith('.html')) {
       socketServer.sockWrite({ type: 'static-changed' }, token);
-      return;
     }
   });
 
-  compiler.hooks.done.tap('rsbuild-dev-server', () => {
+  compiler.hooks.done.tap('rsbuild-dev-server', (stats) => {
+    const { errors } = stats.compilation;
+    if (errors.length === errorsCount) {
+      return;
+    }
+
+    const isRecalled = errorsCount !== null;
+    errorsCount = errors.length;
+
+    /**
+     * The ts-checker-rspack-plugin asynchronously pushes Type errors to `compilation.errors`
+     * and calls the `done` hook again, so we need to detect changes in errors and render them
+     * in the overlay.
+     */
+    if (isRecalled) {
+      const tsErrors = errors.filter(isTsError);
+      if (!tsErrors.length) {
+        return;
+      }
+
+      const { stats: statsJson } = context.buildState;
+      const statsErrors = tsErrors.map((item) =>
+        pick(item, ['message', 'file']),
+      );
+
+      if (statsJson) {
+        statsJson.errors = statsJson.errors
+          ? [...statsJson.errors, ...statsErrors]
+          : statsErrors;
+      }
+
+      socketServer.sendError(statsErrors, token);
+      return;
+    }
+
     socketServer.onBuildDone(token);
   });
 };
@@ -209,6 +252,7 @@ export const assetsMiddleware = async ({
 
     // register hooks for each compilation, update socket stats if recompiled
     setupServerHooks({
+      context,
       compiler,
       socketServer,
       token,

packages/core/src/server/socketServer.ts

@@ -195,6 +195,23 @@ export class SocketServer {
     this.sendStats({ token });
   }
 
+  /**
+   * Send error messages to the client and render error overlay
+   */
+  public sendError(errors: Rspack.StatsError[], token: string): void {
+    const formattedErrors = errors.map((item) => formatStatsError(item));
+    this.sockWrite(
+      {
+        type: 'errors',
+        data: {
+          text: formattedErrors,
+          html: genOverlayHTML(formattedErrors, this.context.rootPath),
+        },
+      },
+      token,
+    );
+  }
+
   /**
    * Write message to each socket
    * @param message - The message to send
@@ -421,18 +438,7 @@ export class SocketServer {
     }
 
     if (errors.length > 0) {
-      const errorMessages = errors.map((item) => formatStatsError(item));
-
-      this.sockWrite(
-        {
-          type: 'errors',
-          data: {
-            text: errorMessages,
-            html: genOverlayHTML(errorMessages, this.context.rootPath),
-          },
-        },
-        token,
-      );
+      this.sendError(errors, token);
       return;
     }
 

packages/core/tests/server.test.ts

@@ -1,9 +1,6 @@
 import { rspack } from '@rspack/core';
 import { defaultAllowedOrigins } from '../src/defaultConfig';
-import {
-  isClientCompiler,
-  setupServerHooks,
-} from '../src/server/assets-middleware';
+import { isClientCompiler } from '../src/server/assets-middleware';
 import { formatRoutes, printServerURLs } from '../src/server/helper';
 
 beforeEach(() => {
@@ -248,44 +245,6 @@ test('printServerURLs', () => {
 });
 
 describe('test dev server', () => {
-  test('should setupServerHooks correctly', () => {
-    const compiler = rspack({
-      target: 'web',
-    });
-    const onDoneFn = rstest.fn();
-    const onInvalidFn = rstest.fn();
-
-    setupServerHooks({
-      compiler,
-      token: 'test',
-      callbacks: {
-        onDone: onDoneFn,
-        onInvalid: onInvalidFn,
-      },
-    });
-
-    expect(compiler.hooks.done.taps.length).toBe(1);
-  });
-
-  test('should not setupServerHooks when compiler is server', () => {
-    const compiler = rspack({
-      target: 'node',
-    });
-    const onDoneFn = rstest.fn();
-    const onInvalidFn = rstest.fn();
-
-    setupServerHooks({
-      compiler,
-      token: 'test',
-      callbacks: {
-        onDone: onDoneFn,
-        onInvalid: onInvalidFn,
-      },
-    });
-
-    expect(compiler.hooks.done.taps.length).toBe(0);
-  });
-
   test('check isClientCompiler', () => {
     expect(isClientCompiler(rspack({}))).toBeTruthy();