Set a default error boundry

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>
+  )
+}

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} />

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