Skip to content

Commit 2eb7164

Browse files
brophdawg11brophdawg11
committed
Align to RFC API
1 parent baa7543 commit 2eb7164

File tree

4 files changed

+53
-140
lines changed

4 files changed

+53
-140
lines changed

‎packages/react-router/__tests__/dom/handle-error-test.tsx‎

Lines changed: 41 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -52,15 +52,8 @@ describe(`handleError`, () => {
5252

5353
await act(() => router.navigate("/page"));
5454

55-
expect(spy.mock.calls).toEqual([
56-
[
57-
new Error("loader error!"),
58-
{
59-
location: expect.objectContaining({ pathname: "/page" }),
60-
errorInfo: undefined,
61-
},
62-
],
63-
]);
55+
expect(spy).toHaveBeenCalledWith(new Error("loader error!"));
56+
expect(spy).toHaveBeenCalledTimes(1);
6457
expect(getHtml(container)).toContain("Error");
6558
});
6659

@@ -92,15 +85,8 @@ describe(`handleError`, () => {
9285
}),
9386
);
9487

95-
expect(spy.mock.calls).toEqual([
96-
[
97-
new Error("action error!"),
98-
{
99-
location: expect.objectContaining({ pathname: "/page" }),
100-
errorInfo: undefined,
101-
},
102-
],
103-
]);
88+
expect(spy).toHaveBeenCalledWith(new Error("action error!"));
89+
expect(spy).toHaveBeenCalledTimes(1);
10490
expect(getHtml(container)).toContain("Error");
10591
});
10692

@@ -125,15 +111,8 @@ describe(`handleError`, () => {
125111

126112
await act(() => router.fetch("key", "0", "/fetch"));
127113

128-
expect(spy.mock.calls).toEqual([
129-
[
130-
new Error("loader error!"),
131-
{
132-
location: expect.objectContaining({ pathname: "/" }),
133-
errorInfo: undefined,
134-
},
135-
],
136-
]);
114+
expect(spy).toHaveBeenCalledWith(new Error("loader error!"));
115+
expect(spy).toHaveBeenCalledTimes(1);
137116
expect(getHtml(container)).toContain("Error");
138117
});
139118

@@ -163,15 +142,8 @@ describe(`handleError`, () => {
163142
}),
164143
);
165144

166-
expect(spy.mock.calls).toEqual([
167-
[
168-
new Error("action error!"),
169-
{
170-
location: expect.objectContaining({ pathname: "/" }),
171-
errorInfo: undefined,
172-
},
173-
],
174-
]);
145+
expect(spy).toHaveBeenCalledWith(new Error("action error!"));
146+
expect(spy).toHaveBeenCalledTimes(1);
175147
expect(getHtml(container)).toContain("Error");
176148
});
177149

@@ -197,17 +169,13 @@ describe(`handleError`, () => {
197169

198170
await act(() => router.navigate("/page"));
199171

200-
expect(spy.mock.calls).toEqual([
201-
[
202-
new Error("render error!"),
203-
{
204-
location: expect.objectContaining({ pathname: "/page" }),
205-
errorInfo: expect.objectContaining({
206-
componentStack: expect.any(String),
207-
}),
208-
},
209-
],
210-
]);
172+
expect(spy).toHaveBeenCalledWith(
173+
new Error("render error!"),
174+
expect.objectContaining({
175+
componentStack: expect.any(String),
176+
}),
177+
);
178+
expect(spy).toHaveBeenCalledTimes(1);
211179
expect(getHtml(container)).toContain("Error");
212180
});
213181

@@ -245,14 +213,8 @@ describe(`handleError`, () => {
245213
await act(() => router.navigate("/page"));
246214
await waitFor(() => screen.getByText("Await Error"));
247215

248-
expect(spy.mock.calls).toEqual([
249-
[
250-
new Error("await error!"),
251-
{
252-
location: expect.objectContaining({ pathname: "/page" }),
253-
},
254-
],
255-
]);
216+
expect(spy).toHaveBeenCalledWith(new Error("await error!"));
217+
expect(spy).toHaveBeenCalledTimes(1);
256218
expect(getHtml(container)).toContain("Await Error");
257219
});
258220

