fix(FR-2870): catch storage host fetch errors with session launcher boundary

Author: ironAiken2

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

@@ -166,5 +166,8 @@ export {
 } from './useBAILogger';
 export type { LoggerPlugin, LogContext, BAILogger } from './useBAILogger';
 export { useEventNotStable } from './useEventNotStable';
-export { useProjectResourceGroups } from './useProjectResourceGroups';
+export {
+  useProjectResourceGroups,
+  StorageHostFetchError,
+} from './useProjectResourceGroups';
 export type { ScalingGroupItem } from './useProjectResourceGroups';

packages/backend.ai-ui/src/hooks/useProjectResourceGroups.ts

@@ -6,6 +6,27 @@ export interface ScalingGroupItem {
   name: string;
 }
 
+/**
+ * Thrown when the vfolder host info fetch (`/folders/_/hosts`) inside
+ * `useProjectResourceGroups` fails. Tagging the failure lets callers wrap
+ * the hook with a dedicated error boundary that can distinguish this
+ * specific case from unrelated render errors and surface a targeted
+ * message (and discriminate it from the parallel scaling-groups fetch
+ * failure, which is re-thrown as-is so an outer boundary handles it).
+ */
+export class StorageHostFetchError extends Error {
+  readonly originalError: unknown;
+  constructor(originalError: unknown) {
+    super(
+      originalError instanceof Error
+        ? originalError.message
+        : 'Failed to fetch storage host information.',
+    );
+    this.name = 'StorageHostFetchError';
+    this.originalError = originalError;
+  }
+}
+
 interface VolumeInfo {
   backend: string;
   capabilities: string[];
@@ -60,15 +81,21 @@ export const useProjectResourceGroups = (
 
   const { data } = useSuspenseTanQuery<ProjectResourceGroupsQueryResult>({
     queryKey: ['ResourceGroupSelectQuery', projectName],
-    queryFn: () => {
+    queryFn: async () => {
       // Short-circuit when there is no project context yet — avoids hitting
       // `/scaling-groups?group=` and `/folders/_/hosts` with an unscoped query.
       if (!projectName) {
-        return Promise.resolve(null);
+        return null;
       }
       const search = new URLSearchParams();
       search.set('group', projectName);
-      return Promise.all([
+      // Run both fetches concurrently but discriminate failures: a host-info
+      // failure is tagged with `StorageHostFetchError` so a dedicated boundary
+      // can surface it, while a scaling-groups failure is re-thrown as-is and
+      // bubbles up to the generic error boundary. Host-info failure takes
+      // precedence when both fail because SFTP filtering depends on it and
+      // the result is otherwise unusable.
+      const [scalingGroupsResult, hostsResult] = await Promise.allSettled([
         baiRequestWithPromise({
           method: 'GET',
           url: `/scaling-groups?${search.toString()}`,
@@ -78,6 +105,16 @@ export const useProjectResourceGroups = (
           url: `/folders/_/hosts`,
         }),
       ]);
+      if (hostsResult.status === 'rejected') {
+        throw new StorageHostFetchError(hostsResult.reason);
+      }
+      if (scalingGroupsResult.status === 'rejected') {
+        throw scalingGroupsResult.reason;
+      }
+      return [
+        scalingGroupsResult.value,
+        hostsResult.value,
+      ] as unknown as NonNullable<ProjectResourceGroupsQueryResult>;
     },
     staleTime: 1000 * 60 * 5, // Cache for 5 minutes
   });

react/src/components/StorageHostFetchErrorBoundary.tsx

@@ -0,0 +1,67 @@
+/**
+ @license
+ Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
+ */
+import { LeftOutlined } from '@ant-design/icons';
+import { Button, Result } from 'antd';
+import { BAIFlex, StorageHostFetchError } from 'backend.ai-ui';
+import React from 'react';
+import { ErrorBoundary, type FallbackProps } from 'react-error-boundary';
+import { useTranslation } from 'react-i18next';
+
+interface StorageHostFetchErrorBoundaryProps {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+const Fallback: React.FC<FallbackProps & { style?: React.CSSProperties }> = ({
+  error,
+  style,
+}) => {
+  'use memo';
+  const { t } = useTranslation();
+  if (!(error instanceof StorageHostFetchError)) {
+    // Re-throw non-storage errors so the outer BAIErrorBoundary handles them.
+    throw error;
+  }
+  return (
+    <BAIFlex
+      style={{ margin: 'auto', ...style }}
+      justify="center"
+      align="center"
+    >
+      <Result
+        status="warning"
+        title={t('errorBoundary.StorageHostFetchFailedTitle')}
+        extra={
+          <BAIFlex direction="column" gap="md">
+            <Button
+              type="primary"
+              icon={<LeftOutlined />}
+              onClick={() => {
+                globalThis.history.back();
+              }}
+            >
+              {t('button.GoBackToPreviousPage')}
+            </Button>
+          </BAIFlex>
+        }
+      />
+    </BAIFlex>
+  );
+};
+
+const StorageHostFetchErrorBoundary: React.FC<
+  StorageHostFetchErrorBoundaryProps
+> = ({ children, style }) => {
+  'use memo';
+  return (
+    <ErrorBoundary
+      fallbackRender={(props) => <Fallback {...props} style={style} />}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+export default StorageHostFetchErrorBoundary;

react/src/routes.tsx

@@ -13,6 +13,7 @@ import LocationStateBreadCrumb from './components/LocationStateBreadCrumb';
 import LoginView from './components/LoginView';
 import MainLayout from './components/MainLayout/MainLayout';
 import { STokenLoginBoundary } from './components/STokenLoginBoundary';
+import StorageHostFetchErrorBoundary from './components/StorageHostFetchErrorBoundary';
 import WebUINavigate from './components/WebUINavigate';
 import { persistPostLoginState } from './helper/loginSessionAuth';
 import { useSuspendedBackendaiClient } from './hooks';
@@ -258,15 +259,17 @@ export const mainLayoutChildRoutes: RouteObject[] = [
               style={{ paddingBottom: token.paddingContentVerticalLG }}
             >
               <LocationStateBreadCrumb />
-              <Suspense
-                fallback={
-                  <BAIFlex direction="column" style={{ maxWidth: 700 }}>
-                    <Skeleton active />
-                  </BAIFlex>
-                }
-              >
-                <SessionLauncherPage />
-              </Suspense>
+              <StorageHostFetchErrorBoundary>
+                <Suspense
+                  fallback={
+                    <BAIFlex direction="column" style={{ maxWidth: 700 }}>
+                      <Skeleton active />
+                    </BAIFlex>
+                  }
+                >
+                  <SessionLauncherPage />
+                </Suspense>
+              </StorageHostFetchErrorBoundary>
             </BAIFlex>
           );
         },

resources/i18n/en.json

@@ -379,6 +379,7 @@
     "Finish": "Finish",
     "ForceTerminate": "Force Terminate",
     "Generate": "Generate",
+    "GoBackToPreviousPage": "Go back to the previous page",
     "GoBackToStartPage": "Go back to the {{title}} page",
     "Info": "Info",
     "More": "More",
@@ -1376,6 +1377,7 @@
     "ReloadPage": "Reload the page",
     "ResetErrorBoundary": "Reset ErrorBoundary",
     "StackTrace": "Stack Trace:",
+    "StorageHostFetchFailedTitle": "Failed to fetch storage host information.",
     "Title": "An error has occurred."
   },
   "explorer": {

resources/i18n/ko.json

@@ -362,6 +362,7 @@
     "Finish": "완료",
     "ForceTerminate": "강제 종료",
     "Generate": "생성하기",
+    "GoBackToPreviousPage": "이전 페이지로 이동",
     "GoBackToStartPage": "{{title}} 페이지로 돌아가기",
     "Info": "정보",
     "More": "더보기",
@@ -1358,6 +1359,7 @@
     "ReloadPage": "페이지 새로고침",
     "ResetErrorBoundary": "ErrorBoundary 초기화",
     "StackTrace": "스택 트레이스:",
+    "StorageHostFetchFailedTitle": "스토리지 호스트 정보를 가져오는데 실패했습니다.",
     "Title": "에러가 발생했습니다."
   },
   "explorer": {