← All platforms

React error tracking

A component breaks. You want to know which one. The Sentry React SDK sends error reports to Telebugs on your own server. 

~/hoofnotes  npm install @sentry/react --save
added 12 packages in 2s
~/hoofnotes  nvim src/instrument.ts src/main.tsx
import * as Sentry from "@sentry/react";
// Copy the complete DSN from your Telebugs project,
// including its key and path.
Sentry.init({
dsn: "YOUR_TELEBUGS_DSN",
});
// Remove this test call once it appears in Telebugs.
Sentry.captureException(new Error("Hello from Hoof Notes"));
import "./instrument"; // Keep this import first.
import * as Sentry from "@sentry/react";
import { createRoot } from "react-dom/client";
import App from "./App";
const root = createRoot(document.getElementById("root")!);
root.render(
<Sentry.ErrorBoundary
fallback={<p>Could not open your notes.</p>}
>
<App />
</Sentry.ErrorBoundary>,
);
~/hoofnotes  npm run dev -- --open
> [email protected] dev
> vite --open

  VITE  ready in 182 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Hang on, I already use Sentry

Keep @sentry/react, your error handlers, and your breadcrumbs. Change the DSN to Telebugs. Your reports go to your server; you don’t need a Sentry account.

Will this catch errors inside my components?

Yes. The SDK’s error boundary reports errors in the component tree it wraps. You can show a fallback to your visitor and keep the report in Telebugs.

Am I going to be reading minified JavaScript?

Not if you provide matching source maps. Telebugs can show the original JSX or TSX, with filenames and line numbers in the backtrace.

What if my app uses Next.js?

We support Next.js, too. Its Sentry integration covers the server as well as the browser.