fix(browser-logs): should skip anonymous frame

e2e/cases/browser-logs/react-error/index.test.ts

@@ -0,0 +1,27 @@
+import { gotoPage, rspackTest } from '@e2e/helper';
+
+rspackTest(
+  'should forward React runtime error logs to terminal',
+  async ({ devOnly, page }) => {
+    const rsbuild = await devOnly();
+
+    await gotoPage(page, rsbuild, '/undefinedError');
+    await rsbuild.expectLog(
+      `error   [browser] Uncaught TypeError: Cannot read properties of undefined (reading 'name') (src/undefinedError.jsx:5:0)`,
+      { posix: true },
+    );
+
+    await gotoPage(page, rsbuild, '/effectError');
+    await rsbuild.expectLog(
+      `error   [browser] Uncaught SyntaxError: Unexpected token 'i', "invalid json" is not valid JSON (src/effectError.jsx:6:0)`,
+      { posix: true },
+    );
+
+    await gotoPage(page, rsbuild, '/eventError');
+    await page.click('button');
+    await rsbuild.expectLog(
+      `error   [browser] Uncaught TypeError: Cannot read properties of null (reading 'someMethod') (src/eventError.jsx:6:0)`,
+      { posix: true },
+    );
+  },
+);

e2e/cases/browser-logs/react-error/rsbuild.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    entry: {
+      eventError: './src/eventError.jsx',
+      effectError: './src/effectError.jsx',
+      undefinedError: './src/undefinedError.jsx',
+    },
+  },
+});

e2e/cases/browser-logs/react-error/src/effectError.jsx

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+
+function ComponentWithEffectError() {
+  useEffect(() => {
+    JSON.parse('invalid json');
+  }, []);
+
+  return <div>Component with effect error</div>;
+}
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<ComponentWithEffectError />);

e2e/cases/browser-logs/react-error/src/eventError.jsx

@@ -0,0 +1,18 @@
+import { createRoot } from 'react-dom/client';
+
+function ComponentWithEventError() {
+  const handleClick = () => {
+    const obj = null;
+    obj.someMethod();
+  };
+
+  return (
+    <button type="button" onClick={handleClick}>
+      Click me to trigger error
+    </button>
+  );
+}
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<ComponentWithEventError />);

e2e/cases/browser-logs/react-error/src/undefinedError.jsx

@@ -0,0 +1,10 @@
+import { createRoot } from 'react-dom/client';
+
+function ComponentWithUndefinedError() {
+  const data = undefined;
+  return <div>{data.name}</div>;
+}
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<ComponentWithUndefinedError />);

packages/core/src/server/browserLogs.ts

@@ -1,7 +1,7 @@
 import path from 'node:path';
 import { promisify } from 'node:util';
-import { parse as parseStack } from 'stacktrace-parser';
-import { JS_REGEX } from '../constants';
+import { parse as parseStack, type StackFrame } from 'stacktrace-parser';
+import { SCRIPT_REGEX } from '../constants';
 import { color } from '../helpers';
 import { logger } from '../logger';
 import type { EnvironmentContext, InternalContext, Rspack } from '../types';
@@ -27,6 +27,19 @@ async function mapSourceMapPosition(
   return originalPosition;
 }
 
+/**
+ * Returns the first stack frame that looks like user code
+ */
+const findSourceFrame = (parsed: StackFrame[]) => {
+  return parsed.find(
+    (frame) =>
+      frame.file !== null &&
+      frame.column !== null &&
+      frame.lineNumber !== null &&
+      SCRIPT_REGEX.test(frame.file),
+  ) as { file: string; column: number; lineNumber: number } | undefined;
+};
+
 /**
  * Resolve source filename and original position from runtime stack trace
  */
@@ -41,16 +54,12 @@ const resolveSourceLocation = async (
   }
 
   // only parse JS files
-  const { file, column, lineNumber } = parsed[0];
-  if (
-    file === null ||
-    column === null ||
-    lineNumber === null ||
-    !JS_REGEX.test(file)
-  ) {
+  const frame = findSourceFrame(parsed);
+  if (!frame) {
     return;
   }
 
+  const { file, column, lineNumber } = frame;
   const sourceMapInfo = getFileFromUrl(
     `${file}.map`,
     fs as OutputFileSystem,
@@ -113,7 +122,9 @@ export const reportRuntimeError = async (
 
   if (message.stack) {
     const rawLocation = await formatErrorLocation(message.stack, context, fs);
-    log += color.dim(` (${rawLocation})`);
+    if (rawLocation) {
+      log += color.dim(` (${rawLocation})`);
+    }
   }
 
   logger.error(log);