@@ -296,17 +258,13 @@ describe(`handleError`, () => {
296258
await act(() => router.navigate("/page"));
297259
await waitFor(() => screen.getByText("Await Error"));
298260

299-
expect(spy.mock.calls).toEqual([
300-
[
301-
new Error("await error!"),
302-
{
303-
location: expect.objectContaining({ pathname: "/page" }),
304-
errorInfo: expect.objectContaining({
305-
componentStack: expect.any(String),
306-
}),
307-
},
308-
],
309-
]);
261+
expect(spy).toHaveBeenCalledWith(
262+
new Error("await error!"),
263+
expect.objectContaining({
264+
componentStack: expect.any(String),
265+
}),
266+
);
267+
expect(spy).toHaveBeenCalledTimes(1);
310268
expect(getHtml(container)).toContain("Await Error");
311269
});
312270

@@ -353,23 +311,14 @@ describe(`handleError`, () => {
353311
await act(() => router.navigate("/page"));
354312
await waitFor(() => screen.getByText("Route Error"));
355313

356-
expect(spy.mock.calls).toEqual([
357-
[
358-
new Error("await error!"),
359-
{
360-
location: expect.objectContaining({ pathname: "/page" }),
361-
},
362-
],
363-
[
364-
new Error("errorElement error!"),
365-
{
366-
location: expect.objectContaining({ pathname: "/page" }),
367-
errorInfo: expect.objectContaining({
368-
componentStack: expect.any(String),
369-
}),
370-
},
371-
],
372-
]);
314+
expect(spy).toHaveBeenCalledWith(new Error("await error!"));
315+
expect(spy).toHaveBeenCalledWith(
316+
new Error("errorElement error!"),
317+
expect.objectContaining({
318+
componentStack: expect.any(String),
319+
}),
320+
);
321+
expect(spy).toHaveBeenCalledTimes(2);
373322
expect(getHtml(container)).toContain("Route Error");
374323
});
375324

