dstackai · olgenn · Feb 6, 2025 · Feb 6, 2025
diff --git a/frontend/src/libs/index.ts b/frontend/src/libs/index.ts
@@ -1,11 +1,9 @@
 export {
     default as isErrorWithMessage,
-    isErrorWithError,
-    isRequestErrorWithDetail,
-    isRequestFormErrors,
-    isRequestFormFieldError,
-    isRequestFormErrors2,
-} from './isErrorWithMessage';
+    isResponseServerFormFieldError,
+    isResponseServerError,
+    getServerError,
+} from './serverErrors';
 import { format, formatDistanceToNowStrict } from 'date-fns';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/frontend/src/libs/isErrorWithMessage.ts b/frontend/src/libs/isErrorWithMessage.ts
diff --git a/frontend/src/libs/serverErrors.ts b/frontend/src/libs/serverErrors.ts
@@ -0,0 +1,51 @@
+import { isArray } from 'lodash';
+
+import { FormFieldError, ResponseServerError } from './types';
+
+export default function serverErrors(error: unknown): error is { data: { message: string } } {
+    return (
+        typeof error === 'object' &&
+        error !== null &&
+        'data' in error &&
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        typeof ((error as any).data as any)?.message === 'string'
+    );
+}
+
+export function isResponseServerFormFieldError(fieldError: unknown): fieldError is FormFieldError {
+    return (
+        typeof fieldError === 'object' &&
+        fieldError !== null &&
+        fieldError !== undefined &&
+        'loc' in fieldError &&
+        'msg' in fieldError &&
+        isArray(fieldError?.loc) &&
+        typeof fieldError?.msg === 'string'
+    );
+}
+
+export function isResponseServerError(formErrors: unknown): formErrors is ResponseServerError {
+    return (
+        typeof formErrors === 'object' &&
+        formErrors !== null &&
+        formErrors !== undefined &&
+        'detail' in formErrors &&
+        isArray(formErrors?.detail) &&
+        !!formErrors.detail.length &&
+        'msg' in formErrors.detail[0]
+    );
+}
+
+export function getServerError(error: any): string {
+    let errorText = error?.error;
+
+    const errorData = error.data;
+
+    if (isResponseServerError(errorData)) {
+        const errorDetail = errorData.detail;
+
+        errorText = errorDetail.flatMap(({ msg }) => msg).join(', ');
+    }
+
+    return errorText;
+}
diff --git a/frontend/src/libs/types.ts b/frontend/src/libs/types.ts
@@ -5,19 +5,11 @@ export type FormFieldError = {
     code: string;
 };
 
-export type FormError = {
+export type ResponseServerErrorItem = {
     msg: string;
     code: string;
 };
 
-export type FormErrors = {
-    detail: FormFieldError[];
-};
-
-export type FormErrors2 = {
-    detail: (FormFieldError | FormError)[];
-};
-
-export type RequestErrorWithDetail = {
-    detail: string;
+export type ResponseServerError = {
+    detail: (FormFieldError | ResponseServerErrorItem)[];
 };
diff --git a/frontend/src/pages/Fleets/List/useDeleteFleet.ts b/frontend/src/pages/Fleets/List/useDeleteFleet.ts
@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useNotifications } from 'hooks';
-import { isRequestFormErrors2 } from 'libs';
+import { getServerError } from 'libs';
 import { useDeleteFleetMutation } from 'services/fleet';
 
 export const useDeleteFleet = () => {
@@ -40,19 +40,9 @@ export const useDeleteFleet = () => {
         return Promise.all(requests)
             .finally(() => setIsDeleting(false))
             .catch((error) => {
-                let errorText = error?.error;
-
-                const errorData = error.data;
-
-                if (isRequestFormErrors2(errorData)) {
-                    const errorDetail = errorData.detail;
-
-                    errorText = errorDetail.flatMap(({ msg }) => msg).join(', ');
-                }
-
                 pushNotification({
                     type: 'error',
-                    content: t('common.server_error', { error: errorText }),
+                    content: t('common.server_error', { error: getServerError(error) }),
                 });
             });
     }, []);

diff --git a/frontend/src/pages/Instances/List/hooks/useActions.ts b/frontend/src/pages/Instances/List/hooks/useActions.ts
@@ -2,10 +2,9 @@ import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useNotifications } from 'hooks';
+import { getServerError } from 'libs';
 import { useDeleteInstancesMutation } from 'services/instance';
 
