UNPKG

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