Skip to content

docs(js): Update rr framework docs for client side errors #17276

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chargome merged 1 commit into from
Apr 8, 2026
+5 −43
Merged

docs(js): Update rr framework docs for client side errors #17276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
44 changes: 2 additions & 42 deletions docs/platforms/javascript/guides/react-router/manual-setup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Loading