Cellar---Alcools-collection/frontend/node_modules/react-router/docs/how-to/error-reporting.md

title

title
Error Reporting

Error Reporting

[MODES: framework,data]

React Router catches errors in your route modules and sends them to error boundaries to prevent blank pages when errors occur. However, ErrorBoundary isn't sufficient for logging and reporting errors.

Server Errors

[modes: framework]

To access these caught errors on the server, use the handleError export of the server entry module.

1. Reveal the server entry

If you don't see entry.server.tsx in your app directory, you're using a default entry. Reveal it with this cli command:

react-router reveal entry.server

2. Export your error handler

This function is called whenever React Router catches an error in your application on the server.

import { type HandleErrorFunction } from "react-router";

export const handleError: HandleErrorFunction = (
  error,
  { request },
) => {
  // React Router may abort some interrupted requests, don't log those
  if (!request.signal.aborted) {
    myReportError(error);

    // make sure to still log the error so you can see it
    console.error(error);
  }
};

See also:

• handleError

Client Errors

To access these caught errors on the client, use the onError prop on your HydratedRouter or RouterProvider component.

Framework Mode

[modes: framework]

1. Reveal the client entry

If you don't see entry.client.tsx in your app directory, you're using a default entry. Reveal it with this cli command:

react-router reveal entry.client

2. Add your error handler

This function is called whenever React Router catches an error in your application on the client.

import { type ClientOnErrorFunction } from "react-router";

const onError: ClientOnErrorFunction = (
  error,
  { location, params, pattern, errorInfo },
) => {
  myReportError(error, location, errorInfo);

  // make sure to still log the error so you can see it
  console.error(error, errorInfo);
};

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <HydratedRouter onError={onError} />
    </StrictMode>,
  );
});

See also:

• <HydratedRouter onError>

Data Mode

[modes: data]

This function is called whenever React Router catches an error in your application on the client.

import {
  createBrowserRouter,
  type ClientOnErrorFunction,
} from "react-router";
import { RouterProvider } from "react-router/dom";

const onError: ClientOnErrorFunction = (
  error,
  { location, params, pattern, errorInfo },
) => {
  myReportError(error, location, errorInfo);

  // make sure to still log the error so you can see it
  console.error(error, errorInfo);
};

const router = createBrowserRouter(routes);

function App() {
  return (
    <RouterProvider router={router} onError={onError} />
  );
}

See also:

• <RouterProvider onError>