-import { isRequestFormErrors2 } from '../../../../libs';
-
 export const useActions = () => {
     const { t } = useTranslation();
     const [deleteInstances] = useDeleteInstancesMutation();
@@ -46,19 +45,9 @@ export const useActions = () => {
         return Promise.all(requests)
             .finally(() => setIsDeleting(false))
             .catch((error) => {
-                let errorText = error?.error;
-
-                const errorData = error.data;
-
-                if (isRequestFormErrors2(errorData)) {
-                    const errorDetail = errorData.detail;
-
-                    errorText = errorDetail.flatMap(({ msg }) => msg).join(', ');
-                }
-
                 pushNotification({
                     type: 'error',
-                    content: t('common.server_error', { error: errorText }),
+                    content: t('common.server_error', { error: getServerError(error) }),
                 });
             });
     }, []);

diff --git a/frontend/src/pages/Project/Add/index.tsx b/frontend/src/pages/Project/Add/index.tsx
@@ -5,6 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import { ContentLayout, Header } from 'components';
 
 import { useBreadcrumbs, useNotifications } from 'hooks';
+import { getServerError } from 'libs';
 import { ROUTES } from 'routes';
 import { useCreateProjectMutation } from 'services/project';
 
@@ -43,7 +44,12 @@ export const ProjectAdd: React.FC = () => {
 
                 navigate(ROUTES.PROJECT.DETAILS.SETTINGS.FORMAT(data.project_name));
             })
-            .catch((error) => console.log(error));
+            .catch((error) => {
+                pushNotification({
+                    type: 'error',
+                    content: t('common.server_error', { error: getServerError(error) }),
+                });
+            });
 
         return request;
     };

diff --git a/frontend/src/pages/Project/Backends/Add/index.tsx b/frontend/src/pages/Project/Backends/Add/index.tsx
@@ -5,6 +5,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Container, Header } from 'components';
 
 import { useBreadcrumbs, useNotifications } from 'hooks';
+import { getServerError } from 'libs';
 import { ROUTES } from 'routes';
 import {
     // useCreateBackendMutation,
@@ -85,8 +86,11 @@ export const BackendAdd: React.FC = () => {
 
                 navigate(ROUTES.PROJECT.DETAILS.SETTINGS.FORMAT(paramProjectName));
             })
-            .catch((error: never) => {
-                console.log(error);
+            .catch((error) => {
+                pushNotification({
+                    type: 'error',
+                    content: t('common.server_error', { error: getServerError(error) }),
+                });
             });
 
         return request;

diff --git a/frontend/src/pages/Project/Backends/Edit/index.tsx b/frontend/src/pages/Project/Backends/Edit/index.tsx
@@ -6,6 +6,7 @@ import { pick } from 'lodash';
 import { Container, Header, Loader } from 'components';
 
 import { useBreadcrumbs, useNotifications } from 'hooks';
+import { getServerError } from 'libs';
 import { ROUTES } from 'routes';
 import {
     // useGetBackendConfigQuery,
@@ -100,7 +101,12 @@ export const BackendEdit: React.FC = () => {
                     content: t('backend.edit.success_notification'),
                 });
             })
-            .catch(console.log);
+            .catch((error) => {
+                pushNotification({
+                    type: 'error',
+                    content: t('common.server_error', { error: getServerError(error) }),
+                });
+            });
 
         return request;
     };

