fix: maybe fix more react 19 issues

Author: serhalp

e2e-tests/development-runtime/cypress/integration/hot-reloading/error-handling/page-query-result-runtime-error.js

@@ -27,8 +27,7 @@ after(() => {
 const errorPlaceholder = `false`
 const errorReplacement = `true`
 
-// XXX FIXME(serhalp)
-describe.skip(
+describe(
   `testing error overlay and ability to automatically recover runtime errors cause by content changes (page queries variant)`,
   { testIsolation: false },
   () => {

e2e-tests/development-runtime/cypress/integration/hot-reloading/error-handling/runtime-error.js

@@ -39,8 +39,7 @@ describe(
       cy.findByTestId(`hot`).should(`contain.text`, `Working`)
     })
 
-    // XXX FIXME(serhalp)
-    it.skip(`displays error with overlay on runtime errors`, () => {
+    it(`displays error with overlay on runtime errors`, () => {
       cy.exec(
         `npm run update -- --file src/pages/error-handling/runtime-error.js --replacements "${errorPlaceholder}:${errorReplacement}" --exact`
       )

e2e-tests/development-runtime/cypress/integration/hot-reloading/error-handling/static-query-result-runtime-error.js

@@ -46,8 +46,7 @@ describe(
       cy.findByTestId(`results`).should(`contain.text`, `"hasError": false`)
     })
 
-    // XXX FIXME(serhalp)
-    it.skip(`displays error with overlay on runtime errors`, () => {
+    it(`displays error with overlay on runtime errors`, () => {
       cy.exec(
         `npm run update -- --file content/error-recovery/static-query.json  --replacements "${errorPlaceholder}:${errorReplacement}" --exact`
       )

packages/gatsby/cache-dir/app.js

@@ -33,6 +33,9 @@ module.hot.accept(
   }
 )
 
+// Initialize Gatsby events system early for error overlay
+window._gatsbyEvents = window._gatsbyEvents || []
+
 window.___emitter = emitter
 
 const loader = new DevLoader(asyncRequires, matchPaths)
@@ -41,16 +44,50 @@ loader.setApiRunner(apiRunner)
 
 window.___loader = publicLoader
 
+// React 19 error handlers for development error overlay
+const handleUncaughtError = (error, errorInfo) => {
+  console.error(`Uncaught error:`, error, errorInfo)
+  window._gatsbyEvents.push([
+    `FAST_REFRESH`,
+    {
+      action: `SHOW_RUNTIME_ERRORS`,
+      payload: [error], // Pass the actual Error object
+    },
+  ])
+  apiRunner(`onUncaughtError`, { error, errorInfo })
+}
+
+const handleCaughtError = (error, errorInfo) => {
+  // Also forward caught errors to the overlay system
+  window._gatsbyEvents.push([
+    `FAST_REFRESH`,
+    {
+      action: `SHOW_RUNTIME_ERRORS`,
+      payload: [error],
+    },
+  ])
+  apiRunner(`onCaughtError`, { error, errorInfo })
+}
+
 const reactDomClient = require(`react-dom/client`)
 const reactFirstRenderOrHydrate = (Component, el) => {
   // we will use hydrate if mount element has any content inside
   const useHydrate = el && el.children.length
 
+  // Only pass options if React 19 error handling options are available
+  const errorHandlerOptions =
+    handleUncaughtError || handleCaughtError
+      ? {
+          onUncaughtError: handleUncaughtError,
+          onCaughtError: handleCaughtError,
+        }
+      : undefined
+
   if (useHydrate) {
-    const root = reactDomClient.hydrateRoot(el, Component)
+    const root = reactDomClient.hydrateRoot(el, Component, errorHandlerOptions)
     return () => root.unmount()
   } else {
-    const root = reactDomClient.createRoot(el)
+    const root = reactDomClient.createRoot(el, errorHandlerOptions)
     root.render(Component)
     return () => root.unmount()
   }

packages/gatsby/cache-dir/fast-refresh-overlay/components/error-boundary.js

@@ -5,6 +5,31 @@ export class ErrorBoundary extends React.Component {
 
   componentDidCatch(error) {
     this.setState({ error })
+
+    // Forward component errors to Fast Refresh overlay system
+    if (
+      window._gatsbyEvents &&
+      Array.isArray(window._gatsbyEvents.push ? [] : window._gatsbyEvents)
+    ) {
+      window._gatsbyEvents.push([
+        `FAST_REFRESH`,
+        {
+          action: `SHOW_RUNTIME_ERRORS`,
+          payload: [error], // Pass the actual Error object
+        },
+      ])
+    } else if (
+      window._gatsbyEvents &&
+      typeof window._gatsbyEvents.push === `function`
+    ) {
+      window._gatsbyEvents.push([
+        `FAST_REFRESH`,
+        {
+          action: `SHOW_RUNTIME_ERRORS`,
+          payload: [error], // Pass the actual Error object
+        },
+      ])
+    }
   }
 
   render() {