Skip to content

Commit 1787e40

Browse files
authored
fix: Only show dev info to devs (#9962)
1 parent 4640b2a commit 1787e40

File tree

2 files changed

+22
-12
lines changed

2 files changed

+22
-12
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1519,7 +1519,7 @@ describe("<DataMemoryRouter>", () => {
15191519
expect(getHtml(container)).toMatchInlineSnapshot(`
15201520
"<div>
15211521
<h2>
1522-
Unhandled Thrown Error!
1522+
Unexpected Application Error!
15231523
</h2>
15241524
<h3
15251525
style="font-style: italic;"
@@ -1629,7 +1629,7 @@ describe("<DataMemoryRouter>", () => {
16291629
expect(getHtml(container)).toMatchInlineSnapshot(`
16301630
"<div>
16311631
<h2>
1632-
Unhandled Thrown Error!
1632+
Unexpected Application Error!
16331633
</h2>
16341634
<h3
16351635
style="font-style: italic;"
@@ -1874,7 +1874,7 @@ describe("<DataMemoryRouter>", () => {
18741874
expect(getHtml(container)).toMatchInlineSnapshot(`
18751875
"<div>
18761876
<h2>
1877-
Unhandled Thrown Error!
1877+
Unexpected Application Error!
18781878
</h2>
18791879
<h3
18801880
style="font-style: italic;"
@@ -2058,7 +2058,7 @@ describe("<DataMemoryRouter>", () => {
20582058
"<div>
20592059
<div>
20602060
<h2>
2061-
Unhandled Thrown Error!
2061+
Unexpected Application Error!
20622062
</h2>
20632063
<h3
20642064
style="font-style: italic;"

packages/react-router/lib/hooks.tsx

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -463,18 +463,28 @@ function DefaultErrorElement() {
463463
let lightgrey = "rgba(200,200,200, 0.5)";
464464
let preStyles = { padding: "0.5rem", backgroundColor: lightgrey };
465465
let codeStyles = { padding: "2px 4px", backgroundColor: lightgrey };
466+
467+
let devInfo = null;
468+
if (__DEV__) {
469+
devInfo = (
470+
<>
471+
<p>💿 Hey developer 👋</p>
472+
<p>
473+
You can provide a way better UX than this when your app throws errors
474+
by providing your own&nbsp;
475+
<code style={codeStyles}>errorElement</code> props on&nbsp;
476+
<code style={codeStyles}>&lt;Route&gt;</code>
477+
</p>
478+
</>
479+
);
480+
}
481+
466482
return (
467483
<>
468-
<h2>Unhandled Thrown Error!</h2>
484+
<h2>Unexpected Application Error!</h2>
469485
<h3 style={{ fontStyle: "italic" }}>{message}</h3>
470486
{stack ? <pre style={preStyles}>{stack}</pre> : null}
471-
<p>💿 Hey developer 👋</p>
472-
<p>
473-
You can provide a way better UX than this when your app throws errors by
474-
providing your own&nbsp;
475-
<code style={codeStyles}>errorElement</code> props on&nbsp;
476-
<code style={codeStyles}>&lt;Route&gt;</code>
477-
</p>
487+
{devInfo}
478488
</>
479489
);
480490
}

0 commit comments

Comments
 (0)