diff --git a/frontend/src/pages/Project/Backends/Form/AWS/index.tsx b/frontend/src/pages/Project/Backends/Form/AWS/index.tsx
@@ -7,7 +7,7 @@ import { FormInput, FormMultiselect, FormMultiselectOptions, FormSelect, InfoLin
 
 import { useHelpPanel, useNotifications } from 'hooks';
 import useIsMounted from 'hooks/useIsMounted';
-import { isRequestFormErrors2, isRequestFormFieldError } from 'libs';
+import { isResponseServerError, isResponseServerFormFieldError } from 'libs';
 import { useBackendValuesMutation } from 'services/backend';
 import { AWSCredentialTypeEnum } from 'types';
 
@@ -94,9 +94,9 @@ export const AWSBackend: React.FC<IProps> = ({ loading }) => {
             // @ts-ignore
             const errorRequestData = errorResponse?.data;
 
-            if (isRequestFormErrors2(errorRequestData)) {
+            if (isResponseServerError(errorRequestData)) {
                 errorRequestData.detail.forEach((error) => {
-                    if (isRequestFormFieldError(error)) {
+                    if (isResponseServerFormFieldError(error)) {
                         setError(error.loc.join('.'), { type: 'custom', message: error.msg });
                     } else {
                         pushNotification({

diff --git a/frontend/src/pages/Project/Backends/Form/Azure/index.tsx b/frontend/src/pages/Project/Backends/Form/Azure/index.tsx
@@ -16,7 +16,7 @@ import {
 
 import { useHelpPanel, useNotifications } from 'hooks';
 import useIsMounted from 'hooks/useIsMounted';
-import { isRequestFormErrors2, isRequestFormFieldError } from 'libs';
+import { isResponseServerError, isResponseServerFormFieldError } from 'libs';
 import { useBackendValuesMutation } from 'services/backend';
 import { AzureCredentialTypeEnum } from 'types';
 
@@ -117,9 +117,9 @@ export const AzureBackend: React.FC<IProps> = ({ loading }) => {
             // @ts-ignore
             const errorRequestData = errorResponse?.data;
 
-            if (isRequestFormErrors2(errorRequestData)) {
+            if (isResponseServerError(errorRequestData)) {
                 errorRequestData.detail.forEach((error) => {
-                    if (isRequestFormFieldError(error)) {
+                    if (isResponseServerFormFieldError(error)) {
                         setError(error.loc.join('.'), { type: 'custom', message: error.msg });
                     } else {
                         pushNotification({

diff --git a/frontend/src/pages/Project/Backends/Form/GCP/index.tsx b/frontend/src/pages/Project/Backends/Form/GCP/index.tsx
@@ -15,7 +15,7 @@ import {
 
 import { useHelpPanel, useNotifications } from 'hooks';
 import useIsMounted from 'hooks/useIsMounted';
-import { isRequestFormErrors2, isRequestFormFieldError } from 'libs';
+import { isResponseServerError, isResponseServerFormFieldError } from 'libs';
 import { useBackendValuesMutation } from 'services/backend';
 import { GCPCredentialTypeEnum } from 'types';
 
@@ -115,9 +115,9 @@ export const GCPBackend: React.FC<IProps> = ({ loading }) => {
             // @ts-ignore
             const errorRequestData = errorResponse?.data;
 
-            if (isRequestFormErrors2(errorRequestData)) {
+            if (isResponseServerError(errorRequestData)) {
                 errorRequestData.detail.forEach((error) => {
-                    if (isRequestFormFieldError(error)) {
+                    if (isResponseServerFormFieldError(error)) {
                         if (error.loc.length === 1 && error.loc[0] === 'credentials') {
                             setError(FIELD_NAMES.CREDENTIALS.TYPE, { type: 'custom', message: error.msg });
                         } else {

diff --git a/frontend/src/pages/Project/Backends/Form/Lambda/index.tsx b/frontend/src/pages/Project/Backends/Form/Lambda/index.tsx
@@ -7,7 +7,7 @@ import { FormInput, FormMultiselect, FormMultiselectOptions, InfoLink, SpaceBetw
 
 import { useHelpPanel, useNotifications } from 'hooks';
 import useIsMounted from 'hooks/useIsMounted';
-import { isRequestFormErrors2, isRequestFormFieldError } from 'libs';
+import { isResponseServerError, isResponseServerFormFieldError } from 'libs';
 import { useBackendValuesMutation } from 'services/backend';
 
 import { API_KEY_HELP, FIELD_NAMES, REGIONS_HELP } from './constants';
@@ -66,9 +66,9 @@ export const LambdaBackend: React.FC<IProps> = ({ loading }) => {
             // @ts-ignore
             const errorRequestData = errorResponse?.data;
 
-            if (isRequestFormErrors2(errorRequestData)) {
+            if (isResponseServerError(errorRequestData)) {
                 errorRequestData.detail.forEach((error) => {
-                    if (isRequestFormFieldError(error)) {
+                    if (isResponseServerFormFieldError(error)) {
                         setError(error.loc.join('.'), { type: 'custom', message: error.msg });
                     } else {
                         pushNotification({

diff --git a/frontend/src/pages/Project/Backends/Form/index.tsx b/frontend/src/pages/Project/Backends/Form/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Alert, Button, FormField, FormTiles, FormUI, Grid, InfoLink, SpaceBetween, TilesProps } from 'components';
 
 import { useHelpPanel, useNotifications } from 'hooks';
-import { isRequestFormErrors2, isRequestFormFieldError } from 'libs';
+import { isResponseServerError, isResponseServerFormFieldError } from 'libs';
 import { useGetBackendTypesQuery } from 'services/backend';
 
 import { AWSBackend } from './AWS';
@@ -63,9 +63,9 @@ export const BackendForm: React.FC<IProps> = ({ initialValues, onCancel, loading
         onSubmitProp(data).catch((errorResponse) => {
             const errorRequestData = errorResponse?.data;
 
-            if (isRequestFormErrors2(errorRequestData)) {
+            if (isResponseServerError(errorRequestData)) {
                 errorRequestData.detail.forEach((error) => {
-                    if (isRequestFormFieldError(error)) {
+                    if (isResponseServerFormFieldError(error)) {
                         setError(error.loc.join('.') as FieldPath<TBackendConfig>, { type: 'custom', message: error.msg });
                     } else {
                         pushNotification({