UNPKG

3.55 kB Markdown View Raw
1---
2title: Error Reporting
3---
4
5# Error Reporting
6
7[MODES: framework,data]
8
9React Router catches errors in your route modules and sends them to [error boundaries](./error-boundary) to prevent blank pages when errors occur. However, `ErrorBoundary` isn't sufficient for logging and reporting errors.
10
11## Server Errors
12
13[modes: framework]
14
15To access these caught errors on the server, use the `handleError` export of the server entry module.
16
17### 1. Reveal the server entry
18
19If you don't see [`entry.server.tsx`][entryserver] in your app directory, you're using a default entry. Reveal it with this cli command:
20
21```shellscript nonumber
22react-router reveal entry.server
23```
24
25### 2. Export your error handler
26
27This function is called whenever React Router catches an error in your application on the server.
28
29```tsx filename=entry.server.tsx
30import { type HandleErrorFunction } from "react-router";
31
32export const handleError: HandleErrorFunction = (
33 error,
34 { request },
35) => {
36 // React Router may abort some interrupted requests, don't log those
37 if (!request.signal.aborted) {
38 myReportError(error);
39
40 // make sure to still log the error so you can see it
41 console.error(error);
42 }
43};
44```
45
46See also:
47
48- [`handleError`][handleError]
49
50## Client Errors
51
52To access these caught errors on the client, use the `onError` prop on your [`HydratedRouter`][hydratedrouter] or [`RouterProvider`][routerprovider] component.
53
54### Framework Mode
55
56[modes: framework]
57
58#### 1. Reveal the client entry
59
60If you don't see [`entry.client.tsx`][entryclient] in your app directory, you're using a default entry. Reveal it with this cli command:
61
62```shellscript nonumber
63react-router reveal entry.client
64```
65
66#### 2. Add your error handler
67
68This function is called whenever React Router catches an error in your application on the client.
69
70```tsx filename=entry.client.tsx
71import { type ClientOnErrorFunction } from "react-router";
72
73const onError: ClientOnErrorFunction = (
74 error,
75 { location, params, pattern, errorInfo },
76) => {
77 myReportError(error, location, errorInfo);
78
79 // make sure to still log the error so you can see it
80 console.error(error, errorInfo);
81};
82
83startTransition(() => {
84 hydrateRoot(
85 document,
86 <StrictMode>
87 <HydratedRouter onError={onError} />
88 </StrictMode>,
89 );
90});
91```
92
93See also:
94
95- [`<HydratedRouter onError>`][hydratedrouter-onerror]
96
97### Data Mode
98
99[modes: data]
100
101This function is called whenever React Router catches an error in your application on the client.
102
103```tsx
104import {
105 createBrowserRouter,
106 type ClientOnErrorFunction,
107} from "react-router";
108import { RouterProvider } from "react-router/dom";
109
110const onError: ClientOnErrorFunction = (
111 error,
112 { location, params, pattern, errorInfo },
113) => {
114 myReportError(error, location, errorInfo);
115
116 // make sure to still log the error so you can see it
117 console.error(error, errorInfo);
118};
119
120const router = createBrowserRouter(routes);
121
122function App() {
123 return (
124 <RouterProvider router={router} onError={onError} />
125 );
126}
127```
128
129See also:
130
131- [`<RouterProvider onError>`][routerprovider-onerror]
132
133[entryserver]: ../api/framework-conventions/entry.server.tsx
134[handleError]: ../api/framework-conventions/entry.server.tsx#handleerror
135[entryclient]: ../api/framework-conventions/entry.client.tsx
136[hydratedrouter]: ../api/framework-routers/HydratedRouter
137[routerprovider]: ../api/data-routers/RouterProvider
138[hydratedrouter-onerror]: ../api/framework-routers/HydratedRouter#onError
139[routerprovider-onerror]: ../api/data-routers/RouterProvider#onError