fix(pages): preserve missing page props on errors

packages/vinext/src/entries/pages-client-entry.ts

@@ -65,6 +65,7 @@
   const apiRoutes = await apiRouter(pagesDir, nextConfig?.pageExtensions, fileMatcher);
 
   const appFilePath = findFileWithExts(pagesDir, "_app", fileMatcher);
+  const errorFilePath = findFileWithExts(pagesDir, "_error", fileMatcher);
   const hasApp = appFilePath !== null;
   const appPrefetchRoutes = options.appPrefetchRoutes ?? [];
   const pagesPrefetchRoutes: VinextPagesLinkPrefetchRoute[] = [
@@ -102,6 +103,11 @@
     // lgtm[js/bad-code-sanitization]
     return `  ${JSON.stringify(nextFormatPattern)}: () => import(${JSON.stringify(absPath)})`;
   });
+  loaderEntries.push(
+    errorFilePath !== null
+      ? `  "/_error": () => import(${JSON.stringify(errorFilePath)})`
+      : '  "/_error": () => import("next/error")',
+  );
 
   const appFileBase = appFilePath ?? undefined;
 

packages/vinext/src/entries/pages-server-entry.ts

@@ -95,7 +95,7 @@ export async function generateServerEntry(
   const errorImportCode =
     errorFilePath !== null
       ? `import * as ErrorPageModule from ${JSON.stringify(errorFilePath)};`
-      : `const ErrorPageModule = null;`;
+      : `import * as ErrorPageModule from "next/error";`;
 
   // Serialize i18n config for embedding in the server entry
   const i18nConfigJson = nextConfig?.i18n
@@ -301,16 +301,14 @@ export const pageRoutes = [
 ${pageRouteEntries.join(",\n")}
 ];
 const _pageRouteTrie = _buildRouteTrie(pageRoutes);
-const _errorPageRoute = ErrorPageModule
-  ? {
-      pattern: "/_error",
-      patternParts: ["_error"],
-      isDynamic: false,
-      params: [],
-      module: ErrorPageModule,
-      filePath: ${errorAssetPathJson},
-    }
-  : null;
+const _errorPageRoute = {
+  pattern: "/_error",
+  patternParts: ["_error"],
+  isDynamic: false,
+  params: [],
+  module: ErrorPageModule,
+  filePath: ${errorAssetPathJson},
+};
 
 const apiRoutes = [
 ${apiRouteEntries.join(",\n")}

packages/vinext/src/server/dev-server.ts

@@ -720,7 +720,23 @@ export function createSSRHandler(
         return;
       }
       // No route matched — try to render custom 404 page
-      await renderErrorPage(server, runner, req, res, url, pagesDir, 404, undefined, matcher);
+      const requestContext = createRequestContext();
+      await runWithRequestContext(requestContext, async () => {
+        await _alsRegistration;
+        await renderErrorPage(
+          server,
+          runner,
+          req,
+          res,
+          url,
+          pagesDir,
+          404,
+          undefined,
+          matcher,
+          undefined,
+          reactStrictMode,
+        );
+      });
       return;
     }
 
@@ -918,6 +934,8 @@ export function createSSRHandler(
               404,
               routerShim.wrapWithRouterContext,
               matcher,
+              undefined,
+              reactStrictMode,
             );
             return;
           }
@@ -1075,6 +1093,9 @@ export function createSSRHandler(
               pagesDir,
               404,
               routerShim.wrapWithRouterContext,
+              undefined,
+              undefined,
+              reactStrictMode,
             );
             return;
           }
@@ -1527,6 +1548,9 @@ export function createSSRHandler(
               pagesDir,
               404,
               routerShim.wrapWithRouterContext,
+              undefined,
+              undefined,
+              reactStrictMode,
             );
             return;
           }
@@ -2050,6 +2074,7 @@ hydrate();
             undefined,
             matcher,
             e instanceof Error ? e : new Error(String(e)),
