From b4be13fb0f3bdabe52ba833bbcbb84d824a6e51e Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Wed, 29 Mar 2023 16:48:57 -0400
Subject: [PATCH 1/2] Log loader/action errors in dev from default error
 boundary

---
 .changeset/console-log-loader-error.md | 5 +++++
 packages/react-router/lib/hooks.tsx    | 9 +++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/console-log-loader-error.md

diff --git a/.changeset/console-log-loader-error.md b/.changeset/console-log-loader-error.md
new file mode 100644
index 0000000000..907f28cc76
--- /dev/null
+++ b/.changeset/console-log-loader-error.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Log loader/action errors to the console in dev for easier stack trace evaluation
diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx
index ba3af48dd1..eb16644322 100644
--- a/packages/react-router/lib/hooks.tsx
+++ b/packages/react-router/lib/hooks.tsx
@@ -468,14 +468,19 @@ function DefaultErrorComponent() {
 
   let devInfo = null;
   if (__DEV__) {
+    console.error(
+      "Error handled by React Router default ErrorBoundary:",
+      error
+    );
+
     devInfo = (
       <>
         <p>💿 Hey developer 👋</p>
         <p>
           You can provide a way better UX than this when your app throws errors
           by providing your own&nbsp;
-          <code style={codeStyles}>ErrorBoundary</code> prop on&nbsp;
-          <code style={codeStyles}>&lt;Route&gt;</code>
+          <code style={codeStyles}>ErrorBoundary</code> or{" "}
+          <code style={codeStyles}>errorElement</code> prop on your route.
         </p>
       </>
     );

From 1eaaaf7db37fc278cf6455405d76b8cc37791c71 Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Wed, 29 Mar 2023 17:15:35 -0400
Subject: [PATCH 2/2] Fix tests

---
 .../__tests__/data-static-router-test.tsx     |  1 +
 .../__tests__/data-memory-router-test.tsx     | 32 ++++++++++++-------
 packages/react-router/lib/hooks.tsx           |  3 +-
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/react-router-dom/__tests__/data-static-router-test.tsx b/packages/react-router-dom/__tests__/data-static-router-test.tsx
index 50d2d7af0f..41fe0a8df6 100644
--- a/packages/react-router-dom/__tests__/data-static-router-test.tsx
+++ b/packages/react-router-dom/__tests__/data-static-router-test.tsx
@@ -21,6 +21,7 @@ import {
 
 beforeEach(() => {
   jest.spyOn(console, "warn").mockImplementation(() => {});
+  jest.spyOn(console, "error").mockImplementation(() => {});
 });
 
 describe("A <StaticRouterProvider>", () => {
diff --git a/packages/react-router/__tests__/data-memory-router-test.tsx b/packages/react-router/__tests__/data-memory-router-test.tsx
index f23d7e73bd..b6b9fa4dd2 100644
--- a/packages/react-router/__tests__/data-memory-router-test.tsx
+++ b/packages/react-router/__tests__/data-memory-router-test.tsx
@@ -1761,18 +1761,20 @@ describe("createMemoryRouter", () => {
             💿 Hey developer 👋
           </p>
           <p>
-            You can provide a way better UX than this when your app throws errors by providing your own 
+            You can provide a way better UX than this when your app throws errors by providing your own 
             <code
               style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
             >
               ErrorBoundary
             </code>
-             prop on 
+             or
+             
             <code
               style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
             >
-              &lt;Route&gt;
+              errorElement
             </code>
+             prop on your route.
           </p>
         </div>"
       `);
@@ -1878,18 +1880,20 @@ describe("createMemoryRouter", () => {
             💿 Hey developer 👋
           </p>
           <p>
-            You can provide a way better UX than this when your app throws errors by providing your own 
+            You can provide a way better UX than this when your app throws errors by providing your own 
             <code
               style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
             >
               ErrorBoundary
             </code>
-             prop on 
+             or
+             
             <code
               style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
             >
-              &lt;Route&gt;
+              errorElement
             </code>
+             prop on your route.
           </p>
         </div>"
       `);
@@ -2110,18 +2114,20 @@ describe("createMemoryRouter", () => {
             💿 Hey developer 👋
           </p>
           <p>
-            You can provide a way better UX than this when your app throws errors by providing your own 
+            You can provide a way better UX than this when your app throws errors by providing your own 
             <code
               style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
             >
               ErrorBoundary
             </code>
-             prop on 
+             or
+             
             <code
               style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
             >
-              &lt;Route&gt;
+              errorElement
             </code>
+             prop on your route.
           </p>
         </div>"
       `);
@@ -2294,18 +2300,20 @@ describe("createMemoryRouter", () => {
               💿 Hey developer 👋
             </p>
             <p>
-              You can provide a way better UX than this when your app throws errors by providing your own 
+              You can provide a way better UX than this when your app throws errors by providing your own 
               <code
                 style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
               >
                 ErrorBoundary
               </code>
-               prop on 
+               or
+               
               <code
                 style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
               >
-                &lt;Route&gt;
+                errorElement
               </code>
+               prop on your route.
             </p>
           </div>
         </div>"
diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx
index eb16644322..50d86133a6 100644
--- a/packages/react-router/lib/hooks.tsx
+++ b/packages/react-router/lib/hooks.tsx
@@ -478,8 +478,7 @@ function DefaultErrorComponent() {
         <p>💿 Hey developer 👋</p>
         <p>
           You can provide a way better UX than this when your app throws errors
-          by providing your own&nbsp;
-          <code style={codeStyles}>ErrorBoundary</code> or{" "}
+          by providing your own <code style={codeStyles}>ErrorBoundary</code> or{" "}
           <code style={codeStyles}>errorElement</code> prop on your route.
         </p>
       </>