From 7fd55419454e27bc10a66ab3ea869469fa8c4314 Mon Sep 17 00:00:00 2001
From: Charly Gomez <charly.gomez1310@gmail.com>
Date: Wed, 8 Apr 2026 13:35:51 +0200
Subject: [PATCH] document sentryonerror

---
 .../frameworks/hydrogen-react-router.mdx      |  4 +-
 .../guides/react-router/manual-setup.mdx      | 44 +------------------
 2 files changed, 5 insertions(+), 43 deletions(-)

diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx
index 48b293c215453..90442292558ae 100644
--- a/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx
+++ b/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx
@@ -115,12 +115,14 @@ startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <HydratedRouter />
+      <HydratedRouter onError={Sentry.sentryOnError} />
     </StrictMode>
   );
 });
 ```
 
+The `sentryOnError` handler integrates with React Router's [`onError` hook](https://reactrouter.com/how-to/error-reporting) to automatically capture and report client-side errors to Sentry.
+
 ### Configure Server-side Sentry
 
 First, create an `instrument.server.mjs` file to initialize Sentry on the server:
diff --git a/docs/platforms/javascript/guides/react-router/manual-setup.mdx b/docs/platforms/javascript/guides/react-router/manual-setup.mdx
index 9bfe4bc96a085..3bb04159d3e95 100644
--- a/docs/platforms/javascript/guides/react-router/manual-setup.mdx
+++ b/docs/platforms/javascript/guides/react-router/manual-setup.mdx
@@ -151,53 +151,13 @@ startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <HydratedRouter />
+      <HydratedRouter onError={Sentry.sentryOnError} />
     </StrictMode>
   );
 });
 ```
 
-#### Report Errors from Error Boundaries
-
-Update your `app/root.tsx` file to capture unhandled errors in your error boundary:
-
-```tsx {diff} {filename: app/root.tsx}
-+import * as Sentry from "@sentry/react-router";
-
-export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  let message = "Oops!";
-  let details = "An unexpected error occurred.";
-  let stack: string | undefined;
-
-  if (isRouteErrorResponse(error)) {
-    message = error.status === 404 ? "404" : "Error";
-    details =
-      error.status === 404
-        ? "The requested page could not be found."
-        : error.statusText || details;
-  } else if (error && error instanceof Error) {
-    // you only want to capture non 404-errors that reach the boundary
-+   Sentry.captureException(error);
-    if (import.meta.env.DEV) {
-      details = error.message;
-      stack = error.stack;
-    }
-  }
-
-  return (
-    <main>
-      <h1>{message}</h1>
-      <p>{details}</p>
-      {stack && (
-        <pre>
-          <code>{stack}</code>
-        </pre>
-      )}
-    </main>
-  );
-}
-// ...
-```
+The `sentryOnError` handler integrates with React Router's [`onError` hook](https://reactrouter.com/how-to/error-reporting) to automatically capture and report client-side errors to Sentry.
 
 ### Configure Server-side Sentry