Add error message to boundary (#822)

* Add error message to boundary

* Remove console warning in ErrorAlert component

Removed console warning for error messages.

---------

Co-authored-by: Marcel Panse <marcel.panse@gmail.com>

Author: greg19

frontend/src/App.tsx

@@ -67,7 +67,7 @@ function App() {
         <>
           <Analytics />
           <Header />
-          <ErrorBoundary fallback={<ErrorAlert />}>
+          <ErrorBoundary FallbackComponent={ErrorAlert}>
             <Suspense fallback={<Spinner size="lg" overlay />}>
               <Outlet />
             </Suspense>
@@ -99,7 +99,7 @@ function App() {
   }
 
   return (
-    <ErrorBoundary fallback={<ErrorAlert />}>
+    <ErrorBoundary FallbackComponent={ErrorAlert}>
       <DialogContext.Provider value={dialogContextValue}>
         <Toaster />
         <RouterProvider router={router} />

frontend/src/components/ErrorAlert.tsx

@@ -1,10 +1,14 @@
 import { useTranslation } from 'react-i18next'
 import { Alert, AlertDescription, AlertTitle } from './ui/alert'
 
-export default function ErrorAlert() {
+interface Props {
+  error?: Error
+}
+
+export default function ErrorAlert({ error }: Props) {
   const { t } = useTranslation('common')
   return (
-    <Alert className="mx-auto mt-12 max-w-lg">
+    <Alert className="mt-12 mx-auto max-w-xl">
       <AlertTitle className="text-lg">{t('error')}</AlertTitle>
       <AlertDescription>
         <p>Refresh the page to try again.</p>
@@ -15,6 +19,12 @@ export default function ErrorAlert() {
           </a>
           .
         </p>
+        {error !== undefined && (
+          <p>
+            Please include the following error message:
+            <span className="block font-mono border-1 border-neutral-700 p-1 rounded mt-1">{error.message}</span>
+          </p>
+        )}
       </AlertDescription>
     </Alert>
   )