Fix presentation when onerror receives an event without error (#74643)

Author: huozhi

packages/next/src/client/components/react-dev-overlay/internal/helpers/use-error-handler.ts

@@ -77,7 +77,11 @@ function onUnhandledError(event: WindowEventMap['error']): void | boolean {
     event.preventDefault()
     return false
   }
-  handleClientError(event.error, [])
+  // When there's an error property present, we log the error to error overlay.
+  // Otherwise we don't do anything as it's not logging in the console either.
+  if (event.error) {
+    handleClientError(event.error, [])
+  }
 }
 
 function onUnhandledRejection(ev: WindowEventMap['unhandledrejection']): void {

test/development/app-dir/capture-console-error/app/browser/error-event/page.js

@@ -0,0 +1,20 @@
+'use client'
+
+export default function Page() {
+  return (
+    <button
+      onClick={() => {
+        // Create an ErrorEvent with only a message
+        const errorEvent = new ErrorEvent('error', {
+          message: 'dummy error message', // Message for the event
+          // Omit the `error` property to ensure it is not included
+        })
+
+        // Dispatch the event
+        window.dispatchEvent(errorEvent)
+      }}
+    >
+      click to trigger error event
+    </button>
+  )
+}

test/development/app-dir/capture-console-error/capture-console-error.test.ts

@@ -7,6 +7,8 @@ import {
   getRedboxTotalErrorCount,
   openRedbox,
   hasRedboxCallStack,
+  assertNoRedbox,
+  assertNoConsoleErrors,
 } from 'next-test-utils'
 
 async function getRedboxResult(browser: any) {
@@ -315,4 +317,12 @@ describe('app-dir - capture-console-error', () => {
       `)
     }
   })
+
+  it('should display the error message in error event when event.error is not present', async () => {
+    const browser = await next.browser('/browser/error-event')
+    await browser.elementByCss('button').click()
+
+    await assertNoRedbox(browser)
+    await assertNoConsoleErrors(browser)
+  })
 })

test/lib/next-test-utils.ts

@@ -1522,3 +1522,41 @@ export async function toggleCollapseCallStackFrames(browser: BrowserInterface) {
     expect(currExpanded).not.toBe(lastExpanded)
   })
 }
+
+/**
+ * Encodes the params into a URLSearchParams object using the format that the
+ * now builder uses for route matches (adding the `nxtP` prefix to the keys).
+ *
+ * @param params - The params to encode.
+ * @param extraQueryParams - The extra query params to encode (without the `nxtP` prefix).
+ * @returns The encoded URLSearchParams object.
+ */
+export function createNowRouteMatches(
+  params: Record<string, string>,
+  extraQueryParams: Record<string, string> = {}
+): URLSearchParams {
+  const urlSearchParams = new URLSearchParams()
+  for (const [key, value] of Object.entries(params)) {
+    urlSearchParams.append(`nxtP${key}`, value)
+  }
+  for (const [key, value] of Object.entries(extraQueryParams)) {
+    urlSearchParams.append(key, value)
+  }
+
+  return urlSearchParams
+}
+
+export async function assertNoConsoleErrors(browser: BrowserInterface) {
+  const logs = await browser.log()
+  const warningsAndErrors = logs.filter((log) => {
+    return (
+      log.source === 'warning' ||
+      (log.source === 'error' &&
+        // These are expected when we visit 404 pages.
+        log.message !==
+          'Failed to load resource: the server responded with a status of 404 (Not Found)')
+    )
+  })
+
+  expect(warningsAndErrors).toEqual([])
+}