[UI] Display error information in boundary (#12403)

* Display error information in boundary

* Fix SecurityContext

src/frontend/lib/components/Boundary.tsx

@@ -1,13 +1,15 @@
 import { t } from '@lingui/core/macro';
 import { Alert, Stack, Text } from '@mantine/core';
 import { ErrorBoundary, type FallbackRender } from '@sentry/react';
-import { IconExclamationCircle } from '@tabler/icons-react';
+import { IconExclamationCircle, IconInfoCircle } from '@tabler/icons-react';
-import { type ReactNode, useCallback } from 'react';
+import { type ReactNode, useCallback, useState } from 'react';
 
 export function DefaultFallback({
-  title
+  title,
-}: Readonly<{ title: string }>): ReactNode {
+  error
+}: Readonly<{ title: string; error: string | null }>): ReactNode {
   return (
+    <>
       <Alert
         color='red'
         icon={<IconExclamationCircle />}
@@ -15,13 +17,19 @@ export function DefaultFallback({
       >
         <Stack gap='xs'>
           <Text size='sm'>
-          {t`An error occurred while rendering this component. Refer to the console for more information.`}
+            {t`An error occurred while rendering this component.`}
           </Text>
           <Text size='sm'>
             {t`Try reloading the page, or contact your administrator if the problem persists.`}
           </Text>
         </Stack>
       </Alert>
+      {error && (
+        <Alert color='red' icon={<IconInfoCircle />} title={t`Error Details`}>
+          <Text size='sm'>{error}</Text>
+        </Alert>
+      )}
+    </>
   );
 }
 
@@ -34,17 +42,22 @@ export function Boundary({
   label: string;
   fallback?: React.ReactElement<any> | FallbackRender;
 }>): ReactNode {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
   const onError = useCallback(
     (error: unknown, componentStack: string | undefined, eventId: string) => {
       console.error(`ERR: Error rendering component: ${label}`);
       console.error(error);
+      setErrorMessage(error instanceof Error ? error.message : String(error));
     },
     []
   );
 
   return (
     <ErrorBoundary
-      fallback={fallback ?? <DefaultFallback title={label} />}
+      fallback={
+        fallback ?? <DefaultFallback title={label} error={errorMessage} />
+      }
       onError={onError}
     >
       {children}

src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx

@@ -45,9 +45,12 @@ export function SecurityContent() {
 
   const user = useUserState();
 
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
   const onError = useCallback(
     (error: unknown, componentStack: string | undefined, eventId: string) => {
       console.error(`ERR: Error rendering component: ${error}`);
+      setErrorMessage(error instanceof Error ? error.message : String(error));
     },
     []
   );
@@ -95,7 +98,9 @@ export function SecurityContent() {
           </Accordion.Control>
           <Accordion.Panel>
             <ErrorBoundary
-              fallback={<DefaultFallback title={'API Table'} />}
+              fallback={
+                <DefaultFallback title={'API Table'} error={errorMessage} />
+              }
               onError={onError}
             >
               <ApiTokenTable only_myself />