Error Reporting

Integrate an error tracking SDK (e.g. Centry) by wrapping the errorComponent and calling the report function inside useEffect:

import { useEffect } from "react";
import { captureException } from "centry-client";
import { ErrorComponent } from "./components/ErrorComponent";

function RootErrorComponent(props: ErrorComponentProps) {
  useEffect(() => {
    captureException(props.error);
  }, [props.error]);

  return <ErrorComponent {...props} />;
}

export const Route = createRootRoute({
  errorComponent: RootErrorComponent,
});

Centry setup

Initialize centry once at app startup, before hydration. init() automatically installs global error handlers — no need for a separate call:

import { init } from "centry-client";

init({
  project: "my-project",
  enabled: import.meta.env.PROD,
});

To opt out of automatic global handlers, pass globalHandlers: false:

This pattern works with any error reporting SDK — just call the report function inside useEffect on the error prop.