fix(browser-logs): deduplicate consecutive runtime error logs (#6263)

Author: chenjiahan

e2e/cases/browser-logs/dedupe-log/index.test.ts

@@ -0,0 +1,17 @@
+import { gotoPage, test } from '@e2e/helper';
+
+test('should not output the same error log consecutively', async ({
+  devOnly,
+  page,
+}) => {
+  const rsbuild = await devOnly();
+  await gotoPage(page, rsbuild, '/', { hash: 'test1' });
+  await rsbuild.expectLog('Uncaught Error: #test1');
+  rsbuild.clearLogs();
+
+  await page.reload();
+  await gotoPage(page, rsbuild, '/', { hash: 'test2' });
+  await page.reload();
+  await rsbuild.expectLog('Uncaught Error: #test2');
+  rsbuild.expectNoLog('Uncaught Error: #test1');
+});

e2e/cases/browser-logs/dedupe-log/src/index.js

@@ -0,0 +1 @@
+throw new Error(location.hash);

e2e/cases/plugin-api/plugin-before-start-dev-server-hook/index.test.ts

@@ -1,4 +1,4 @@
-import { buildEntryUrl, expect, test } from '@e2e/helper';
+import { expect, gotoPage, test } from '@e2e/helper';
 import type { RsbuildPlugin } from '@rsbuild/core';
 
 test('should run onBeforeStartDevServer hooks and add custom middleware', async ({
@@ -36,12 +36,9 @@ test('should run onBeforeStartDevServer hooks and add custom middleware', async
     },
   });
 
-  const testUrl = buildEntryUrl('test', rsbuild.port);
-  const test2Url = buildEntryUrl('test2', rsbuild.port);
-
-  await page.goto(testUrl);
+  await gotoPage(page, rsbuild, 'test');
   await expect(page.content()).resolves.toContain('Hello, world!');
 
-  await page.goto(test2Url);
+  await gotoPage(page, rsbuild, 'test2');
   await expect(page.content()).resolves.toContain('Hello, world2!');
 });

e2e/helper/utils.ts

@@ -29,8 +29,9 @@ export const gotoPage = async (
   page: Page,
   rsbuild: { port: number },
   path = 'index',
+  { hash = '' } = {},
 ) => {
-  const url = buildEntryUrl(path, rsbuild.port);
+  const url = `${buildEntryUrl(path, rsbuild.port)}${hash ? `#${hash}` : ''}`;
   return page.goto(url);
 };
 

packages/core/src/server/browserLogs.ts

@@ -109,6 +109,8 @@ const formatErrorLocation = async (
   return rawLocation;
 };
 
+let lastRuntimeErrorLog: string;
+
 /**
  * Processes runtime errors received from the browser and logs them with
  * source location information.
@@ -127,5 +129,11 @@ export const reportRuntimeError = async (
     }
   }
 
+  // Avoid outputting the same log consecutively
+  if (log === lastRuntimeErrorLog) {
+    return;
+  }
+
   logger.error(log);
+  lastRuntimeErrorLog = log;
 };