fix(FR-1612): missing session creation error handling (#4456)

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

# Improve Session Creation Error Handling and Type Safety

> [!NOTE]
> This PR only handles displaying basic error messages. Improvements to the error messages will be addressed separately.

This PR enhances the session creation process by:

1. Adding proper error handling for failed session creations
2. Improving type safety with a dedicated `SessionCreationSuccess` type
3. Implementing the `useErrorMessageResolver` hook to display meaningful error messages
4. Refactoring the session creation promise handling to better group and process results

The changes allow users to see specific error messages when session creation fails, while still navigating to the job page when at least one session creation succeeds.

### How to test
- Set `allowManualImageNameForSession` to `true` in `config.toml`.
- Create a session and specify a manual image name that does not exist (e.g., `123456`).
- You can see the error modal as below:

![image.png](https://app.graphite.dev/user-attachments/assets/5c84a153-cd6e-4786-beb6-d579702945f8.png)

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

Author: yomybaby

react/src/pages/SessionLauncherPage.tsx

@@ -79,7 +79,12 @@ import {
   Typography,
   theme,
 } from 'antd';
-import { filterOutEmpty, BAIFlex, toGlobalId } from 'backend.ai-ui';
+import {
+  filterOutEmpty,
+  BAIFlex,
+  toGlobalId,
+  useErrorMessageResolver,
+} from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import { useAtomValue } from 'jotai';
 import _ from 'lodash';
@@ -97,6 +102,14 @@ import {
   withDefault,
 } from 'use-query-params';
 
+// Type for successful session creation result
+type SessionCreationSuccess = {
+  kernelId?: string;
+  sessionId: string;
+  sessionName: string;
+  servicePorts: Array<{ name: string }>;
+};
+
 type SessionLauncherFormData = Omit<
   Required<OptionalFieldsOnly<SessionLauncherFormValue>>,
   'autoMountedFolderNames' | 'mounts'
@@ -203,6 +216,7 @@ const SessionLauncherPage = () => {
   const app = App.useApp();
 
   const relayEnv = useRelayEnvironment();
+  const { getErrorMessage } = useErrorMessageResolver();
 
   const mainContentDivRef = useAtomValue(mainContentDivRefState);
   const baiClient = useSuspendedBackendaiClient();
@@ -611,57 +625,70 @@ const SessionLauncherPage = () => {
         });
 
         await Promise.allSettled(sessionPromises)
-          .then(async (sessionCreations) => {
-            // sessionCreations has failed
-            if (_.every(sessionCreations, { status: 'rejected' })) {
-            } else {
-              // If at least one session creation is successful, navigate to job page and show success notifications
-              webuiNavigate(redirectTo || '/job');
-
-              _.map(sessionCreations, async (creation) => {
-                if (creation.status === 'fulfilled') {
-                  const session = creation.value as {
-                    kernelId?: string;
-                    sessionId: string;
-                    sessionName: string;
-                    servicePorts: Array<{ name: string }>;
-                  };
-                  const queryResult =
-                    await fetchQuery<SessionLauncherPageAfterCreationQuery>(
-                      relayEnv,
-                      graphql`
-                        query SessionLauncherPageAfterCreationQuery(
-                          $id: GlobalIDField!
-                        ) {
-                          compute_session_node(id: $id) {
-                            ...BAINodeNotificationItemFragment
-                          }
+          .then(
+            async (
+              sessionCreations: PromiseSettledResult<SessionCreationSuccess>[],
+            ) => {
+              // Group session creations by their status
+              const results = _.groupBy(sessionCreations, 'status') as {
+                fulfilled?: PromiseFulfilledResult<SessionCreationSuccess>[];
+                rejected?: PromiseRejectedResult[];
+              };
+
+              // Handle successful session creations
+              _.map(results.fulfilled, async (creation) => {
+                const session = creation.value;
+                const queryResult =
+                  await fetchQuery<SessionLauncherPageAfterCreationQuery>(
+                    relayEnv,
+                    graphql`
+                      query SessionLauncherPageAfterCreationQuery(
+                        $id: GlobalIDField!
+                      ) {
+                        compute_session_node(id: $id) {
+                          ...BAINodeNotificationItemFragment
                         }
-                      `,
-                      {
-                        id: toGlobalId('ComputeSessionNode', session.sessionId),
-                      },
-                    )
-                      .toPromise()
-                      .catch(() => null);
-
-                  const createdSession =
-                    queryResult?.compute_session_node ?? null;
-
-                  if (createdSession) {
-                    upsertNotification({
-                      key: `${SESSION_LAUNCHER_NOTI_PREFIX}${session.sessionId}`,
-                      node: createdSession,
-                      open: true,
-                      duration: 0,
-                    });
-                  }
+                      }
+                    `,
+                    {
+                      id: toGlobalId('ComputeSessionNode', session.sessionId),
+                    },
+                  )
+                    .toPromise()
+                    .catch(() => null);
+
+                const createdSession =
+                  queryResult?.compute_session_node ?? null;
+
+                if (createdSession) {
+                  upsertNotification({
+                    key: `${SESSION_LAUNCHER_NOTI_PREFIX}${session.sessionId}`,
+                    node: createdSession,
+                    open: true,
+                    duration: 0,
+                  });
                 }
               });
-            }
-          })
-          .catch(() => {
-            // Handle failed session creations
+
+              // If at least one session creation is successful, navigate to job page and show success notifications
+              if (results.fulfilled && results.fulfilled.length > 0) {
+                webuiNavigate(redirectTo || '/job');
+              }
+
+              // If there are any failed session creations, show the first error message
+              if (results.rejected && results.rejected.length > 0) {
+                const error = results.rejected[0].reason;
+                app.modal.error({
+                  title: error?.title,
+                  content: getErrorMessage(error),
+                });
+              }
+            },
+          )
+          .catch((error) => {
+            // Unexpected error in `then` of allSettled
+            console.error('Unexpected error during session creation:', error);
+            app.message.error(t('error.UnexpectedError'));
           });
       })
       .catch((e) => {