Skip to content

Commit 2a3c850

Browse files
authored
Log loader/action errors in dev from default error boundary (#10286)
1 parent 6f17a30 commit 2a3c850

File tree

4 files changed

+33
-15
lines changed

4 files changed

+33
-15
lines changed
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"react-router": patch
3+
---
4+
5+
Log loader/action errors to the console in dev for easier stack trace evaluation

packages/react-router-dom/__tests__/data-static-router-test.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121

2222
beforeEach(() => {
2323
jest.spyOn(console, "warn").mockImplementation(() => {});
24+
jest.spyOn(console, "error").mockImplementation(() => {});
2425
});
2526

2627
describe("A <StaticRouterProvider>", () => {

packages/react-router/__tests__/data-memory-router-test.tsx

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1761,18 +1761,20 @@ describe("createMemoryRouter", () => {
17611761
💿 Hey developer 👋
17621762
</p>
17631763
<p>
1764-
You can provide a way better UX than this when your app throws errors by providing your own 
1764+
You can provide a way better UX than this when your app throws errors by providing your own
17651765
<code
17661766
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
17671767
>
17681768
ErrorBoundary
17691769
</code>
1770-
prop on 
1770+
or
1771+
17711772
<code
17721773
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
17731774
>
1774-
&lt;Route&gt;
1775+
errorElement
17751776
</code>
1777+
prop on your route.
17761778
</p>
17771779
</div>"
17781780
`);
@@ -1878,18 +1880,20 @@ describe("createMemoryRouter", () => {
18781880
💿 Hey developer 👋
18791881
</p>
18801882
<p>
1881-
You can provide a way better UX than this when your app throws errors by providing your own 
1883+
You can provide a way better UX than this when your app throws errors by providing your own
18821884
<code
18831885
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
18841886
>
18851887
ErrorBoundary
18861888
</code>
1887-
prop on 
1889+
or
1890+
18881891
<code
18891892
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
18901893
>
1891-
&lt;Route&gt;
1894+
errorElement
18921895
</code>
1896+
prop on your route.
18931897
</p>
18941898
</div>"
18951899
`);
@@ -2110,18 +2114,20 @@ describe("createMemoryRouter", () => {
21102114
💿 Hey developer 👋
21112115
</p>
21122116
<p>
2113-
You can provide a way better UX than this when your app throws errors by providing your own 
2117+
You can provide a way better UX than this when your app throws errors by providing your own
21142118
<code
21152119
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
21162120
>
21172121
ErrorBoundary
21182122
</code>
2119-
prop on 
2123+
or
2124+
21202125
<code
21212126
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
21222127
>
2123-
&lt;Route&gt;
2128+
errorElement
21242129
</code>
2130+
prop on your route.
21252131
</p>
21262132
</div>"
21272133
`);
@@ -2294,18 +2300,20 @@ describe("createMemoryRouter", () => {
22942300
💿 Hey developer 👋
22952301
</p>
22962302
<p>
2297-
You can provide a way better UX than this when your app throws errors by providing your own 
2303+
You can provide a way better UX than this when your app throws errors by providing your own
22982304
<code
22992305
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
23002306
>
23012307
ErrorBoundary
23022308
</code>
2303-
prop on 
2309+
or
2310+
23042311
<code
23052312
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
23062313
>
2307-
&lt;Route&gt;
2314+
errorElement
23082315
</code>
2316+
prop on your route.
23092317
</p>
23102318
</div>
23112319
</div>"

packages/react-router/lib/hooks.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -468,14 +468,18 @@ function DefaultErrorComponent() {
468468

469469
let devInfo = null;
470470
if (__DEV__) {
471+
console.error(
472+
"Error handled by React Router default ErrorBoundary:",
473+
error
474+
);
475+
471476
devInfo = (
472477
<>
473478
<p>💿 Hey developer 👋</p>
474479
<p>
475480
You can provide a way better UX than this when your app throws errors
476-
by providing your own&nbsp;
477-
<code style={codeStyles}>ErrorBoundary</code> prop on&nbsp;
478-
<code style={codeStyles}>&lt;Route&gt;</code>
481+
by providing your own <code style={codeStyles}>ErrorBoundary</code> or{" "}
482+
<code style={codeStyles}>errorElement</code> prop on your route.
479483
</p>
480484
</>
481485
);

0 commit comments

Comments
 (0)