From 045fae63c54e38cd4f292fb375b6e8d6615253e8 Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Wed, 28 Feb 2024 12:00:25 -0500
Subject: [PATCH] Log route module errors prior to reloading the page

---
 .changeset/log-module-error.md       |  5 +++++
 packages/remix-react/routeModules.ts | 22 +++++++++++++++++-----
 2 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/log-module-error.md

diff --git a/.changeset/log-module-error.md b/.changeset/log-module-error.md
new file mode 100644
index 00000000000..5db9a136451
--- /dev/null
+++ b/.changeset/log-module-error.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Log any errors encountered loading a route module prior to reloading the page
diff --git a/packages/remix-react/routeModules.ts b/packages/remix-react/routeModules.ts
index 7c37854e32d..0867e6ff07f 100644
--- a/packages/remix-react/routeModules.ts
+++ b/packages/remix-react/routeModules.ts
@@ -190,10 +190,21 @@ export async function loadRouteModule(
     routeModulesCache[route.id] = routeModule;
     return routeModule;
   } catch (error: unknown) {
-    // User got caught in the middle of a deploy and the CDN no longer has the
-    // asset we're trying to import! Reload from the server and the user
-    // (should) get the new manifest--unless the developer purged the static
-    // assets, the manifest path, but not the documents 😬
+    // If we can't load the route it's likely one of 2 things:
+    // - User got caught in the middle of a deploy and the CDN no longer has the
+    //   asset we're trying to import! Reload from the server and the user
+    //   (should) get the new manifest--unless the developer purged the static
+    //   assets, the manifest path, but not the documents 😬
+    // - Or, the asset trying to be imported has an error (usually in vite dev
+    //   mode), so the best we can do here is log the error for visibility
+    //   (via `Preserve log`) and reload
+
+    // Log the error so it can be accessed via the `Preserve Log` setting
+    console.error(
+      `Error loading route module \`${route.module}\`, reloading page...`
+    );
+    console.error(error);
+
     if (
       window.__remixContext.isSpaMode &&
       // @ts-expect-error
@@ -203,10 +214,11 @@ export async function loadRouteModule(
       // on dev-time errors since it's a vite compilation error and a reload is
       // just going to fail with the same issue.  Let the UI bubble to the error
       // boundary and let them see the error in the overlay or the dev server log
-      console.error(`Error loading route module \`${route.module}\`:`, error);
       throw error;
     }
+
     window.location.reload();
+
     return new Promise(() => {
       // check out of this hook cause the DJs never gonna re[s]olve this
     });