← All platforms

Remix error tracking

A Remix error boundary helps your visitor. The report helps you. Connect the Sentry Remix SDK to Telebugs and keep those reports on your server.

~/hoofnotes  npm install @sentry/remix
~/hoofnotes  nvim instrument.server.mjs app/entry.client.tsx app/entry.server.tsx app/root.tsx
import * as Sentry from "@sentry/remix";
Sentry.init({
// Copy the complete Telebugs DSN, key and path included.
dsn: "YOUR_TELEBUGS_DSN",
});
import * as Sentry from "@sentry/remix";
Sentry.init({
// Copy the complete Telebugs DSN, key and path included.
dsn: "YOUR_TELEBUGS_DSN",
});
import * as Sentry from "@sentry/remix";
export const handleError = Sentry.sentryHandleError;
import { useRouteError } from "@remix-run/react";
import { captureRemixErrorBoundaryError } from "@sentry/remix";
export function ErrorBoundary() {
const error = useRouteError();
captureRemixErrorBoundaryError(error);
return <p>We couldn’t open your notes</p>;
}
~/hoofnotes  NODE_OPTIONS='--import ./instrument.server.mjs' npm run dev

Hang on, I already use Sentry

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

Can I keep my error boundary?

Yes. The SDK can report the exception from your route’s error boundary while you keep control of the fallback UI. Server errors have their own reporting hook.

Moving to React Router framework mode?

There is a React Router SDK for that. Your application setup changes, but Telebugs can remain the home for your error reports.

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.