@@ -411,15 +360,8 @@ describe(`handleError`, () => {
411360

412361
await act(() => router.navigate("/page"));
413362

414-
expect(spy.mock.calls).toEqual([
415-
[
416-
new Error("loader error!"),
417-
{
418-
location: expect.objectContaining({ pathname: "/page" }),
419-
errorInfo: undefined,
420-
},
421-
],
422-
]);
363+
expect(spy).toHaveBeenCalledWith(new Error("loader error!"));
364+
expect(spy).toHaveBeenCalledTimes(1);
423365
expect(getHtml(container)).toContain("Error");
424366

425367
// Doesn't re-call on a fetcher update from a rendered error boundary
@@ -465,17 +407,13 @@ describe(`handleError`, () => {
465407

466408
await act(() => router.navigate("/page"));
467409

468-
expect(spy.mock.calls).toEqual([
469-
[
470-
new Error("render error!"),
471-
{
472-
location: expect.objectContaining({ pathname: "/page" }),
473-
errorInfo: expect.objectContaining({
474-
componentStack: expect.any(String),
475-
}),
476-
},
477-
],
478-
]);
410+
expect(spy).toHaveBeenCalledWith(
411+
new Error("render error!"),
412+
expect.objectContaining({
413+
componentStack: expect.any(String),
414+
}),
415+
);
416+
expect(spy).toHaveBeenCalledTimes(1);
479417
expect(getHtml(container)).toContain("Error");
480418

481419
// Doesn't re-call on a fetcher update from a rendered error boundary

‎packages/react-router/lib/components.tsx‎

Lines changed: 8 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -250,13 +250,7 @@ class Deferred<T> {
250250
* and rendering errors via `componentDidCatch`
251251
*/
252252
export interface unstable_ClientHandleErrorFunction {
253-
(
254-
error: unknown,
255-
info: {
256-
location: Location;
257-
errorInfo?: React.ErrorInfo;
258-
},
259-
): void;
253+
(error: unknown, errorInfo?: React.ErrorInfo): void;
260254
}
261255

262256
/**
@@ -288,12 +282,9 @@ export interface RouterProviderProps {
288282
* and is only present for render errors.
289283
*
290284
* ```tsx
291-
* <RouterProvider unstable_handleError=(error, { location, errorInfo }) => {
292-
* console.log(
293-
* `Error at location ${location.pathname}`,
294-
* error,
295-
* errorInfo
296-
* );
285+
* <RouterProvider unstable_handleError=(error, errorInfo) => {
286+
* console.error(error, errorInfo);
287+
* reportToErrorService(error, errorInfo);
297288
* }} />
298289
* ```
299290
*/
@@ -356,7 +347,7 @@ export function RouterProvider({
356347
if (newState.errors && unstable_handleError) {
357348
Object.entries(newState.errors).forEach(([routeId, error]) => {
358349
if (prevState.errors?.[routeId] !== error) {
359-
unstable_handleError(error, { location: newState.location });
350+
unstable_handleError(error);
360351
}
361352
});
362353
}
@@ -1402,14 +1393,10 @@ export function Await<Resolve>({
14021393
resolve,
14031394
}: AwaitProps<Resolve>) {
14041395
let dataRouterContext = React.useContext(DataRouterContext);
1405-
// Use this instead of useLocation() so that Await can still be used standalone
1406-
// and not inside of a <Router>
1407-
let dataRouterStateContext = React.useContext(DataRouterStateContext);
14081396
return (
14091397
<AwaitErrorBoundary
14101398
resolve={resolve}
14111399
errorElement={errorElement}
1412-
location={dataRouterStateContext?.location}
14131400
unstable_handleError={dataRouterContext?.unstable_handleError}
14141401
>
14151402
<ResolveAwait>{children}</ResolveAwait>
@@ -1420,7 +1407,6 @@ export function Await<Resolve>({
14201407
type AwaitErrorBoundaryProps = React.PropsWithChildren<{
14211408
errorElement?: React.ReactNode;
14221409
resolve: TrackedPromise | any;
1423-
location?: Location;
14241410
unstable_handleError?: unstable_ClientHandleErrorFunction;
14251411
}>;
14261412

@@ -1448,12 +1434,9 @@ class AwaitErrorBoundary extends React.Component<
14481434
}
14491435

14501436
componentDidCatch(error: any, errorInfo: React.ErrorInfo) {
1451-
if (this.props.unstable_handleError && this.props.location) {
1437+
if (this.props.unstable_handleError) {
14521438
// Log render errors
1453-
this.props.unstable_handleError(error, {
1454-
location: this.props.location,
1455-
errorInfo,
1456-
});
1439+
this.props.unstable_handleError(error, errorInfo);
14571440
} else {
14581441
console.error(
14591442
"<Await> caught the following error during render",
@@ -1500,9 +1483,7 @@ class AwaitErrorBoundary extends React.Component<
15001483
Object.defineProperty(resolve, "_data", { get: () => data }),
15011484
(error: any) => {
15021485
// Log promise rejections
1503-
this.props.unstable_handleError?.(error, {
1504-
location: this.props.location,
1505-
});
1486+
this.props.unstable_handleError?.(error);
15061487
Object.defineProperty(resolve, "_error", { get: () => error });
15071488
},
15081489
);

‎packages/react-router/lib/dom-export/hydrated-router.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -234,12 +234,9 @@ export interface HydratedRouterProps {
234234
* and is only present for render errors.
235235
*
236236
* ```tsx
237-
* <HydratedRouter unstable_handleError={(error, { location, errorInfo }) => {
238-
* console.log(
239-
* `Error at location ${location.pathname}`,
240-
* error,
241-
* errorInfo
242-
* );
237+
* <HydratedRouter unstable_handleError={(error, errorInfo) => {
238+
* console.error(error, errorInfo);
239+
* reportToErrorService(error, errorInfo);
243240
* }} />
244241
* ```
245242
*/

‎packages/react-router/lib/hooks.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -991,10 +991,7 @@ export class RenderErrorBoundary extends React.Component<
991991

992992
componentDidCatch(error: any, errorInfo: React.ErrorInfo) {
993993
if (this.props.unstable_handleError) {
994-
this.props.unstable_handleError(error, {
995-
location: this.props.location,
996-
errorInfo,
997-
});
994+
this.props.unstable_handleError(error, errorInfo);
998995
} else {
999996
console.error(
1000997
"React Router caught the following error during render",

0 commit comments

Comments
 (0)