+            reactStrictMode,
           );
         } catch (fallbackErr) {
           // If error page itself fails, fall back to plain text.
@@ -2084,6 +2109,7 @@ async function renderErrorPage(
   wrapWithRouterContext?: ((el: React.ReactElement) => React.ReactElement) | null,
   fileMatcher?: ValidFileMatcher,
   err?: Error,
+  reactStrictMode = false,
 ): Promise<void> {
   attachPagesRequestCookies(req);
   const matcher = fileMatcher ?? createValidFileMatcher();
@@ -2092,11 +2118,13 @@ async function renderErrorPage(
     statusCode === 404 ? ["404", "_error"] : statusCode === 500 ? ["500", "_error"] : ["_error"];
 
   for (const candidate of candidates) {
+    // oxlint-disable-next-line typescript/no-explicit-any
+    let errorRouterShim: any = null;
     try {
       const errorAssetPath = findFileWithExts(pagesDir, candidate, matcher);
-      if (!errorAssetPath) continue;
+      if (!errorAssetPath && candidate !== "_error") continue;
 
-      const errorModule = await importModule(runner, errorAssetPath);
+      const errorModule = await importModule(runner, errorAssetPath ?? "next/error");
       const ErrorComponent = errorModule.default;
       if (!ErrorComponent) continue;
 
@@ -2115,27 +2143,62 @@ async function renderErrorPage(
       }
 
       const createElement = React.createElement;
+      res.statusCode = statusCode;
+      const errorPage = candidate === "_error" ? "/_error" : `/${candidate}`;
+      const errorRouter = {
+        pathname: errorPage,
+        query: parseQuery(url),
+        asPath: url,
+      };
+      try {
+        errorRouterShim = await importModule(runner, "next/router");
+        if (typeof errorRouterShim.setSSRContext === "function") {
+          errorRouterShim.setSSRContext({
+            ...errorRouter,
+            navigationIsReady: true,
+          });
+        }
+      } catch {
+        // router shim not available — continue without it
+      }
+      const serverRouter = errorRouterShim?.default ?? errorRouter;
+      const wrapFn = wrapWithRouterContext ?? errorRouterShim?.wrapWithRouterContext;
       const initialErrorProps = await loadPagesGetInitialProps(ErrorComponent, {
         req,
         res,
         err,
-        pathname: candidate === "_error" ? "/_error" : `/${candidate}`,
-        query: parseQuery(url),
+        pathname: errorPage,
+        query: errorRouter.query,
         asPath: url,
       });
       if (res.headersSent || res.writableEnded) return;
       const errorProps = { ...initialErrorProps, statusCode };
-
-      // If the caller didn't supply wrapWithRouterContext, load it now.
-      // runner.import() caches internally so the cost is negligible.
-      let wrapFn = wrapWithRouterContext;
-      if (!wrapFn) {
-        try {
-          const errRouterShim = await importModule(runner, "next/router");
-          wrapFn = errRouterShim.wrapWithRouterContext;
-        } catch {
-          // router shim not available — continue without it
-        }
+      let renderProps: Record<string, unknown>;
+      if (AppComponent && hasPagesGetInitialProps(AppComponent)) {
+        const appInitialProps = await loadPagesGetInitialProps(AppComponent, {
+          AppTree: (appTreeProps: Record<string, unknown>) => {
+            const appTree = createElement(AppComponent, {
+              ...appTreeProps,
+              Component: ErrorComponent,
+              router: serverRouter,
+            });
+            return wrapFn ? wrapFn(appTree) : appTree;
+          },
+          Component: ErrorComponent,
+          router: serverRouter,
+          ctx: {
+            req,
+            res,
+            err,
+            pathname: errorPage,
+            query: errorRouter.query,
+            asPath: url,
+          },
+        });
+        if (res.headersSent || res.writableEnded) return;
+        renderProps = appInitialProps ?? {};
+      } else {
+        renderProps = { pageProps: errorProps };
       }
 
       // Try custom _document
@@ -2159,8 +2222,9 @@ async function renderErrorPage(
       ): React.ReactElement => {
         let errorElement: React.ReactElement = FinalApp
           ? createElement(FinalApp, {
+              ...renderProps,
               Component: FinalComponent,
-              pageProps: errorProps,
+              router: serverRouter,
             })
           : createElement(FinalComponent, errorProps);
         if (wrapFn) errorElement = wrapFn(errorElement);
@@ -2179,20 +2243,84 @@ async function renderErrorPage(
         [appAssetPath, errorAssetPath],
         nonceAttr,
       );
+      const errorModuleSource = errorAssetPath
+        ? createPagesDevModuleUrl(server.config.root, errorAssetPath, "/")
+        : "next/error";
+      const appModuleSource = appAssetPath
+        ? createPagesDevModuleUrl(server.config.root, appAssetPath, "/")
+        : null;
+      const errorNextDataScript = `<script id="__NEXT_DATA__" type="application/json"${nonceAttr}>${safeJsonStringify(
+        {
+          props: renderProps,
+          page: errorPage,
+          query: parseQuery(url),
+          buildId: process.env.__VINEXT_BUILD_ID,
+          isFallback: false,
+        },
+      )}</script>`;
+      const errorHydrationScript = `
+<script type="module"${nonceAttr}>
+import React from "react";
+import { hydrateRoot } from "react-dom/client";
+import "vinext/instrumentation-client";
+import Router, { wrapWithRouterContext, _initializePagesRouterReadyFromNextData } from "next/router";
+
+const nextDataElement = document.getElementById("__NEXT_DATA__");
+window.__NEXT_DATA__ = JSON.parse(nextDataElement.textContent);
+const props = window.__NEXT_DATA__.props;
+_initializePagesRouterReadyFromNextData(window.__NEXT_DATA__, true);
+window.__VINEXT_PAGE_LOADERS__ = { [window.__NEXT_DATA__.page]: () => import("${errorModuleSource}") };
+window.__VINEXT_PAGE_PATTERNS__ = [window.__NEXT_DATA__.page];
+window.__VINEXT_APP_LOADER__ = ${appModuleSource ? `() => import("${appModuleSource}")` : "undefined"};
+window.__VINEXT_REACT_STRICT_MODE__ = ${JSON.stringify(reactStrictMode === true)};
+const pageModule = await import("${errorModuleSource}");
+const PageComponent = pageModule.default;
+let element;
+${
+  appModuleSource
+    ? `const appModule = await import("${appModuleSource}");
+const AppComponent = appModule.default;
+window.__VINEXT_APP__ = AppComponent;
+const initialRouter = { ...Router, isReady: true };
+element = React.createElement(AppComponent, { ...props, Component: PageComponent, pageProps: props.pageProps, router: initialRouter });`
+    : `element = React.createElement(PageComponent, props.pageProps ?? {});`
+}
+let resolveHydrationCommit;
+const hydrationCommitted = new Promise((resolve) => { resolveHydrationCommit = resolve; });
+element = wrapWithRouterContext(element, resolveHydrationCommit);
+let hydrateRootOptions;
+if (import.meta.env.DEV) {
+  const overlay = await import("vinext/dev-error-overlay");
+  overlay.installDevErrorOverlay();
+  overlay.installViteHmrErrorHandler(import.meta.hot);
+  overlay.reportInitialDevServerErrors();
+  hydrateRootOptions = {
+    onCaughtError: overlay.devOnCaughtError,
+    onUncaughtError: overlay.devOnUncaughtError,
+  };
+}
+window.__VINEXT_ROOT__ = hydrateRoot(document.getElementById("__next"), element, hydrateRootOptions);
+await hydrationCommitted;
+const hydratedAt = performance.now();
+window.__VINEXT_HYDRATED_AT = hydratedAt;
+window.__NEXT_HYDRATED = true;
+window.__NEXT_HYDRATED_AT = hydratedAt;
+window.__NEXT_HYDRATED_CB?.();
+</script>`;
+      const errorScripts = `${errorNextDataScript}\n${errorHydrationScript}`;
 
       if (DocumentComponent) {
-        const errorPathname = candidate === "_error" ? "/_error" : `/${candidate}`;
         await streamPageToResponse(res, element, {
           url,
           server,
           fontHeadHTML: "",
           assetHeadHTML,
-          scripts: "",
+          scripts: errorScripts,
           DocumentComponent,
           statusCode,
           documentContext: {
             err,
-            pathname: errorPathname,
+            pathname: errorPage,
             query: parseQuery(url),
             asPath: url,
             req,
@@ -2227,6 +2355,7 @@ async function renderErrorPage(
 </head>
 <body>
   <div id="__next">${bodyHtml}</div>
+  ${errorScripts}
 </body>
 </html>`;
         const transformedHtml = await server.transformIndexHtml(url, html);
@@ -2238,14 +2367,15 @@ async function renderErrorPage(
       if (res.headersSent || res.writableEnded) return;
       // This candidate doesn't exist, try next
       continue;
+    } finally {
+      if (typeof errorRouterShim?.setSSRContext === "function") {
+        errorRouterShim.setSSRContext(null);
+      }
     }
   }
 
-  // No custom error page found — fall back to vinext's default. The 404 case
-  // renders the canonical Next.js HTML body (matching `pages/_error.tsx`) so
-  // dev-server responses include "This page could not be found." just like
-  // production. Other status codes keep the plain-text fallback because
-  // Next.js's `_error.tsx` defaults already handle those cases when present.
+  // Defensive fallback for a missing or invalid framework error module. The
+  // normal no-user-error-file path resolves `next/error` in the candidate loop.
   if (statusCode === 404) {
     const defaultResponse = buildDefaultPagesNotFoundResponse();
     const headers: Record<string, string> = {};

packages/vinext/src/server/pages-page-handler.ts

@@ -558,13 +558,18 @@ export function createPagesPageHandler(
         const parsedRouteUrl = new URL(routeUrl, originalRequestUrl);
         const routePathname = parsedRouteUrl.pathname || "/";
         const pagesResolvedUrl = routePathname + originalRequestUrl.search;
-        const createPageReqRes = () =>
-          createPagesReqRes({
+        const createPageReqRes = () => {
+          const reqRes = createPagesReqRes({
             body: undefined,
             query,
             request,
             url: originalRequestPathAndSearch,
           });
+          if (typeof renderStatusCode === "number") {
+            reqRes.res.statusCode = renderStatusCode;
+          }
+          return reqRes;
+        };
 
         const isOnDemandRevalidate = isOnDemandRevalidateRequest(
           request.headers.get(PRERENDER_REVALIDATE_HEADER),
@@ -655,7 +660,11 @@ export function createPagesPageHandler(
 
         let pageProps = pageDataResult.pageProps;
         let renderProps = pageDataResult.props;
-        if (routePattern === "/_error" && typeof renderStatusCode === "number") {
+        if (
+          routePattern === "/_error" &&
+          typeof renderStatusCode === "number" &&
+          renderProps.pageProps !== undefined
+        ) {
           pageProps = { ...pageProps, statusCode: renderStatusCode };
           renderProps = { ...renderProps, pageProps };
         }