DataStrategyResult interface
DataStrategyResult is an object with type field (either 'data' or 'error') and result field (unknown, can be data, Error, Response, or data() function result).
React Router · API · all subjects
error handling & async
13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Local storage anti-pattern with server rendering
Do not initialize React state directly from localStorage during component render because window.localStorage is unavailable during server-side rendering. This causes errors like 'window is not defined'. Instead, initialize state within a useLayoutEffect hook to avoid server rendering complications and potential UI flickering from state mismatches.
Server error handler example
Example of setting up error handling in entry.server.tsx: Export const handleError: HandleErrorFunction = (error, { request }) => { if (!request.signal.aborted) { myReportError(error); console.error(error); } };
Framework mode client error handler example
Example of setting up error handling in framework mode entry.client.tsx: Define const onError: ClientOnErrorFunction = (error, { location, params, pattern, errorInfo }) => { ... }; then pass it to HydratedRouter with <HydratedRouter onError={onError} /> inside startTransition.
Data mode client error handler example
Example of setting up error handling in data mode: Define const onError: ClientOnErrorFunction = (error, { location, params, pattern, errorInfo }) => { ... }; create router with createBrowserRouter(routes); then pass onError to RouterProvider with <RouterProvider router={router} onError={onError} />.
Server error handling with handleError export
To access errors caught by React Router on the server, export a handleError function from the server entry module. The function receives error and an object with request property. The request has a signal property with an aborted flag that indicates if the request was interrupted; interrupted requests should not be logged.
handleError function signature
handleError has type HandleErrorFunction and receives two parameters: error (the caught error) and an object containing request (with request.signal.aborted property). It should check if the request was not aborted before reporting the error.
Client error handling in Framework Mode with HydratedRouter
In framework mode, use the onError prop on HydratedRouter component to access errors caught by React Router on the client. The onError handler receives error and an object with location, params, pattern, and errorInfo properties.
ClientOnErrorFunction signature
ClientOnErrorFunction receives two parameters: error (the caught error) and an object containing location, params, pattern, and errorInfo properties. This function is called whenever React Router catches an error on the client.
Client error handling in Data Mode with RouterProvider
In data mode, use the onError prop on RouterProvider component to access errors caught by React Router on the client. Pass the onError handler (of type ClientOnErrorFunction) to RouterProvider, which receives error, location, params, pattern, and errorInfo.
ErrorBoundary limitations for error reporting
ErrorBoundary is not sufficient for logging and reporting errors. React Router catches errors in route modules and sends them to error boundaries to prevent blank pages, but additional error handling mechanisms like handleError (server) and onError (client) are needed for proper error reporting.
Error recovery in handleDocumentRequest
If an error is caught during render in handleDocumentRequest, the boundaries are tracked on staticHandlerContext and getStaticContextFromError can be used to get a new context for a second pass, with the need to re-call differentiateCatchVersusErrorBoundaries.
handleDocumentRequest migration - error and catch boundary differentiation
The handleDocumentRequest migration must differentiate between catch and error boundaries. When a route exports a CatchBoundary but not an ErrorBoundary, it is represented in the DataRouteObject with hasErrorBoundary=true since the router does not distinguish. If the route's loader throws an error, the router catches it at the errorElement, but then it must be re-bubbled upwards to the nearest ErrorBoundary. The differentiateCatchVersusErrorBoundaries function handles this mapping.