fix: preserve console output for caught app errors in dev (#862)

* fix: preserve console output for caught app errors in dev

* address bonk review comments on PR 862

---------

Co-authored-by: James <james@eli.cx>

Author: lyzno1

packages/vinext/src/check.ts

@@ -168,7 +168,11 @@ const CONFIG_SUPPORT: Record<string, { status: Status; detail?: string }> = {
     status: "partial",
     detail: "supported for Pages Router; App Router unchanged",
   },
-  reactStrictMode: { status: "supported", detail: "always enabled" },
+  reactStrictMode: {
+    status: "partial",
+    detail:
+      "config option recognized but not yet enforced; root is not wrapped in <React.StrictMode>",
+  },
   poweredByHeader: {
     status: "supported",
     detail: "not sent (matching Next.js default when disabled)",

packages/vinext/src/server/app-browser-entry.ts

@@ -75,6 +75,7 @@ import {
   type AppRouterState,
 } from "./app-browser-state.js";
 import { ElementsContext, Slot } from "../shims/slot.js";
+import { devOnCaughtError } from "./app-browser-error.js";
 
 type SearchParamInput = ConstructorParameters<typeof URLSearchParams>[0];
 
@@ -872,7 +873,7 @@ async function main(): Promise<void> {
       initialElements: root,
       initialNavigationSnapshot,
     }),
-    import.meta.env.DEV ? { onCaughtError() {} } : undefined,
+    import.meta.env.DEV ? { onCaughtError: devOnCaughtError } : undefined,
   );
   window.__VINEXT_HYDRATED_AT = performance.now();
 

packages/vinext/src/server/app-browser-error.ts

@@ -0,0 +1,15 @@
+// Preserve console visibility for errors caught during hydration in dev
+// without re-dispatching them through Vite's overlay path.
+//
+// Note: sentinel errors (NEXT_NOT_FOUND, NEXT_REDIRECT, etc.) are re-thrown
+// in getDerivedStateFromError before they reach onCaughtError, so they will
+// not appear here in practice.
+export function devOnCaughtError(
+  error: unknown,
+  errorInfo: { componentStack?: string; errorBoundary?: unknown },
+): void {
+  console.error(error);
+  if (errorInfo?.componentStack) {
+    console.error("The above error occurred in a React component:\n" + errorInfo.componentStack);
+  }
+}

tests/app-browser-entry.test.ts

@@ -1,5 +1,6 @@
 import React from "react";
-import { describe, expect, it } from "vite-plus/test";
+import { describe, expect, it, vi } from "vite-plus/test";
+import { devOnCaughtError } from "../packages/vinext/src/server/app-browser-error.js";
 import {
   APP_INTERCEPTION_CONTEXT_KEY,
   APP_ROOT_LAYOUT_KEY,
@@ -444,6 +445,72 @@ describe("app browser entry previousNextUrl helpers", () => {
   });
 });
 
+describe("devOnCaughtError (hydrateRoot dev handler)", () => {
+  it("logs caught errors to console.error", () => {
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const err = new Error("Maximum update depth exceeded");
+      devOnCaughtError(err, { componentStack: "\n    at List\n    at Apps" });
+      expect(consoleSpy).toHaveBeenCalled();
+      const loggedErrors = consoleSpy.mock.calls.map((args) => args[0]);
+      expect(loggedErrors).toContain(err);
+    } finally {
+      consoleSpy.mockRestore();
+    }
+  });
+
+  it("includes the React component stack in the log when provided", () => {
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      devOnCaughtError(new Error("boom"), {
+        componentStack: "\n    at List (apps/list.tsx:202)",
+      });
+      expect(consoleSpy).toHaveBeenCalledTimes(2);
+      expect(String(consoleSpy.mock.calls[1][0])).toContain("apps/list.tsx:202");
+    } finally {
+      consoleSpy.mockRestore();
+    }
+  });
+
+  it("does not re-dispatch a window 'error' event (would trigger Vite overlay)", () => {
+    // This test runs in a Node environment where `window` is undefined, so the
+    // listener registration is skipped and windowErrorCount stays 0 trivially.
+    // The test still documents the contract: devOnCaughtError must not dispatch
+    // window error events (which would re-trigger the Vite overlay). If a DOM
+    // environment is ever added to this project, this will become a live check.
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    let windowErrorCount = 0;
+    const onError = (): void => {
+      windowErrorCount += 1;
+    };
+    if (typeof window !== "undefined") {
+      window.addEventListener("error", onError);
+    }
+    try {
+      devOnCaughtError(new Error("caught by user error.tsx"), {});
+      expect(windowErrorCount).toBe(0);
+    } finally {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("error", onError);
+      }
+      consoleSpy.mockRestore();
+    }
+  });
+
+  it("is not a no-op (regression guard against `() => {}`)", () => {
+    // Explicit regression guard: the original implementation was `() => {}`,
+    // which silently swallowed all caught errors. This test ensures the handler
+    // always calls console.error at least once.
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      devOnCaughtError(new Error("regression"), {});
+      expect(consoleSpy.mock.calls.length).toBeGreaterThan(0);
+    } finally {
+      consoleSpy.mockRestore();
+    }
+  });
+});
+
 describe("mounted slot helpers", () => {
   it("collects only mounted slot ids", () => {
     const elements: AppElements = createResolvedElements("route:/dashboard", "/", null, {

tests/check.test.ts

@@ -289,7 +289,10 @@ describe("analyzeConfig", () => {
     const items = analyzeConfig(tmpDir);
     expect(items.find((i) => i.name === "basePath")?.status).toBe("supported");
     expect(items.find((i) => i.name === "trailingSlash")?.status).toBe("supported");
-    expect(items.find((i) => i.name === "reactStrictMode")?.status).toBe("supported");
+    // reactStrictMode is reported as `partial` until vinext actually wraps the
+    // hydrated root in `<React.StrictMode>` — currently the config is read but
+    // not enforced. See `packages/vinext/src/check.ts` for the rationale.
+    expect(items.find((i) => i.name === "reactStrictMode")?.status).toBe("partial");
   });
 
   it("detects unsupported webpack config", () => {