Docs

Author: brophdawg11

docs/how-to/error-boundary.md

@@ -11,7 +11,7 @@ title: Error Boundaries
 
 To avoid rendering an empty page to users, route modules will automatically catch errors in your code and render the closest `ErrorBoundary`.
 
-Error boundaries are not intended for error reporting or rendering form validation errors. Please see [Form Validation](./form-validation) and [Error Reporting](./error-reporting) instead.
+Error boundaries are not intended for rendering form validation errors or error reporting. Please see [Form Validation](./form-validation) and [Error Reporting](./error-reporting) instead.
 
 ## 1. Add a root error boundary
 

docs/how-to/error-reporting.md

@@ -4,22 +4,28 @@ title: Error Reporting
 
 # Error Reporting
 
-[MODES: framework]
+[MODES: framework,data]
 
 <br/>
 <br/>
 
-React Router catches errors in your route modules and sends them to [error boundaries](./error-boundary) to prevent blank pages when errors occur. However, ErrorBoundary isn't sufficient for logging and reporting errors. To access these caught errors, use the handleError export of the server entry module.
+React Router catches errors in your route modules and sends them to [error boundaries](./error-boundary) to prevent blank pages when errors occur. However, `ErrorBoundary` isn't sufficient for logging and reporting errors.
 
-## 1. Reveal the server entry
+## Server Errors
 
-If you don't see `entry.server.tsx` in your app directory, you're using a default entry. Reveal it with this cli command:
+[modes: framework]
+
+To access these caught errors on the server, use the `handleError` export of the server entry module.
+
+### 1. Reveal the server entry
+
+If you don't see [`entry.server.tsx`][entryserver] in your app directory, you're using a default entry. Reveal it with this cli command:
 
 ```shellscript nonumber
-react-router reveal
+react-router reveal entry.server
 ```
 
-## 2. Export your error handler
+### 2. Export your error handler
 
 This function is called whenever React Router catches an error in your application on the server.
 
@@ -39,3 +45,75 @@ export const handleError: HandleErrorFunction = (
   }
 };
 ```
+
+## Client Errors
+
+To access these caught errors on the client, use the `onError` prop on your [`HydratedRouter`][hydratedrouter] or [`RouterProvider`][routerprovider] component.
+
+### Framework Mode
+
+[modes: framework]
+
+#### 1. Reveal the client entry
+
+If you don't see [`entry.client.tsx`][entryclient] in your app directory, you're using a default entry. Reveal it with this cli command:
+
+```shellscript nonumber
+react-router reveal entry.client
+```
+
+#### 2. Add your error handler
+
+This function is called whenever React Router catches an error in your application on the client.
+
+```tsx filename=entry.client.tsx
+import { type ClientOnErrorFunction } from "react-router";
+
+const onError: ClientOnErrorFunction = (
+  error,
+  { location, params, unstable_pattern, errorInfo },
+) => {
+  myReportError(error, location, errorInfo);
+
+  // make sure to still log the error so you can see it
+  console.error(error, errorInfo);
+};
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <HydratedRouter onError={onError} />
+    </StrictMode>,
+  );
+});
+```
+
+### Data Mode
+
+[modes: data]
+
+This function is called whenever React Router catches an error in your application on the client.
+
+```tsx
+import { type ClientOnErrorFunction } from "react-router";
+
+const onError: ClientOnErrorFunction = (
+  error,
+  { location, params, unstable_pattern, errorInfo },
+) => {
+  myReportError(error, location, errorInfo);
+
+  // make sure to still log the error so you can see it
+  console.error(error, errorInfo);
+};
+
+function App() {
+  return <RouterProvider onError={onError} />;
+}
+```
+
+[entryserver]: ../api/framework-conventions/entry.server.tsx
+[entryclient]: ../api/framework-conventions/entry.client.tsx
+[hydratedrouter]: ../api//framework-routers/HydratedRouter
+[routerprovider]: ../api/data-routers/RouterProvider

packages/react-router/lib/components.tsx

@@ -364,19 +364,20 @@ export interface RouterProviderProps {
    */
   flushSync?: (fn: () => unknown) => undefined;
   /**
-   * 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
+   * An error handler function that will be called for any middleware, loader, action,
+   * or render errors that are encountered in your application.  This is useful for
+   * logging or reporting errors instead of in the {@link 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
-   * <RouterProvider onError=(error, errorInfo) => {
-   *   console.error(error, errorInfo);
-   *   reportToErrorService(error, errorInfo);
+   * <RouterProvider onError=(error, info) => {
+   *   let { location, params, unstable_pattern, errorInfo } = info;
+   *   console.error(error, location, errorInfo);
+   *   reportToErrorService(error, location, errorInfo);
    * }} />
    * ```
    */

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

@@ -281,19 +281,20 @@ export interface HydratedRouterProps {
    */
   unstable_instrumentations?: unstable_ClientInstrumentation[];
   /**
-   * 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
+   * An error handler function that will be called for any middleware, loader, action,
+   * or render errors that are encountered in your application.  This is useful for
+   * logging or reporting errors instead of in the {@link 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 onError={(error, errorInfo) => {
-   *   console.error(error, errorInfo);
-   *   reportToErrorService(error, errorInfo);
+   * <HydratedRouter onError=(error, info) => {
+   *   let { location, params, unstable_pattern, errorInfo } = info;
+   *   console.error(error, location, errorInfo);
+   *   reportToErrorService(error, location, errorInfo);
    * }} />
    * ```
    */