Log loader/action errors in dev from default error boundary (#10286)

remix-run · Apr 10, 2023 · 2a3c850 · 2a3c850
1 parent 6f17a30
commit 2a3c850
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 15 deletions.
diff --git a/.changeset/console-log-loader-error.md 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-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
@@ -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
@@ -468,14 +468,18 @@ 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>
+          by providing your own <code style={codeStyles}>ErrorBoundary</code> or{" "}
+          <code style={codeStyles}>errorElement</code> prop on your route.
         </p>
       </>
     );