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

* Display error information in boundary

* Fix SecurityContext

src/frontend/lib/components/Boundary.tsx

@@ -1,27 +1,35 @@
 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 { type ReactNode, useCallback } from 'react';
+import { IconExclamationCircle, IconInfoCircle } from '@tabler/icons-react';
+import { type ReactNode, useCallback, useState } from 'react';
 
 export function DefaultFallback({
-  title
-}: Readonly<{ title: string }>): ReactNode {
+  title,
+  error
+}: Readonly<{ title: string; error: string | null }>): ReactNode {
   return (
-    <Alert
-      color='red'
-      icon={<IconExclamationCircle />}
-      title={`INVE-E17: ${t`Error rendering component`}: ${title}`}
-    >
-      <Stack gap='xs'>
-        <Text size='sm'>
-          {t`An error occurred while rendering this component. Refer to the console for more information.`}
-        </Text>
-        <Text size='sm'>
-          {t`Try reloading the page, or contact your administrator if the problem persists.`}
-        </Text>
-      </Stack>
-    </Alert>
+    <>
+      <Alert
+        color='red'
+        icon={<IconExclamationCircle />}
+        title={`INVE-E17: ${t`Error rendering component`}: ${title}`}
+      >
+        <Stack gap='xs'>
+          <Text size='sm'>
+            {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 />