Add changeset and wire into HydratedRouter

Author: brophdawg11

.changeset/cold-geese-turn.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+[UNSTABLE] Add support for `unstable_handleError` for client side data routers

integration/browser-entry-test.ts

@@ -129,3 +129,64 @@ test("allows users to pass a client side context to HydratedRouter", async ({
 
   appFixture.close();
 });
+
+test("allows users to pass a handleError function to HydratedRouter", async ({
+  page,
+}) => {
+  let fixture = await createFixture({
+    files: {
+      "app/entry.client.tsx": js`
+        import { HydratedRouter } from "react-router/dom";
+        import { startTransition, StrictMode } from "react";
+        import { hydrateRoot } from "react-dom/client";
+
+        startTransition(() => {
+          hydrateRoot(
+            document,
+            <StrictMode>
+              <HydratedRouter
+                unstable_handleError={(error, { location, errorInfo }) => {
+                  console.log(error.message, JSON.stringify(errorInfo), location.pathname)
+                }}
+              />
+            </StrictMode>
+          );
+        });
+      `,
+      "app/routes/_index.tsx": js`
+        import { Link } from "react-router";
+        export default function Index() {
+          return <Link to="/page">Go to Page</Link>;
+        }
+      `,
+      "app/routes/page.tsx": js`
+        export default function Page() {
+          throw new Error("Render error");
+        }
+        export function ErrorBoundary({ error }) {
+          return <h1 data-error>Error: {error.message}</h1>
+        }
+      `,
+    },
+  });
+
+  let logs: string[] = [];
+  page.on("console", (msg) => logs.push(msg.text()));
+
+  let appFixture = await createAppFixture(fixture);
+  let app = new PlaywrightFixture(appFixture, page);
+  await app.goto("/", true);
+  await page.click('a[href="/page"]');
+  await page.waitForSelector("[data-error]");
+  expect(await app.getHtml()).toContain("Error: Render error");
+  expect(logs.length).toBe(2);
+  // First one is react logging the error
+  expect(logs[0]).toContain("Error: Render error");
+  expect(logs[0]).not.toContain("componentStack");
+  // Second one is ours
+  expect(logs[1]).toContain("Render error");
+  expect(logs[1]).toContain('"componentStack":');
+  expect(logs[1]).toContain("/page");
+
+  appFixture.close();
+});

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

@@ -77,8 +77,10 @@ function initSsrInfo(): void {
 
 function createHydratedRouter({
   unstable_getContext,
+  unstable_handleError,
 }: {
   unstable_getContext?: RouterInit["unstable_getContext"];
+  unstable_handleError?: RouterInit["unstable_handleError"];
 }): DataRouter {
   initSsrInfo();
 
@@ -169,6 +171,7 @@ function createHydratedRouter({
     history: createBrowserHistory(),
     basename: ssrInfo.context.basename,
     unstable_getContext,
+    unstable_handleError,
     hydrationData,
     hydrationRouteProperties,
     mapRouteProperties,
@@ -222,6 +225,27 @@ export interface HydratedRouterProps {
    * functions
    */
   unstable_getContext?: RouterInit["unstable_getContext"];
+  /**
+   * An error handler function that will be called for any loader/action/render
+   * errors that are encountered in your application.  This is useful for
+   * logging or reporting errors instead of the `ErrorBoundary` because it's not
+   * subject to re-rendering and will only run one time per error.
+   *
+   * The `errorInfo` parameter is passed along from
+   * [`componentDidCatch`](https://react.dev/reference/react/Component#componentdidcatch)
+   * and is only present for render errors.
+   *
+   * ```tsx
+   * <HydratedRouter unstable_handleError={(error, { location, errorInfo }) => {
+   *   console.log(
+   *     `Error at location ${location.pathname}`,
+   *     error,
+   *     errorInfo
+   *   );
+   * }} />
+   * ```
+   */
+  unstable_handleError?: RouterInit["unstable_handleError"];
 }
 
 /**
@@ -233,12 +257,14 @@ export interface HydratedRouterProps {
  * @mode framework
  * @param props Props
  * @param {dom.HydratedRouterProps.unstable_getContext} props.unstable_getContext n/a
+ * @param {dom.HydratedRouterProps.unstable_handleError} props.unstable_handleError n/a
  * @returns A React element that represents the hydrated application.
  */
 export function HydratedRouter(props: HydratedRouterProps) {
   if (!router) {
     router = createHydratedRouter({
       unstable_getContext: props.unstable_getContext,
+      unstable_handleError: props.unstable_handleError,
     });
   }