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-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 ", () => { 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 👋

- 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 ErrorBoundary - prop on  + or + - <Route> + errorElement + prop on your route.

" `); @@ -1878,18 +1880,20 @@ describe("createMemoryRouter", () => { 💿 Hey developer 👋

- 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 ErrorBoundary - prop on  + or + - <Route> + errorElement + prop on your route.

" `); @@ -2110,18 +2114,20 @@ describe("createMemoryRouter", () => { 💿 Hey developer 👋

- 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 ErrorBoundary - prop on  + or + - <Route> + errorElement + prop on your route.

" `); @@ -2294,18 +2300,20 @@ describe("createMemoryRouter", () => { 💿 Hey developer 👋

- 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 ErrorBoundary - prop on  + or + - <Route> + errorElement + prop on your route.

" diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx index ba3af48dd1..50d86133a6 100644 --- 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 = ( <>

💿 Hey developer 👋

You can provide a way better UX than this when your app throws errors - by providing your own  - ErrorBoundary prop on  - <Route> + by providing your own ErrorBoundary or{" "} + errorElement prop on your route.

);