← All platforms

React Router Framework error tracking

Loaders, actions, and a page to render. There are a few places a route can go wrong. The Sentry React Router SDK sends those error reports to your Telebugs server.

~/hoofnotes  npm install @sentry/react-router
~/hoofnotes  nvim instrument.server.mjs app/entry.client.tsx app/entry.server.tsx
import * as Sentry from "@sentry/react-router";
Sentry.init({
// Copy the complete Telebugs DSN, key and path included.
dsn: "YOUR_TELEBUGS_DSN",
});
import * as Sentry from "@sentry/react-router";
Sentry.init({
// Copy the complete Telebugs DSN, key and path included.
dsn: "YOUR_TELEBUGS_DSN",
});
import { hydrateRoot } from "react-dom/client";
import { HydratedRouter } from "react-router/dom";
hydrateRoot(document, <HydratedRouter onError={Sentry.sentryOnError} />);
import * as Sentry from "@sentry/react-router";
export const handleError = Sentry.createSentryHandleError();
~/hoofnotes  NODE_OPTIONS='--import ./instrument.server.mjs' npm run dev

Hang on, I already use Sentry

Keep @sentry/react-router and change its destination to your Telebugs DSN. Your error reports stay on your server. You don’t need a Sentry account.

Does this cover loaders and actions?

Yes. Server error handling can report unexpected loader and action failures. The client connection handles browser-side route errors, with both reporting to Telebugs.

What if I only use React Router as a library?

Use the React SDK for your React app. This integration is for React Router’s framework mode, with its own server and browser entry points.

Will I recognize my source code?

Yes. Give Telebugs the matching source maps and it can show your original files and line numbers instead of a minified backtrace.