From 1bfef24a1a7d1781b9f6072dd2c67c15f19e569c Mon Sep 17 00:00:00 2001
From: Mihovil Ilakovac <mihovil@ilakovac.com>
Date: Wed, 11 Sep 2024 15:05:25 +0200
Subject: [PATCH] Set a default error boundry

---
 .../src/components/DefaultRootErrorBoundary.tsx     | 13 +++++++++++++
 .../Generator/templates/react-app/src/router.tsx    |  4 +++-
 .../test-outputs/waspBuild-golden/files.manifest    |  1 +
 .../waspBuild/.wasp/build/.waspchecksums            |  9 ++++++++-
 .../src/components/DefaultRootErrorBoundary.tsx     | 13 +++++++++++++
 .../waspBuild/.wasp/build/web-app/src/router.tsx    |  4 +++-
 .../test-outputs/waspCompile-golden/files.manifest  |  1 +
 .../waspCompile/.wasp/out/.waspchecksums            |  9 ++++++++-
 .../src/components/DefaultRootErrorBoundary.tsx     | 13 +++++++++++++
 .../waspCompile/.wasp/out/web-app/src/router.tsx    |  4 +++-
 .../waspComplexTest-golden/files.manifest           |  1 +
 .../waspComplexTest/.wasp/out/.waspchecksums        |  9 ++++++++-
 .../src/components/DefaultRootErrorBoundary.tsx     | 13 +++++++++++++
 .../.wasp/out/web-app/src/router.tsx                |  4 +++-
 .../test-outputs/waspJob-golden/files.manifest      |  1 +
 .../waspJob-golden/waspJob/.wasp/out/.waspchecksums |  9 ++++++++-
 .../src/components/DefaultRootErrorBoundary.tsx     | 13 +++++++++++++
 .../waspJob/.wasp/out/web-app/src/router.tsx        |  4 +++-
 .../test-outputs/waspMigrate-golden/files.manifest  |  1 +
 .../waspMigrate/.wasp/out/.waspchecksums            |  9 ++++++++-
 .../src/components/DefaultRootErrorBoundary.tsx     | 13 +++++++++++++
 .../waspMigrate/.wasp/out/web-app/src/router.tsx    |  4 +++-
 waspc/src/Wasp/Generator/WebAppGenerator.hs         |  1 +
 23 files changed, 142 insertions(+), 11 deletions(-)
 create mode 100644 waspc/data/Generator/templates/react-app/src/components/DefaultRootErrorBoundary.tsx
 create mode 100644 waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/components/DefaultRootErrorBoundary.tsx
 create mode 100644 waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
 create mode 100644 waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
 create mode 100644 waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
 create mode 100644 waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx

diff --git a/waspc/data/Generator/templates/react-app/src/components/DefaultRootErrorBoundary.tsx b/waspc/data/Generator/templates/react-app/src/components/DefaultRootErrorBoundary.tsx
new file mode 100644
index 0000000000..7af24e15d6
--- /dev/null
+++ b/waspc/data/Generator/templates/react-app/src/components/DefaultRootErrorBoundary.tsx
@@ -0,0 +1,13 @@
+import { useRouteError } from 'react-router-dom'
+
+import { FullPageWrapper } from './FullPageWrapper'
+
+export function DefaultRootErrorBoundary() {
+  const error = useRouteError()
+  console.error(error)
+  return (
+    <FullPageWrapper>
+      <div>There was an error rendering this page. Check the browser console for more information.</div>
+    </FullPageWrapper>
+  )
+}
diff --git a/waspc/data/Generator/templates/react-app/src/router.tsx b/waspc/data/Generator/templates/react-app/src/router.tsx
index da35e8a231..010a9d31a3 100644
--- a/waspc/data/Generator/templates/react-app/src/router.tsx
+++ b/waspc/data/Generator/templates/react-app/src/router.tsx
@@ -17,6 +17,8 @@ import createAuthRequiredPage from "./auth/pages/createAuthRequiredPage"
 import { OAuthCallbackPage } from "./auth/pages/OAuthCallback"
 {=/ isExternalAuthEnabled =}
 
