fix(FR-1261): Show fallback UI if there is storage proxy crash issue on faulty node (#3978)

Resolves #3977 ([FR-1261](https://lablup.atlassian.net/browse/FR-1261))

# Improve error handling in storage and resource group components

This PR adds error boundaries and graceful error handling to storage and resource group related components to prevent UI crashes when backend API calls fail.

Key changes:
- Replaced `useSuspenseTanQuery` with `useTanQuery` in `ResourceGroupSelect` and `StorageSelect` components
- Added proper error handling with fallbacks in API calls
- Added type definitions for better code maintainability
- Modified `useCurrentProject` hook to handle vhost info fetch failures gracefully
- Added proper fallback for alerts in `MainLayout`
- Added error boundaries to storage-related cards in `VFolderNodeListPage`

These changes ensure that storage-related UI components continue to function even when backend API calls fail, providing a more resilient user experience.

**Checklist:**
- [ ] Documentation
- [ ] Minium required manager version
- [x] Specific setting for review (eg., KB link, endpoint or how to setup): http://10.122.12.219:8090
- [x] Minimum requirements to check during review: see whole pages without error boundary.
- [ ] Test case(s) to demonstrate the difference of before/after

[FR-1261]: https://lablup.atlassian.net/browse/FR-1261?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: agatha197

packages/backend.ai-ui/src/components/BAIAlertIconWithTooltip.tsx

@@ -0,0 +1,30 @@
+import { theme, Tooltip } from 'antd';
+import { TooltipPropsWithTitle } from 'antd/es/tooltip';
+import { CircleAlertIcon } from 'lucide-react';
+import React from 'react';
+
+interface BAIAlertIconWithTooltipProps
+  extends Omit<TooltipPropsWithTitle, 'children'> {
+  iconProps?: React.ComponentProps<typeof CircleAlertIcon>;
+  type?: 'warning' | 'error';
+}
+const BAIAlertIconWithTooltip = ({
+  iconProps,
+  type = 'error',
+  ...tooltipProps
+}: BAIAlertIconWithTooltipProps) => {
+  const { token } = theme.useToken();
+  return (
+    <Tooltip {...tooltipProps}>
+      <CircleAlertIcon
+        style={{
+          color: type === 'warning' ? token.colorWarning : token.colorError,
+          cursor: 'help',
+        }}
+        {...iconProps}
+      />
+    </Tooltip>
+  );
+};
+
+export default BAIAlertIconWithTooltip;

packages/backend.ai-ui/src/components/index.ts

@@ -17,6 +17,7 @@ export { default as BAIResourceWithSteppedProgress } from './BAIResourceWithStep
 export { default as BAIRowWrapWithDividers } from './BAIRowWrapWithDividers';
 export type { BAIResourceWithSteppedProgressProps } from './BAIResourceWithSteppedProgress';
 export { default as BAIUnmountAfterClose } from './BAIUnmountAfterClose';
+export { default as BAIAlertIconWithTooltip } from './BAIAlertIconWithTooltip';
 export * from './Table';
 export * from './fragments';
 export * from './provider';

react/src/components/MainLayout/MainLayout.tsx

@@ -19,6 +19,7 @@ import { BAIFlex } from 'backend.ai-ui';
 import { atom, useSetAtom } from 'jotai';
 import _ from 'lodash';
 import { Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { useNavigate, Outlet, useMatches } from 'react-router-dom';
 
 export const HEADER_Z_INDEX_IN_MAIN_LAYOUT = 5;
@@ -219,14 +220,16 @@ function MainLayout() {
                 </div>
               </Suspense>
               {/* Non sticky Alert components */}
-              <Suspense>
+              <Suspense fallback={<div style={{ minHeight: '0px' }} />}>
                 <BAIFlex
                   direction="column"
                   gap={'sm'}
                   align="stretch"
                   className={styles.alertWrapper}
                 >
-                  <NoResourceGroupAlert />
+                  <ErrorBoundary fallbackRender={() => null}>
+                    <NoResourceGroupAlert />
+                  </ErrorBoundary>
                   <PasswordChangeRequestAlert
                     showIcon
                     icon={undefined}

react/src/components/ResourceGroupSelect.tsx

@@ -8,6 +8,19 @@ import { SelectProps } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useState, useTransition } from 'react';
 
+interface ScalingGroupItem {
+  name: string;
+}
+
+interface VolumeInfo {
+  backend: string;
+  capabilities: string[];
+  usage: {
+    percentage: number;
+  };
+  sftp_scaling_groups?: string[];
+}
+
 interface ResourceGroupSelectProps extends BAISelectProps {
   projectName: string;
   autoSelectDefault?: boolean;
@@ -47,27 +60,19 @@ const ResourceGroupSelect: React.FC<ResourceGroupSelectProps> = ({
   );
 
   const { data: resourceGroupSelectQueryResult } = useSuspenseTanQuery<
-    [
-      {
-        scaling_groups: {
-          name: string;
-        }[];
-      },
-      {
-        allowed: string[];
-        default: string;
-        volume_info: {
-          [key: string]: {
-            backend: string;
-            capabilities: string[];
-            usage: {
-              percentage: number;
-            };
-            sftp_scaling_groups?: string[];
+    | [
+        {
+          scaling_groups: ScalingGroupItem[];
+        },
+        {
+          allowed: string[];
+          default: string;
+          volume_info: {
+            [key: string]: VolumeInfo;
           };
-        };
-      },
-    ]
+        },
+      ]
+    | null
   >({
     queryKey: ['ResourceGroupSelectQuery', projectName],
     queryFn: () => {
@@ -84,18 +89,18 @@ const ResourceGroupSelect: React.FC<ResourceGroupSelectProps> = ({
         }),
       ]);
     },
-    staleTime: 0,
+    staleTime: 1000 * 60 * 5, // Cache for 5 minutes
     fetchKey: fetchKey,
   });
 
   const sftpResourceGroups = _.flatMap(
-    resourceGroupSelectQueryResult?.[1].volume_info,
+    resourceGroupSelectQueryResult?.[1]?.volume_info,
     (item) => item?.sftp_scaling_groups ?? [],
   );
 
   const resourceGroups = _.filter(
-    resourceGroupSelectQueryResult?.[0].scaling_groups,
-    (item) => {
+    resourceGroupSelectQueryResult?.[0]?.scaling_groups,
+    (item: ScalingGroupItem) => {
       if (_.includes(sftpResourceGroups, item.name)) {
         return false;
       }

react/src/components/StorageSelect.tsx

@@ -19,6 +19,15 @@ export type VolumeInfo = {
   };
   sftp_scaling_groups: string[];
 };
+
+interface VHostInfo {
+  default: string;
+  allowed: Array<string>;
+  volume_info?: {
+    [key: string]: VolumeInfo;
+  };
+}
+
 interface Props extends Omit<BAISelectProps, 'value' | 'onChange'> {
   autoSelectType?: 'usage' | 'default';
   showUsageStatus?: boolean;
@@ -41,20 +50,7 @@ const StorageSelect: React.FC<Props> = ({
   const baiClient = useSuspendedBackendaiClient();
 
   const { data: vhostInfo, isLoading: isLoadingVhostInfo } =
-    useSuspenseTanQuery<{
-      default: string;
-      allowed: Array<string>;
-      volume_info?: {
-        [key: string]: {
-          backend: string;
-          capabilities: string[];
-          usage: {
-            percentage: number;
-          };
-          sftp_scaling_groups: any[];
-        };
-      };
-    }>({
+    useSuspenseTanQuery<VHostInfo | null>({
       queryKey: ['vhostInfo'],
       queryFn: () => {
         return baiClient.vfolder.list_hosts();
@@ -69,7 +65,7 @@ const StorageSelect: React.FC<Props> = ({
   const [controllableSearchValue, setControllableSearchValue] =
     useControllableState({ value: searchValue, onChange: onSearch });
   useEffect(() => {
-    if (!autoSelectType) return;
+    if (!autoSelectType || !vhostInfo) return; // Return early if vhostInfo is null
     let nextHost = vhostInfo?.default ?? vhostInfo?.allowed[0] ?? '';
     if (autoSelectType === 'usage') {
       const lowestUsageHost = _.minBy(

react/src/hooks/useCurrentProject.tsx

@@ -4,6 +4,31 @@ import { atomWithDefault } from 'jotai/utils';
 import _ from 'lodash';
 import { useCallback, useEffect } from 'react';
 
+interface ScalingGroupItem {
+  name: string;
+}
+
+interface VHostVolumeInfo {
+  backend: string;
+  capabilities: string[];
+  usage: {
+    percentage: number;
+  };
+  sftp_scaling_groups?: string[];
+}
+
+interface VHostInfo {
+  allowed: string[];
+  default: string;
+  volume_info: {
+    [key: string]: VHostVolumeInfo;
+  };
+}
+
+interface ScalingGroupsResponse {
+  scaling_groups: ScalingGroupItem[];
+}
+
 const currentProjectAtom = atomWithDefault(() => {
   return {
     // @ts-ignore
@@ -22,7 +47,7 @@ const previousSelectedResourceGroupNameAtom = atom<string | null>(null);
 
 export const useCurrentResourceGroupValue = () => {
   useSuspendedBackendaiClient();
-  const { resourceGroups } = useAtomValue(resourceGroupsForCurrentProjectAtom);
+  const { resourceGroups } = useResourceGroupsForCurrentProject();
   const [prevSelectedRGName, setPrevSelectedRGName] = useAtom(
     previousSelectedResourceGroupNameAtom,
   );
@@ -68,31 +93,18 @@ const resourceGroupsForCurrentProjectAtom = atom(async (get) => {
   const currentProject = get(currentProjectAtom);
   const [resourceGroups, vhostInfo] = await Promise.all([
     // @ts-ignore
-    globalThis.backendaiclient.scalingGroup.list(currentProject.name) as {
-      scaling_groups: {
-        name: string;
-      }[];
-    },
+    globalThis.backendaiclient.scalingGroup.list(
+      currentProject.name,
+    ) as ScalingGroupsResponse,
     // @ts-ignore
-    globalThis.backendaiclient.vfolder.list_hosts(currentProject.id) as {
-      allowed: string[];
-      default: string;
-      volume_info: {
-        [key: string]: {
-          backend: string;
-          capabilities: string[];
-          usage: {
-            percentage: number;
-          };
-          sftp_scaling_groups?: string[];
-        };
-      };
-    },
+    globalThis.backendaiclient.vfolder.list_hosts(
+      currentProject.id,
+    ) as VHostInfo,
   ]);
 
   const allSftpScalingGroups = _.uniq(
     _.flatten(
-      _.map(vhostInfo.volume_info, (volume) => volume.sftp_scaling_groups),
+      _.map(vhostInfo.volume_info, (volume) => volume?.sftp_scaling_groups),
     ),
   );
 

react/src/pages/ComputeSessionListPage.tsx

@@ -44,6 +44,7 @@ import {
   BAISessionsIcon,
   BAIPropertyFilter,
   mergeFilterValues,
+  BAIAlertIconWithTooltip,
 } from 'backend.ai-ui';
 import _ from 'lodash';
 import { PowerOffIcon } from 'lucide-react';
@@ -55,6 +56,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery } from 'react-relay';
 import { useLocation } from 'react-router-dom';
@@ -341,30 +343,49 @@ const ComputeSessionListPage = () => {
           </BAICard>
         </Col>
         <Col xs={24} lg={16} xl={20} style={{ display: 'flex' }}>
-          <Suspense
-            fallback={
-              <BAICard
+          <ErrorBoundary
+            fallbackRender={() => {
+              return (
+                <BAICard
+                  style={{
+                    width: '100%',
+                    minHeight: lg ? CARD_MIN_HEIGHT : undefined,
+                  }}
+                  status="error"
+                  extra={
+                    <BAIAlertIconWithTooltip
+                      title={t('error.UnexpectedError')}
+                    />
+                  }
+                />
+              );
+            }}
+          >
+            <Suspense
+              fallback={
+                <BAICard
+                  style={{
+                    width: '100%',
+                    minHeight: lg ? CARD_MIN_HEIGHT : undefined,
+                  }}
+                  loading
+                />
+              }
+            >
+              <ConfigurableResourceCard
                 style={{
                   width: '100%',
                   minHeight: lg ? CARD_MIN_HEIGHT : undefined,
                 }}
-                loading
+                isRefetching={deferredFetchKey !== fetchKey}
+                fetchKey={deferredFetchKey}
+                queryRef={
+                  queryRef.TotalResourceWithinResourceGroupFragment ?? undefined
+                }
+                onResourceGroupChange={setCurrentResourceGroup}
               />
-            }
-          >
-            <ConfigurableResourceCard
-              style={{
-                width: '100%',
-                minHeight: lg ? CARD_MIN_HEIGHT : undefined,
-              }}
-              isRefetching={deferredFetchKey !== fetchKey}
-              fetchKey={deferredFetchKey}
-              queryRef={
-                queryRef.TotalResourceWithinResourceGroupFragment ?? undefined
-              }
-              onResourceGroupChange={setCurrentResourceGroup}
-            />
-          </Suspense>
+            </Suspense>
+          </ErrorBoundary>
         </Col>
       </Row>
       <BAICard