WIP

Author: peterlgh7

packages/admin/dashboard/src/components/utilities/error-boundary/error-boundary.tsx

@@ -11,13 +11,21 @@ export const ErrorBoundary = () => {
   const { t } = useTranslation()
 
   let code: number | null = null
+  let errorMessage: string | null = null
+
+  console.error(error)
 
   if (isFetchError(error)) {
     if (error.status === 401) {
       return <Navigate to="/login" state={{ from: location }} replace />
     }
 
     code = error.status ?? null
+    // Extract the actual error message from the FetchError
+    errorMessage = error.message || null
+  } else if (error instanceof Error) {
+    // For other Error types, use the error message
+    errorMessage = error.message
   }
 
   /**
@@ -26,32 +34,48 @@ export const ErrorBoundary = () => {
    * react-router-dom will sometimes swallow the error,
    * so this ensures that we always log it.
    */
-  if (process.env.NODE_ENV === "development") {
-    console.error(error)
-  }
+  console.error(error)
 
   let title: string
   let message: string
 
   switch (code) {
     case 400:
       title = t("errorBoundary.badRequestTitle")
-      message = t("errorBoundary.badRequestMessage")
+      message = errorMessage || t("errorBoundary.badRequestMessage")
       break
     case 404:
       title = t("errorBoundary.notFoundTitle")
-      message = t("errorBoundary.notFoundMessage")
+      message = errorMessage || t("errorBoundary.notFoundMessage")
       break
     case 500:
       title = t("errorBoundary.internalServerErrorTitle")
-      message = t("errorBoundary.internalServerErrorMessage")
+      message = errorMessage || t("errorBoundary.internalServerErrorMessage")
       break
     default:
       title = t("errorBoundary.defaultTitle")
-      message = t("errorBoundary.defaultMessage")
+      message = errorMessage || t("errorBoundary.defaultMessage")
       break
   }
 
+  // Serialize error for display in development
+  const errorDetails =
+    process.env.NODE_ENV === "development"
+      ? JSON.stringify(
+          error instanceof Error
+            ? {
+                name: error.name,
+                message: error.message,
+                stack: error.stack,
+              }
+            : typeof error === "object" && error !== null
+            ? error
+            : String(error),
+          null,
+          2
+        )
+      : null
+
   return (
     <div className="flex size-full min-h-[calc(100vh-57px-24px)] items-center justify-center">
       <div className="flex flex-col gap-y-6">
@@ -67,6 +91,16 @@ export const ErrorBoundary = () => {
             >
               {message}
             </Text>
+            {errorDetails && (
+              <details className="mt-4 max-w-md">
+                <summary className="text-ui-fg-muted cursor-pointer text-xs">
+                  Error details
+                </summary>
+                <pre className="bg-ui-bg-subtle mt-2 overflow-auto rounded p-2 text-xs">
+                  {errorDetails}
+                </pre>
+              </details>
+            )}
           </div>
         </div>
       </div>

packages/admin/dashboard/src/i18n/translations/en.json

@@ -358,7 +358,7 @@
     "internalServerErrorTitle": "500 - Internal server error",
     "internalServerErrorMessage": "An unexpected error occurred on the server. Please try again later.",
     "defaultTitle": "An error occurred",
-    "defaultMessage": "An unexpected error occurred while rendering this page.",
+    "defaultMessage": "An unexpected error occurred while rendering the page.",
     "noMatchMessage": "The page you are looking for does not exist.",
     "backToDashboard": "Back to dashboard"
   },