+import { DefaultRootErrorBoundary } from './components/DefaultRootErrorBoundary'
+
 import { routes } from 'wasp/client/router'
 
 export const routeNameToRouteComponent = {
@@ -45,11 +47,11 @@ const browserRouter = createBrowserRouter([{
   {=# rootComponent.isDefined =}
   element: <{= rootComponent.importIdentifier =} />,
   {=/ rootComponent.isDefined =}
+  ErrorBoundary: DefaultRootErrorBoundary,
   children: [
     ...waspDefinedRoutes,
     ...userDefinedRoutes,
   ],
 }])
 
-
 export const router = <RouterProvider router={browserRouter} />
diff --git a/waspc/e2e-test/test-outputs/waspBuild-golden/files.manifest b/waspc/e2e-test/test-outputs/waspBuild-golden/files.manifest
index c9a5e57b6c..1ef46f2f24 100644
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/files.manifest
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/files.manifest
@@ -219,6 +219,7 @@ waspBuild/.wasp/build/web-app/public/.gitkeep
 waspBuild/.wasp/build/web-app/public/favicon.ico
 waspBuild/.wasp/build/web-app/public/manifest.json
 waspBuild/.wasp/build/web-app/scripts/validate-env.mjs
+waspBuild/.wasp/build/web-app/src/components/DefaultRootErrorBoundary.tsx
 waspBuild/.wasp/build/web-app/src/components/FullPageWrapper.tsx
 waspBuild/.wasp/build/web-app/src/components/Loader.module.css
 waspBuild/.wasp/build/web-app/src/components/Loader.tsx
diff --git a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums
index 61d0cd4936..7466f52b48 100644
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums
@@ -566,6 +566,13 @@
         ],
         "a9a3a7eb6bc3ead49d8e3850a70737c93c789098beb3b40196bf145fd38893cd"
     ],
