Stabilize client-side onError

Author: brophdawg11

.changeset/small-flowers-drive.md

@@ -0,0 +1,5 @@
+---
+"react-router": minor
+---
+
+Stabilize `<HydratedRouter onError>`/`<RouterProvider onError>`

integration/browser-entry-test.ts

@@ -146,7 +146,7 @@ test("allows users to pass an onError function to HydratedRouter", async ({
             document,
             <StrictMode>
               <HydratedRouter
-                unstable_onError={(error, errorInfo) => {
+                onError={(error, errorInfo) => {
                   console.log(error.message, JSON.stringify(errorInfo))
                 }}
               />

packages/react-router/__tests__/dom/client-on-error-test.tsx

@@ -44,7 +44,7 @@ describe(`handleError`, () => {
     ]);
 
     let { container } = render(
-      <RouterProvider router={router} unstable_onError={spy} />,
+      <RouterProvider router={router} onError={spy} />,
     );
     await waitFor(() => screen.getByText("lazy error!"));
 
@@ -75,7 +75,7 @@ describe(`handleError`, () => {
       },
     ]);
 
-    render(<RouterProvider router={router} unstable_onError={spy} />);
+    render(<RouterProvider router={router} onError={spy} />);
 
     await waitFor(() => screen.getByText("Error:middleware error!"));
 
@@ -104,7 +104,7 @@ describe(`handleError`, () => {
       },
     ]);
 
-    render(<RouterProvider router={router} unstable_onError={spy} />);
+    render(<RouterProvider router={router} onError={spy} />);
 
     await waitFor(() => screen.getByText("Error:loader error!"));
 
@@ -134,7 +134,7 @@ describe(`handleError`, () => {
     ]);
 
     let { container } = render(
-      <RouterProvider router={router} unstable_onError={spy} />,
+      <RouterProvider router={router} onError={spy} />,
     );
 
     await act(() => router.navigate("/page"));
@@ -170,7 +170,7 @@ describe(`handleError`, () => {
     ]);
 
     let { container } = render(
-      <RouterProvider router={router} unstable_onError={spy} />,
+      <RouterProvider router={router} onError={spy} />,
     );
 
     await act(() => router.navigate("/page"));
@@ -202,7 +202,7 @@ describe(`handleError`, () => {
     ]);
 
     let { container } = render(
-      <RouterProvider router={router} unstable_onError={spy} />,
+      <RouterProvider router={router} onError={spy} />,
     );
 
     await act(() => router.navigate("/page"));
@@ -234,7 +234,7 @@ describe(`handleError`, () => {
     ]);
 
     let { container } = render(
-      <RouterProvider router={router} unstable_onError={spy} />,
+      <RouterProvider router={router} onError={spy} />,
     );
 
     await act(() =>
@@ -269,7 +269,7 @@ describe(`handleError`, () => {
     ]);
 
     let { container } = render(
-      <RouterProvider router={router} unstable_onError={spy} />,
+      <RouterProvider router={router} onError={spy} />,
     );
 
     await act(() => router.fetch("key", "0", "/fetch"));
@@ -299,7 +299,7 @@ describe(`handleError`, () => {
     ]);
 
     let { container } = render(
-      <RouterProvider router={router} unstable_onError={spy} />,
+      <RouterProvider router={router} onError={spy} />,
     );
 
     await act(() =>
@@ -335,7 +335,7 @@ describe(`handleError`, () => {
     ]);
 
     let { container } = render(
-      <RouterProvider router={router} unstable_onError={spy} />,
+      <RouterProvider router={router} onError={spy} />,
     );
 
     await act(() => router.navigate("/page"));
@@ -380,7 +380,7 @@ describe(`handleError`, () => {
     ]);
 
     let { container } = render(
-      <RouterProvider router={router} unstable_onError={spy} />,
+      <RouterProvider router={router} onError={spy} />,
     );
 
     await act(() => router.navigate("/page"));
@@ -429,7 +429,7 @@ describe(`handleError`, () => {
     }
 
     let { container } = render(
-      <RouterProvider router={router} unstable_onError={spy} />,
+      <RouterProvider router={router} onError={spy} />,
     );
 
     await act(() => router.navigate("/page"));
@@ -484,7 +484,7 @@ describe(`handleError`, () => {
     }
 
     let { container } = render(
-      <RouterProvider router={router} unstable_onError={spy} />,
+      <RouterProvider router={router} onError={spy} />,
     );
 
     await act(() => router.navigate("/page"));
@@ -540,7 +540,7 @@ describe(`handleError`, () => {
     ]);
 
     let { container } = render(
-      <RouterProvider router={router} unstable_onError={spy} />,
+      <RouterProvider router={router} onError={spy} />,
     );
 
     await act(() => router.navigate("/page"));
@@ -591,7 +591,7 @@ describe(`handleError`, () => {
     ]);
 
     let { container } = render(
-      <RouterProvider router={router} unstable_onError={spy} />,
+      <RouterProvider router={router} onError={spy} />,
     );
 
     await act(() => router.navigate("/page"));

packages/react-router/index.ts

@@ -103,7 +103,7 @@ export { AwaitContextProvider as UNSAFE_AwaitContextProvider } from "./lib/conte
 export type {
   AwaitProps,
   IndexRouteProps,
-  unstable_ClientOnErrorFunction,
+  ClientOnErrorFunction,
   LayoutRouteProps,
   MemoryRouterOpts,
   MemoryRouterProps,

packages/react-router/lib/components.tsx

@@ -333,7 +333,7 @@ class Deferred<T> {
  * Function signature for client side error handling for loader/actions errors
  * and rendering errors via `componentDidCatch`
  */
-export interface unstable_ClientOnErrorFunction {
+export interface ClientOnErrorFunction {
   (
     error: unknown,
     info: {
@@ -374,13 +374,13 @@ export interface RouterProviderProps {
    * and is only present for render errors.
    *
    * ```tsx
-   * <RouterProvider unstable_onError=(error, errorInfo) => {
+   * <RouterProvider onError=(error, errorInfo) => {
    *   console.error(error, errorInfo);
    *   reportToErrorService(error, errorInfo);
    * }} />
    * ```
    */
-  unstable_onError?: unstable_ClientOnErrorFunction;
+  onError?: ClientOnErrorFunction;
   /**
    * Control whether router state updates are internally wrapped in
    * [`React.startTransition`](https://react.dev/reference/react/startTransition).
@@ -429,15 +429,15 @@ export interface RouterProviderProps {
  * @mode data
  * @param props Props
  * @param {RouterProviderProps.flushSync} props.flushSync n/a
- * @param {RouterProviderProps.unstable_onError} props.unstable_onError n/a
+ * @param {RouterProviderProps.onError} props.onError n/a
  * @param {RouterProviderProps.router} props.router n/a
  * @param {RouterProviderProps.unstable_useTransitions} props.unstable_useTransitions n/a
  * @returns React element for the rendered router
  */
 export function RouterProvider({
   router,
   flushSync: reactDomFlushSyncImpl,
-  unstable_onError,
+  onError,
   unstable_useTransitions,
 }: RouterProviderProps): React.ReactElement {
   let [_state, setStateImpl] = React.useState(router.state);
@@ -461,9 +461,9 @@ export function RouterProvider({
       { deletedFetchers, newErrors, flushSync, viewTransitionOpts },
     ) => {
       // Send router errors through onError
-      if (newErrors && unstable_onError) {
+      if (newErrors && onError) {
         Object.values(newErrors).forEach((error) =>
-          unstable_onError(error, {
+          onError(error, {
             location: newState.location,
             params: newState.matches[0]?.params ?? {},
             unstable_pattern: getRoutePattern(newState.matches),
@@ -583,7 +583,7 @@ export function RouterProvider({
       renderDfd,
       unstable_useTransitions,
       setOptimisticState,
-      unstable_onError,
+      onError,
     ],
   );
 
@@ -689,9 +689,9 @@ export function RouterProvider({
       navigator,
       static: false,
       basename,
-      unstable_onError,
+      onError,
     }),
-    [router, navigator, basename, unstable_onError],
+    [router, navigator, basename, onError],
   );
 
   // The fragment and {null} here are important!  We need them to keep React 18's
@@ -717,7 +717,7 @@ export function RouterProvider({
                   routes={router.routes}
                   future={router.future}
                   state={state}
-                  unstable_onError={unstable_onError}
+                  onError={onError}
                 />
               </Router>
             </ViewTransitionContext.Provider>
@@ -763,14 +763,14 @@ function DataRoutes({
   routes,
   future,
   state,
-  unstable_onError,
+  onError,
 }: {
   routes: DataRouteObject[];
   future: DataRouter["future"];
   state: RouterState;
-  unstable_onError: unstable_ClientOnErrorFunction | undefined;
+  onError: ClientOnErrorFunction | undefined;
 }): React.ReactElement | null {
-  return useRoutesImpl(routes, undefined, state, unstable_onError, future);
+  return useRoutesImpl(routes, undefined, state, onError, future);
 }
 
 /**
@@ -1599,10 +1599,10 @@ export function Await<Resolve>({
     (error: unknown, errorInfo?: React.ErrorInfo) => {
       if (
         dataRouterContext &&
-        dataRouterContext.unstable_onError &&
+        dataRouterContext.onError &&
         dataRouterStateContext
       ) {
-        dataRouterContext.unstable_onError(error, {
+        dataRouterContext.onError(error, {
           location: dataRouterStateContext.location,
           params: dataRouterStateContext.matches[0]?.params || {},
           unstable_pattern: getRoutePattern(dataRouterStateContext.matches),

packages/react-router/lib/context.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { unstable_ClientOnErrorFunction } from "./components";
+import type { ClientOnErrorFunction } from "./components";
 import type {
   History,
   Location,
@@ -92,7 +92,7 @@ export interface DataRouterContextObject
   extends Omit<NavigationContextObject, "future" | "unstable_useTransitions"> {
   router: Router;
   staticContext?: StaticHandlerContext;
-  unstable_onError?: unstable_ClientOnErrorFunction;
+  onError?: ClientOnErrorFunction;
 }
 
 export const DataRouterContext =

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

@@ -6,7 +6,7 @@ import type {
   DataRouter,
   HydrationState,
   RouterInit,
-  unstable_ClientOnErrorFunction,
+  ClientOnErrorFunction,
 } from "react-router";
 import {
   UNSAFE_getHydrationData as getHydrationData,
@@ -291,13 +291,13 @@ export interface HydratedRouterProps {
    * and is only present for render errors.
    *
    * ```tsx
-   * <HydratedRouter unstable_onError={(error, errorInfo) => {
+   * <HydratedRouter onError={(error, errorInfo) => {
    *   console.error(error, errorInfo);
    *   reportToErrorService(error, errorInfo);
    * }} />
    * ```
    */
-  unstable_onError?: unstable_ClientOnErrorFunction;
+  onError?: ClientOnErrorFunction;
   /**
    * Control whether router state updates are internally wrapped in
    * [`React.startTransition`](https://react.dev/reference/react/startTransition).
@@ -328,7 +328,7 @@ export interface HydratedRouterProps {
  * @mode framework
  * @param props Props
  * @param {dom.HydratedRouterProps.getContext} props.getContext n/a
- * @param {dom.HydratedRouterProps.unstable_onError} props.unstable_onError n/a
+ * @param {dom.HydratedRouterProps.onError} props.onError n/a
  * @returns A React element that represents the hydrated application.
  */
 export function HydratedRouter(props: HydratedRouterProps) {
@@ -424,7 +424,7 @@ export function HydratedRouter(props: HydratedRouterProps) {
           <RouterProvider
             router={router}
             unstable_useTransitions={props.unstable_useTransitions}
-            unstable_onError={props.unstable_onError}
+            onError={props.onError}
           />
         </RemixErrorBoundary>
       </FrameworkContext.Provider>

packages/react-router/lib/hooks.tsx

@@ -56,7 +56,7 @@ import type {
   GetLoaderData,
   SerializeFrom,
 } from "./types/route-data";
-import type { unstable_ClientOnErrorFunction } from "./components";
+import type { ClientOnErrorFunction } from "./components";
 import type { RouteModules } from "./types/register";
 
 /**
@@ -757,7 +757,7 @@ export function useRoutesImpl(
   routes: RouteObject[],
   locationArg?: Partial<Location> | string,
   dataRouterState?: DataRouter["state"],
-  unstable_onError?: unstable_ClientOnErrorFunction,
+  onError?: ClientOnErrorFunction,
   future?: DataRouter["future"],
 ): React.ReactElement | null {
   invariant(
@@ -911,7 +911,7 @@ export function useRoutesImpl(
       ),
     parentMatches,
     dataRouterState,
-    unstable_onError,
+    onError,
     future,
   );
 
@@ -1106,7 +1106,7 @@ export function _renderMatches(
   matches: RouteMatch[] | null,
   parentMatches: RouteMatch[] = [],
   dataRouterState: DataRouter["state"] | null = null,
-  unstable_onError: unstable_ClientOnErrorFunction | null = null,
+  onErrorHandler: ClientOnErrorFunction | null = null,
   future: DataRouter["future"] | null = null,
 ): React.ReactElement | null {
   if (matches == null) {
@@ -1190,9 +1190,9 @@ export function _renderMatches(
   }
 
   let onError =
-    dataRouterState && unstable_onError
+    dataRouterState && onErrorHandler
       ? (error: unknown, errorInfo?: React.ErrorInfo) => {
-          unstable_onError(error, {
+          onErrorHandler(error, {
             location: dataRouterState.location,
             params: dataRouterState.matches?.[0]?.params ?? {},
             unstable_pattern: getRoutePattern(dataRouterState.matches),