Use turbo stream for framework hydration errors (#15175)

* Use turbo stream for framework hydration errors

* Avoid serializing internal error response flag

Author: brophdawg11

integration/error-sanitization-test.ts

@@ -179,11 +179,8 @@ test.describe("Error Sanitization", () => {
       expect(html).toMatch("Index Error");
       expect(html).not.toMatch("LOADER");
       expect(html).toMatch("MESSAGE:Unexpected Server Error");
-      // This is the turbo-stream encoding - the fact that stack goes right
-      // into __type means it has no value
-      expect(html).toMatch(
-        '\\"message\\",\\"Unexpected Server Error\\",\\"stack\\",\\"__type\\",\\"Error\\"',
-      );
+      expect(html).toMatch('\\"SanitizedError\\"');
+      expect(html).toMatch('\\"Error\\",\\"Unexpected Server Error\\"');
       expect(html).not.toMatch(/ at /i);
       expect(errorLogs.length).toBe(1);
       expect(errorLogs[0][0].message).toMatch("Loader Error");
@@ -195,11 +192,8 @@ test.describe("Error Sanitization", () => {
       let html = await response.text();
       expect(html).toMatch("Index Error");
       expect(html).toMatch("MESSAGE:Unexpected Server Error");
-      // This is the turbo-stream encoding - the fact that stack goes right
-      // into __type means it has no value
-      expect(html).toMatch(
-        '\\"message\\",\\"Unexpected Server Error\\",\\"stack\\",\\"__type\\",\\"Error\\"',
-      );
+      expect(html).toMatch('\\"SanitizedError\\"');
+      expect(html).toMatch('\\"Error\\",\\"Unexpected Server Error\\"');
       expect(html).not.toMatch(/ at /i);
       expect(errorLogs.length).toBe(1);
       expect(errorLogs[0][0].message).toMatch("Render Error");
@@ -571,11 +565,8 @@ test.describe("Error Sanitization", () => {
       expect(html).toMatch("Index Error");
       expect(html).not.toMatch("LOADER");
       expect(html).toMatch("MESSAGE:Unexpected Server Error");
-      // This is the turbo-stream encoding - the fact that stack goes right
-      // into __type means it has no value
-      expect(html).toMatch(
-        '\\"message\\",\\"Unexpected Server Error\\",\\"stack\\",\\"__type\\",\\"Error\\"',
-      );
+      expect(html).toMatch('\\"SanitizedError\\"');
+      expect(html).toMatch('\\"Error\\",\\"Unexpected Server Error\\"');
       expect(html).not.toMatch(/ at /i);
       expect(errorLogs[0][0]).toEqual("App Specific Error Logging:");
       expect(errorLogs[1][0]).toEqual("  Request: GET test://test/?loader");
@@ -589,11 +580,8 @@ test.describe("Error Sanitization", () => {
       let html = await response.text();
       expect(html).toMatch("Index Error");
       expect(html).toMatch("MESSAGE:Unexpected Server Error");
-      // This is the turbo-stream encoding - the fact that stack goes right
-      // into __type means it has no value
-      expect(html).toMatch(
-        '\\"message\\",\\"Unexpected Server Error\\",\\"stack\\",\\"__type\\",\\"Error\\"',
-      );
+      expect(html).toMatch('\\"SanitizedError\\"');
+      expect(html).toMatch('\\"Error\\",\\"Unexpected Server Error\\"');
       expect(html).not.toMatch(/ at /i);
       expect(errorLogs[0][0]).toEqual("App Specific Error Logging:");
       expect(errorLogs[1][0]).toEqual("  Request: GET test://test/?render");

packages/react-router/.changes/patch.framework-errors-turbo-stream.md

@@ -0,0 +1 @@
+Use `turbo-stream` to serialize and deserialize Framework Mode hydration errors

packages/react-router/.changes/patch.restrict-data-error-deserialization.md

@@ -0,0 +1 @@
+Remove the un-documented custom error serialization logic from Data Mode SSR built-in hydration flows

packages/react-router/__tests__/dom/data-browser-router-test.tsx

@@ -8103,6 +8103,56 @@ function testDomRouter(
         `);
       });
 
+      it("does not deserialize custom Error subclass instances from the window", () => {
+        try {
+          (window as any).CustomError = class CustomError extends Error {};
+          window.__staticRouterHydrationData = {
+            loaderData: {},
+            actionData: null,
+            errors: {
+              "0": {
+                message: "custom error message",
+                __type: "Error",
+                __subType: "CustomError",
+              },
+            },
+          };
+          let router = createTestRouter([
+            {
+              path: "/",
+              Component: () => <h1>Nope</h1>,
+              ErrorBoundary: () => <Boundary />,
+            },
+          ]);
+          let { container } = render(<RouterProvider router={router} />);
+
+          function Boundary() {
+            let error = useRouteError() as Error;
+            return error instanceof Error ? (
+              <>
+                <pre>{error.constructor.name}</pre>
+                <pre>{error.toString()}</pre>
+              </>
+            ) : (
+              <p>No :(</p>
+            );
+          }
+
+          expect(getHtml(container)).toMatchInlineSnapshot(`
+            "<div>
+              <pre>
+                Error
+              </pre>
+              <pre>
+                Error: custom error message
+              </pre>
+            </div>"
+          `);
+        } finally {
+          delete (window as any).CustomError;
+        }
+      });
+
       it("renders hydration errors on leaf elements", async () => {
         let router = createTestRouter(
           [

packages/react-router/__tests__/server-runtime/data-test.ts

@@ -1,5 +1,11 @@
 import { decodeViaTurboStream } from "../../lib/dom/ssr/single-fetch";
+import {
+  ErrorResponseImpl,
+  isRouteErrorResponse,
+} from "../../lib/router/utils";
 import { createRequestHandler } from "../../lib/server-runtime/server";
+import { encodeViaTurboStream } from "../../lib/server-runtime/single-fetch";
+import { ServerMode } from "../../lib/server-runtime/mode";
 import { mockServerBuild } from "./utils";
 
 describe("loaders", () => {
@@ -33,3 +39,27 @@ describe("loaders", () => {
     expect((decoded.value as any)[routeId].data).toEqual("/random");
   });
 });
+
+describe("turbo-stream error decoding", () => {
+  it("decodes ErrorResponse instances", async () => {
+    let body = encodeViaTurboStream(
+      {
+        errors: {
+          root: new ErrorResponseImpl(404, "Not Found", "Missing", true),
+        },
+      },
+      new AbortController().signal,
+      undefined,
+      ServerMode.Development,
+    );
+
+    let decoded = await decodeViaTurboStream(body, global);
+    let error = (decoded.value as any).errors.root;
+
+    expect(isRouteErrorResponse(error)).toBe(true);
+    expect(error.status).toBe(404);
+    expect(error.statusText).toBe("Not Found");
+    expect(error.data).toBe("Missing");
+    expect(error.internal).toBe(false);
+  });
+});

packages/react-router/index.ts

@@ -395,9 +395,6 @@ export { FrameworkContext as UNSAFE_FrameworkContext } from "./lib/dom/ssr/compo
 /** @internal */
 export type { AssetsManifest as UNSAFE_AssetsManifest } from "./lib/dom/ssr/entry";
 
-/** @internal */
-export { deserializeErrors as UNSAFE_deserializeErrors } from "./lib/dom/ssr/errors";
-
 /** @internal */
 export { RemixErrorBoundary as UNSAFE_RemixErrorBoundary } from "./lib/dom/ssr/errorBoundaries";
 

packages/react-router/lib/dom-export/hydrated-router.tsx

@@ -17,7 +17,6 @@ import {
   UNSAFE_createBrowserHistory as createBrowserHistory,
   UNSAFE_createClientRoutes as createClientRoutes,
   UNSAFE_createRouter as createRouter,
-  UNSAFE_deserializeErrors as deserializeErrors,
   UNSAFE_getTurboStreamSingleFetchDataStrategy as getTurboStreamSingleFetchDataStrategy,
   UNSAFE_getPatchRoutesOnNavigationFunction as getPatchRoutesOnNavigationFunction,
   UNSAFE_useFogOFWarDiscovery as useFogOFWarDiscovery,
@@ -159,11 +158,6 @@ function createHydratedRouter({
       isSpaMode: ssrInfo.context.isSpaMode,
     });
 
-    if (hydrationData && hydrationData.errors) {
-      // TODO: De-dup this or remove entirely in v7 where single fetch is the
-      // only approach and we have already serialized or deserialized on the server
-      hydrationData.errors = deserializeErrors(hydrationData.errors);
-    }
   }
 
   // We cannot support history-state-driven masking with SSR, so if a hard

packages/react-router/lib/dom/lib.tsx

@@ -36,6 +36,7 @@ import type {
 } from "../router/utils";
 import {
   ErrorResponseImpl,
+  SUPPORTED_ERROR_TYPES,
   joinPaths,
   matchPath,
   parseToInfo,
@@ -740,7 +741,10 @@ function deserializeErrors(
       );
     } else if (val && val.__type === "Error") {
       // Attempt to reconstruct the right type of Error (i.e., ReferenceError)
-      if (val.__subType) {
+      if (
+        typeof val.__subType === "string" &&
+        SUPPORTED_ERROR_TYPES.includes(val.__subType)
+      ) {
         let ErrorConstructor = window[val.__subType];
         if (typeof ErrorConstructor === "function") {
           try {

packages/react-router/lib/dom/ssr/errors.ts

@@ -1,9 +1,6 @@
 import * as React from "react";
 
-import {
-  SUPPORTED_ERROR_TYPES,
-  decode,
-} from "../../../vendor/turbo-stream-v2/turbo-stream";
+import { decode } from "../../../vendor/turbo-stream-v2/turbo-stream";
 import type { Router as DataRouter } from "../../router/router";
 import { isDataWithResponseInit, isResponse } from "../../router/router";
 import type {
@@ -14,6 +11,7 @@ import type {
 } from "../../router/utils";
 import {
   ErrorResponseImpl,
+  SUPPORTED_ERROR_TYPES,
   isRouteErrorResponse,
   redirect,
   data,