+    [
+        [
+            "file",
+            "web-app/src/components/DefaultRootErrorBoundary.tsx"
+        ],
+        "4a141a28ca7aed9daddd75c156f7bae5eec50f3e5a85b6a43a28fa2648f34c44"
+    ],
     [
         [
             "file",
@@ -613,7 +620,7 @@
             "file",
             "web-app/src/router.tsx"
         ],
-        "7228b4f5e531208f4049a6076597c6cfa4ebf2bef89509ff58833c1f4a01ccbe"
+        "72f880dba47672ec9fb112a8b88cc8d831458cccddcc891b853a6dc9809a5752"
     ],
     [
         [
diff --git a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/components/DefaultRootErrorBoundary.tsx b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/components/DefaultRootErrorBoundary.tsx
new file mode 100644
index 0000000000..7af24e15d6
--- /dev/null
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/components/DefaultRootErrorBoundary.tsx
@@ -0,0 +1,13 @@
+import { useRouteError } from 'react-router-dom'
+
+import { FullPageWrapper } from './FullPageWrapper'
+
+export function DefaultRootErrorBoundary() {
+  const error = useRouteError()
+  console.error(error)
+  return (
+    <FullPageWrapper>
+      <div>There was an error rendering this page. Check the browser console for more information.</div>
+    </FullPageWrapper>
+  )
+}
diff --git a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/router.tsx b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/router.tsx
index bb1ec0a88f..9f1e1b46b2 100644
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/router.tsx
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/router.tsx
@@ -5,6 +5,8 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { MainPage } from '../../../../src/MainPage'
 
 
+import { DefaultRootErrorBoundary } from './components/DefaultRootErrorBoundary'
+
 import { routes } from 'wasp/client/router'
 
 export const routeNameToRouteComponent = {
@@ -22,11 +24,11 @@ const userDefinedRoutes = Object.entries(routes).map(([routeKey, route]) => {
 
 const browserRouter = createBrowserRouter([{
   path: '/',
+  ErrorBoundary: DefaultRootErrorBoundary,
   children: [
     ...waspDefinedRoutes,
     ...userDefinedRoutes,
   ],
 }])
 
-
 export const router = <RouterProvider router={browserRouter} />
diff --git a/waspc/e2e-test/test-outputs/waspCompile-golden/files.manifest b/waspc/e2e-test/test-outputs/waspCompile-golden/files.manifest
index ec7c412b7c..be6525f517 100644
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/files.manifest
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/files.manifest
@@ -216,6 +216,7 @@ waspCompile/.wasp/out/web-app/public/.gitkeep
 waspCompile/.wasp/out/web-app/public/favicon.ico
 waspCompile/.wasp/out/web-app/public/manifest.json
 waspCompile/.wasp/out/web-app/scripts/validate-env.mjs
+waspCompile/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
 waspCompile/.wasp/out/web-app/src/components/FullPageWrapper.tsx
 waspCompile/.wasp/out/web-app/src/components/Loader.module.css
 waspCompile/.wasp/out/web-app/src/components/Loader.tsx
diff --git a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums
index c0d42e94c4..fdce9dd08f 100644
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums
@@ -580,6 +580,13 @@
         ],
         "a9a3a7eb6bc3ead49d8e3850a70737c93c789098beb3b40196bf145fd38893cd"
     ],
+    [
+        [
+            "file",
+            "web-app/src/components/DefaultRootErrorBoundary.tsx"
+        ],
+        "4a141a28ca7aed9daddd75c156f7bae5eec50f3e5a85b6a43a28fa2648f34c44"
+    ],
     [
         [
             "file",
@@ -627,7 +634,7 @@
             "file",
             "web-app/src/router.tsx"
         ],
-        "7228b4f5e531208f4049a6076597c6cfa4ebf2bef89509ff58833c1f4a01ccbe"
+        "72f880dba47672ec9fb112a8b88cc8d831458cccddcc891b853a6dc9809a5752"
     ],
     [
         [
diff --git a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
new file mode 100644
index 0000000000..7af24e15d6
--- /dev/null
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
@@ -0,0 +1,13 @@
+import { useRouteError } from 'react-router-dom'
+
+import { FullPageWrapper } from './FullPageWrapper'
+
+export function DefaultRootErrorBoundary() {
+  const error = useRouteError()
+  console.error(error)
+  return (
+    <FullPageWrapper>
+      <div>There was an error rendering this page. Check the browser console for more information.</div>
+    </FullPageWrapper>
+  )
+}
diff --git a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/router.tsx b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/router.tsx
index bb1ec0a88f..9f1e1b46b2 100644
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/router.tsx
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/router.tsx
@@ -5,6 +5,8 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { MainPage } from '../../../../src/MainPage'
 
 
+import { DefaultRootErrorBoundary } from './components/DefaultRootErrorBoundary'
+
 import { routes } from 'wasp/client/router'
 
 export const routeNameToRouteComponent = {
@@ -22,11 +24,11 @@ const userDefinedRoutes = Object.entries(routes).map(([routeKey, route]) => {
 
 const browserRouter = createBrowserRouter([{
   path: '/',
+  ErrorBoundary: DefaultRootErrorBoundary,
   children: [
     ...waspDefinedRoutes,
     ...userDefinedRoutes,
   ],
 }])
 
-
 export const router = <RouterProvider router={browserRouter} />
diff --git a/waspc/e2e-test/test-outputs/waspComplexTest-golden/files.manifest b/waspc/e2e-test/test-outputs/waspComplexTest-golden/files.manifest
index 6f80170dcd..022dd0bf88 100644
--- a/waspc/e2e-test/test-outputs/waspComplexTest-golden/files.manifest
+++ b/waspc/e2e-test/test-outputs/waspComplexTest-golden/files.manifest
@@ -508,6 +508,7 @@ waspComplexTest/.wasp/out/web-app/public/manifest.json
 waspComplexTest/.wasp/out/web-app/scripts/validate-env.mjs
 waspComplexTest/.wasp/out/web-app/src/auth/pages/OAuthCallback.tsx
 waspComplexTest/.wasp/out/web-app/src/auth/pages/createAuthRequiredPage.jsx
+waspComplexTest/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
 waspComplexTest/.wasp/out/web-app/src/components/FullPageWrapper.tsx
 waspComplexTest/.wasp/out/web-app/src/components/Loader.module.css
 waspComplexTest/.wasp/out/web-app/src/components/Loader.tsx
diff --git a/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/.waspchecksums b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/.waspchecksums
index 3a2f313b1b..b9e6d55430 100644
--- a/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/.waspchecksums
@@ -1224,6 +1224,13 @@
         ],
         "be2f872a6465690dec32a0d2a0c3b15d941846cc0059a9ec13d09650daccda7f"
     ],
+    [
+        [
+            "file",
+            "web-app/src/components/DefaultRootErrorBoundary.tsx"
+        ],
+        "4a141a28ca7aed9daddd75c156f7bae5eec50f3e5a85b6a43a28fa2648f34c44"
+    ],
     [
         [
             "file",
@@ -1271,7 +1278,7 @@
             "file",
             "web-app/src/router.tsx"
         ],
-        "9687e7af18a16abbde9b12548a9ede38a8dcc0d8d0872aeb951d8171b6eb20b2"
+        "8160ffecec82dde31d889825cf0a2d605e2b729be555c650b8accca2252ed613"
     ],
     [
         [
diff --git a/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
new file mode 100644
index 0000000000..7af24e15d6
--- /dev/null
+++ b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
@@ -0,0 +1,13 @@
+import { useRouteError } from 'react-router-dom'
+
+import { FullPageWrapper } from './FullPageWrapper'
+
+export function DefaultRootErrorBoundary() {
+  const error = useRouteError()
+  console.error(error)
+  return (
+    <FullPageWrapper>
+      <div>There was an error rendering this page. Check the browser console for more information.</div>
+    </FullPageWrapper>
+  )
+}
diff --git a/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/router.tsx b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/router.tsx
index c66dc4cd21..820e47b75f 100644
--- a/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/router.tsx
+++ b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/router.tsx
@@ -8,6 +8,8 @@ import { MainPage } from '../../../../src/MainPage'
 
 import { OAuthCallbackPage } from "./auth/pages/OAuthCallback"
 
+import { DefaultRootErrorBoundary } from './components/DefaultRootErrorBoundary'
+
 import { routes } from 'wasp/client/router'
 
 export const routeNameToRouteComponent = {
@@ -30,11 +32,11 @@ const userDefinedRoutes = Object.entries(routes).map(([routeKey, route]) => {
 const browserRouter = createBrowserRouter([{
   path: '/',
   element: <App />,
+  ErrorBoundary: DefaultRootErrorBoundary,
   children: [
     ...waspDefinedRoutes,
     ...userDefinedRoutes,
   ],
 }])
 
-
 export const router = <RouterProvider router={browserRouter} />
diff --git a/waspc/e2e-test/test-outputs/waspJob-golden/files.manifest b/waspc/e2e-test/test-outputs/waspJob-golden/files.manifest
index 414cb3516b..7f7ab93dbc 100644
--- a/waspc/e2e-test/test-outputs/waspJob-golden/files.manifest
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/files.manifest
@@ -251,6 +251,7 @@ waspJob/.wasp/out/web-app/public/.gitkeep
 waspJob/.wasp/out/web-app/public/favicon.ico
 waspJob/.wasp/out/web-app/public/manifest.json
 waspJob/.wasp/out/web-app/scripts/validate-env.mjs
+waspJob/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
 waspJob/.wasp/out/web-app/src/components/FullPageWrapper.tsx
 waspJob/.wasp/out/web-app/src/components/Loader.module.css
 waspJob/.wasp/out/web-app/src/components/Loader.tsx
diff --git a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums
index 1f0bd89449..37e2f34825 100644
--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums
@@ -650,6 +650,13 @@
         ],
         "a9a3a7eb6bc3ead49d8e3850a70737c93c789098beb3b40196bf145fd38893cd"
     ],
+    [
+        [
+            "file",
+            "web-app/src/components/DefaultRootErrorBoundary.tsx"
+        ],
+        "4a141a28ca7aed9daddd75c156f7bae5eec50f3e5a85b6a43a28fa2648f34c44"
+    ],
     [
         [
             "file",
@@ -697,7 +704,7 @@
             "file",
             "web-app/src/router.tsx"
         ],
-        "7228b4f5e531208f4049a6076597c6cfa4ebf2bef89509ff58833c1f4a01ccbe"
+        "72f880dba47672ec9fb112a8b88cc8d831458cccddcc891b853a6dc9809a5752"
     ],
     [
         [
diff --git a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
new file mode 100644
index 0000000000..7af24e15d6
--- /dev/null
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
@@ -0,0 +1,13 @@
+import { useRouteError } from 'react-router-dom'
+
+import { FullPageWrapper } from './FullPageWrapper'
+
+export function DefaultRootErrorBoundary() {
+  const error = useRouteError()
+  console.error(error)
+  return (
+    <FullPageWrapper>
+      <div>There was an error rendering this page. Check the browser console for more information.</div>
+    </FullPageWrapper>
+  )
+}
diff --git a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/router.tsx b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/router.tsx
index bb1ec0a88f..9f1e1b46b2 100644
--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/router.tsx
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/router.tsx
@@ -5,6 +5,8 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { MainPage } from '../../../../src/MainPage'
 
 
+import { DefaultRootErrorBoundary } from './components/DefaultRootErrorBoundary'
+
 import { routes } from 'wasp/client/router'
 
 export const routeNameToRouteComponent = {
@@ -22,11 +24,11 @@ const userDefinedRoutes = Object.entries(routes).map(([routeKey, route]) => {
 
 const browserRouter = createBrowserRouter([{
   path: '/',
+  ErrorBoundary: DefaultRootErrorBoundary,
   children: [
     ...waspDefinedRoutes,
     ...userDefinedRoutes,
   ],
 }])
 
-
 export const router = <RouterProvider router={browserRouter} />
diff --git a/waspc/e2e-test/test-outputs/waspMigrate-golden/files.manifest b/waspc/e2e-test/test-outputs/waspMigrate-golden/files.manifest
index d13ce87b9f..5cd0312ecc 100644
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/files.manifest
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/files.manifest
@@ -220,6 +220,7 @@ waspMigrate/.wasp/out/web-app/public/.gitkeep
 waspMigrate/.wasp/out/web-app/public/favicon.ico
 waspMigrate/.wasp/out/web-app/public/manifest.json
 waspMigrate/.wasp/out/web-app/scripts/validate-env.mjs
+waspMigrate/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
 waspMigrate/.wasp/out/web-app/src/components/FullPageWrapper.tsx
 waspMigrate/.wasp/out/web-app/src/components/Loader.module.css
 waspMigrate/.wasp/out/web-app/src/components/Loader.tsx
diff --git a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums
index 556d0e0823..d413cb67b7 100644
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums
@@ -580,6 +580,13 @@
         ],
         "a9a3a7eb6bc3ead49d8e3850a70737c93c789098beb3b40196bf145fd38893cd"
     ],
+    [
+        [
+            "file",
+            "web-app/src/components/DefaultRootErrorBoundary.tsx"
+        ],
+        "4a141a28ca7aed9daddd75c156f7bae5eec50f3e5a85b6a43a28fa2648f34c44"
+    ],
     [
         [
             "file",
@@ -627,7 +634,7 @@
             "file",
             "web-app/src/router.tsx"
         ],
-        "7228b4f5e531208f4049a6076597c6cfa4ebf2bef89509ff58833c1f4a01ccbe"
+        "72f880dba47672ec9fb112a8b88cc8d831458cccddcc891b853a6dc9809a5752"
     ],
     [
         [
diff --git a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
new file mode 100644
index 0000000000..7af24e15d6
--- /dev/null
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/components/DefaultRootErrorBoundary.tsx
@@ -0,0 +1,13 @@
+import { useRouteError } from 'react-router-dom'
+
+import { FullPageWrapper } from './FullPageWrapper'
+
+export function DefaultRootErrorBoundary() {
+  const error = useRouteError()
+  console.error(error)
+  return (
+    <FullPageWrapper>
+      <div>There was an error rendering this page. Check the browser console for more information.</div>
+    </FullPageWrapper>
+  )
+}
diff --git a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/router.tsx b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/router.tsx
index bb1ec0a88f..9f1e1b46b2 100644
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/router.tsx
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/router.tsx
@@ -5,6 +5,8 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { MainPage } from '../../../../src/MainPage'
 
 
+import { DefaultRootErrorBoundary } from './components/DefaultRootErrorBoundary'
+
 import { routes } from 'wasp/client/router'
 
 export const routeNameToRouteComponent = {
@@ -22,11 +24,11 @@ const userDefinedRoutes = Object.entries(routes).map(([routeKey, route]) => {
 
 const browserRouter = createBrowserRouter([{
   path: '/',
+  ErrorBoundary: DefaultRootErrorBoundary,
   children: [
     ...waspDefinedRoutes,
     ...userDefinedRoutes,
   ],
 }])
 
-
 export const router = <RouterProvider router={browserRouter} />
diff --git a/waspc/src/Wasp/Generator/WebAppGenerator.hs b/waspc/src/Wasp/Generator/WebAppGenerator.hs
index e7365c6504..8eac159814 100644
--- a/waspc/src/Wasp/Generator/WebAppGenerator.hs
+++ b/waspc/src/Wasp/Generator/WebAppGenerator.hs
@@ -198,6 +198,7 @@ genSrcDir spec =
       genFileCopy [relfile|components/Loader.tsx|],
       genFileCopy [relfile|components/Loader.module.css|],
       genFileCopy [relfile|components/FullPageWrapper.tsx|],
+      genFileCopy [relfile|components/DefaultRootErrorBoundary.tsx|],
       getIndexTs spec
     ]
     <++> genAuth spec