Feat: Added support to handle error for UI side (#2708)

openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx

@@ -321,37 +321,75 @@ const DashboardDetailsPage = () => {
   };
 
   const descriptionUpdateHandler = (updatedDashboard: Dashboard) => {
-    saveUpdatedDashboardData(updatedDashboard).then((res: AxiosResponse) => {
+    saveUpdatedDashboardData(updatedDashboard)
-      const { description, version } = res.data;
+      .then((res: AxiosResponse) => {
-      setCurrentVersion(version);
+        const { description, version } = res.data;
-      setDashboardDetails(res.data);
+        setCurrentVersion(version);
-      setDescription(description);
+        setDashboardDetails(res.data);
-    });
+        setDescription(description);
+      })
+      .catch((err: AxiosError) => {
+        const errMsg =
+          err.response?.data.message || 'Error while updating description.';
+        showToast({
+          variant: 'error',
+          body: errMsg,
+        });
+      });
   };
 
   const followDashboard = () => {
-    addFollower(dashboardId, USERId).then((res: AxiosResponse) => {
+    addFollower(dashboardId, USERId)
-      const { newValue } = res.data.changeDescription.fieldsAdded[0];
+      .then((res: AxiosResponse) => {
+        const { newValue } = res.data.changeDescription.fieldsAdded[0];
 
-      setFollowers([...followers, ...newValue]);
+        setFollowers([...followers, ...newValue]);
-    });
+      })
+      .catch((err: AxiosError) => {
+        const errMsg =
+          err.response?.data.message ||
+          'Error while following dashboard entity.';
+        showToast({
+          variant: 'error',
+          body: errMsg,
+        });
+      });
   };
   const unfollowDashboard = () => {
-    removeFollower(dashboardId, USERId).then((res: AxiosResponse) => {
+    removeFollower(dashboardId, USERId)
-      const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
+      .then((res: AxiosResponse) => {
+        const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
 
-      setFollowers(
+        setFollowers(
-        followers.filter((follower) => follower.id !== oldValue[0].id)
+          followers.filter((follower) => follower.id !== oldValue[0].id)
-      );
+        );
-    });
+      })
+      .catch((err: AxiosError) => {
+        const errMsg =
+          err.response?.data.message ||
+          'Error while unfollowing dashboard entity.';
+        showToast({
+          variant: 'error',
+          body: errMsg,
+        });
+      });
   };
 
   const onTagUpdate = (updatedDashboard: Dashboard) => {
-    saveUpdatedDashboardData(updatedDashboard).then((res: AxiosResponse) => {
+    saveUpdatedDashboardData(updatedDashboard)
-      setTier(getTierTags(res.data.tags));
+      .then((res: AxiosResponse) => {
-      setCurrentVersion(res.data.version);
+        setTier(getTierTags(res.data.tags));
-      setTags(getTagsWithoutTier(res.data.tags));
+        setCurrentVersion(res.data.version);
-    });
+        setTags(getTagsWithoutTier(res.data.tags));
+      })
+      .catch((err: AxiosError) => {
+        const errMsg =
+          err.response?.data.message || 'Error while updating tags.';
+        showToast({
+          variant: 'error',
+          body: errMsg,
+        });
+      });
   };
 
   const settingsUpdateHandler = (
@@ -366,7 +404,15 @@ const DashboardDetailsPage = () => {
           setTier(getTierTags(res.data.tags));
           resolve();
         })
-        .catch(() => reject());
+        .catch((err: AxiosError) => {
+          const errMsg =
+            err.response?.data.message || 'Error while updating entity.';
+          reject();
+          showToast({
+            variant: 'error',
+            body: errMsg,
+          });
+        });
     });
   };
 

openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx

@@ -148,7 +148,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
       .catch((err: AxiosError) => {
         showToast({
           variant: 'error',
-          body: err.message ?? 'Error while fetching lineage data',
+          body: err.message ?? 'Error while fetching lineage data.',
         });
       })
       .finally(() => {
@@ -232,7 +232,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
         if (err.response?.status === 404) {
           setIsError(true);
         } else {
-          const errMsg = err.message || 'Error while fetching table details';
+          const errMsg = err.message || 'Error while fetching table details.';
           showToast({
             variant: 'error',
             body: errMsg,
@@ -259,7 +259,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
             .catch(() =>
               showToast({
                 variant: 'error',
-                body: 'Error while getting sample data',
+                body: 'Error while getting sample data.',
               })
             )
             .finally(() => setIsSampleDataLoading(false));
@@ -305,22 +305,41 @@ const DatasetDetailsPage: FunctionComponent = () => {
   };
 
   const descriptionUpdateHandler = (updatedTable: Table) => {
-    saveUpdatedTableData(updatedTable).then((res: AxiosResponse) => {
+    saveUpdatedTableData(updatedTable)
-      const { description, version } = res.data;
+      .then((res: AxiosResponse) => {
-      setCurrentVersion(version);
+        const { description, version } = res.data;
-      setTableDetails(res.data);
+        setCurrentVersion(version);
-      setDescription(description);
+        setTableDetails(res.data);
-    });
+        setDescription(description);
+      })
+      .catch((err: AxiosError) => {
+        const msg =
+          err.response?.data.message ||
+          `Error while updating entity description.`;
+        showToast({
+          variant: 'error',
+          body: msg,
+        });
+      });
   };
 
   const columnsUpdateHandler = (updatedTable: Table) => {
-    saveUpdatedTableData(updatedTable).then((res: AxiosResponse) => {
+    saveUpdatedTableData(updatedTable)
-      const { columns, version } = res.data;
+      .then((res: AxiosResponse) => {
-      setCurrentVersion(version);
+        const { columns, version } = res.data;
-      setTableDetails(res.data);
+        setCurrentVersion(version);
-      setColumns(columns);
+        setTableDetails(res.data);
-      setTableTags(getTableTags(columns || []));
+        setColumns(columns);
-    });
+        setTableTags(getTableTags(columns || []));
+      })
+      .catch((err: AxiosError) => {
+        const msg =
+          err.response?.data.message || `Error while updating entity.`;
+        showToast({
+          variant: 'error',
+          body: msg,
+        });
+      });
   };
 
   const settingsUpdateHandler = (updatedTable: Table): Promise<void> => {
@@ -334,7 +353,15 @@ const DatasetDetailsPage: FunctionComponent = () => {
           setTier(getTierTags(tags));
           resolve();
         })
-        .catch(() => reject());
+        .catch((err: AxiosError) => {
+          const msg =
+            err.response?.data.message || `Error while updating entity.`;
+          reject();
+          showToast({
+            variant: 'error',
+            body: msg,
+          });
+        });
     });
   };
 
@@ -346,13 +373,20 @@ const DatasetDetailsPage: FunctionComponent = () => {
     });
   };
   const unfollowTable = () => {
-    removeFollower(tableId, USERId).then((res: AxiosResponse) => {
+    removeFollower(tableId, USERId)
-      const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
+      .then((res: AxiosResponse) => {
+        const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
 
-      setFollowers(
+        setFollowers(
-        followers.filter((follower) => follower.id !== oldValue[0].id)
+          followers.filter((follower) => follower.id !== oldValue[0].id)
-      );
+        );
-    });
+      })
+      .catch(() => {
+        showToast({
+          variant: 'error',
+          body: `Error while unfollowing entity.`,
+        });
+      });
   };
 
   const versionHandler = () => {
@@ -400,7 +434,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
         .catch(() => {
           showToast({
             variant: 'error',
-            body: `Error while adding adding new edge`,
+            body: `Error while adding adding new edge.`,
           });
           reject();
         });
@@ -416,7 +450,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
     ).catch(() => {
       showToast({
         variant: 'error',
-        body: `Error while removing edge`,
+        body: `Error while removing edge.`,
       });
     });
   };

openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx

@@ -267,29 +267,58 @@ const PipelineDetailsPage = () => {
   };
 
   const followPipeline = () => {
-    addFollower(pipelineId, USERId).then((res: AxiosResponse) => {
+    addFollower(pipelineId, USERId)
-      const { newValue } = res.data.changeDescription.fieldsAdded[0];
+      .then((res: AxiosResponse) => {
+        const { newValue } = res.data.changeDescription.fieldsAdded[0];
 
-      setFollowers([...followers, ...newValue]);
+        setFollowers([...followers, ...newValue]);
-    });
+      })
+      .catch((err: AxiosError) => {
+        const errMsg =
+          err.response?.data.message ||
+          'Error while following pipeline entity.';
+        showToast({
+          variant: 'error',
+          body: errMsg,
+        });
+      });
   };
   const unfollowPipeline = () => {
-    removeFollower(pipelineId, USERId).then((res: AxiosResponse) => {
+    removeFollower(pipelineId, USERId)
-      const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
+      .then((res: AxiosResponse) => {
+        const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
 
-      setFollowers(
+        setFollowers(
-        followers.filter((follower) => follower.id !== oldValue[0].id)
+          followers.filter((follower) => follower.id !== oldValue[0].id)
-      );
+        );
-    });
+      })
+      .catch((err: AxiosError) => {
+        const errMsg =
+          err.response?.data.message ||
+          'Error while unfollowing pipeline entity.';
+        showToast({
+          variant: 'error',
+          body: errMsg,
+        });
+      });
   };
 
   const descriptionUpdateHandler = (updatedPipeline: Pipeline) => {
-    saveUpdatedPipelineData(updatedPipeline).then((res: AxiosResponse) => {
+    saveUpdatedPipelineData(updatedPipeline)
-      const { description, version } = res.data;
+      .then((res: AxiosResponse) => {
-      setCurrentVersion(version);
+        const { description, version } = res.data;
-      setPipelineDetails(res.data);
+        setCurrentVersion(version);
-      setDescription(description);
+        setPipelineDetails(res.data);
-    });
+        setDescription(description);
+      })
+      .catch((err: AxiosError) => {
+        const errMsg =
+          err.response?.data.message || 'Error while updating description.';
+        showToast({
+          variant: 'error',
+          body: errMsg,
+        });
+      });
   };
 
   const settingsUpdateHandler = (updatedPipeline: Pipeline): Promise<void> => {
@@ -302,16 +331,33 @@ const PipelineDetailsPage = () => {
           setTier(getTierTags(res.data.tags));
           resolve();
         })
-        .catch(() => reject());
+        .catch((err: AxiosError) => {
+          const errMsg =
+            err.response?.data.message || 'Error while updating entity.';
+          reject();
+          showToast({
+            variant: 'error',
+            body: errMsg,
+          });
+        });
     });
   };
 
   const onTagUpdate = (updatedPipeline: Pipeline) => {
-    saveUpdatedPipelineData(updatedPipeline).then((res: AxiosResponse) => {
+    saveUpdatedPipelineData(updatedPipeline)
-      setTier(getTierTags(res.data.tags));
+      .then((res: AxiosResponse) => {
-      setCurrentVersion(res.data.version);
+        setTier(getTierTags(res.data.tags));
-      setTags(getTagsWithoutTier(res.data.tags));
+        setCurrentVersion(res.data.version);
-    });
+        setTags(getTagsWithoutTier(res.data.tags));
+      })
+      .catch((err: AxiosError) => {
+        const errMsg =
+          err.response?.data.message || 'Error while updating tags.';
+        showToast({
+          variant: 'error',
+          body: errMsg,
+        });
+      });
   };
 
   const onTaskUpdate = (jsonPatch: Array<Operation>) => {

openmetadata-ui/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.component.tsx

@@ -206,29 +206,56 @@ const TopicDetailsPage: FunctionComponent = () => {
   };
 
   const followTopic = () => {
-    addFollower(topicId, USERId).then((res: AxiosResponse) => {
+    addFollower(topicId, USERId)
-      const { newValue } = res.data.changeDescription.fieldsAdded[0];
+      .then((res: AxiosResponse) => {
+        const { newValue } = res.data.changeDescription.fieldsAdded[0];
 
-      setFollowers([...followers, ...newValue]);
+        setFollowers([...followers, ...newValue]);
-    });
+      })
+      .catch((err: AxiosError) => {
+        const errMsg =
+          err.response?.data.message || 'Error while following entity.';
+        showToast({
+          variant: 'error',
+          body: errMsg,
+        });
+      });
   };
   const unfollowTopic = () => {
-    removeFollower(topicId, USERId).then((res: AxiosResponse) => {
+    removeFollower(topicId, USERId)
-      const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
+      .then((res: AxiosResponse) => {
+        const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
 
-      setFollowers(
+        setFollowers(
-        followers.filter((follower) => follower.id !== oldValue[0].id)
+          followers.filter((follower) => follower.id !== oldValue[0].id)
-      );
+        );
-    });
+      })
+      .catch((err: AxiosError) => {
+        const errMsg =
+          err.response?.data.message || 'Error while unfollowing entity.';
+        showToast({
+          variant: 'error',
+          body: errMsg,
+        });
+      });
   };
 
   const descriptionUpdateHandler = (updatedTopic: Topic) => {
-    saveUpdatedTopicData(updatedTopic).then((res: AxiosResponse) => {
+    saveUpdatedTopicData(updatedTopic)
-      const { description, version } = res.data;
+      .then((res: AxiosResponse) => {
-      setCurrentVersion(version);
+        const { description, version } = res.data;
-      setTopicDetails(res.data);
+        setCurrentVersion(version);
-      setDescription(description);
+        setTopicDetails(res.data);
-    });
+        setDescription(description);
+      })
+      .catch((err: AxiosError) => {
+        const errMsg =
+          err.response?.data.message || 'Error while updating description.';
+        showToast({
+          variant: 'error',
+          body: errMsg,
+        });
+      });
   };
 
   const settingsUpdateHandler = (updatedTopic: Topic): Promise<void> => {
@@ -241,16 +268,33 @@ const TopicDetailsPage: FunctionComponent = () => {
           setTier(getTierTags(res.data.tags));
           resolve();
         })
-        .catch(() => reject());
+        .catch((err: AxiosError) => {
+          const errMsg =
+            err.response?.data.message || 'Error while updating entity.';
+          reject();
+          showToast({
+            variant: 'error',
+            body: errMsg,
+          });
+        });
     });
   };
 
   const onTagUpdate = (updatedTopic: Topic) => {
-    saveUpdatedTopicData(updatedTopic).then((res: AxiosResponse) => {
+    saveUpdatedTopicData(updatedTopic)
-      setTier(getTierTags(res.data.tags));
+      .then((res: AxiosResponse) => {
-      setCurrentVersion(res.data.version);
+        setTier(getTierTags(res.data.tags));
-      setTags(getTagsWithoutTier(res.data.tags));
+        setCurrentVersion(res.data.version);
-    });
+        setTags(getTagsWithoutTier(res.data.tags));
+      })
+      .catch((err: AxiosError) => {
+        const errMsg =
+          err.response?.data.message || 'Error while updating tags.';
+        showToast({
+          variant: 'error',
+          body: errMsg,
+        });
+      });
   };
 
   const versionHandler = () => {

openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { AxiosResponse } from 'axios';
+import { AxiosError, AxiosResponse } from 'axios';
 import classNames from 'classnames';
 import { compare } from 'fast-json-patch';
 import { isNil } from 'lodash';
@@ -26,6 +26,7 @@ import {
 } from '../../axiosAPIs/databaseAPI';
 import { getDatabaseTables } from '../../axiosAPIs/tableAPI';
 import Description from '../../components/common/description/Description';
+import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
 import NextPrevious from '../../components/common/next-previous/NextPrevious';
 import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
 import TabsPane from '../../components/common/TabsPane/TabsPane';
@@ -43,7 +44,8 @@ import {
 import { ServiceCategory } from '../../enums/service.enum';
 import { Database } from '../../generated/entity/data/database';
 import { Table } from '../../generated/entity/data/table';
-import { isEven } from '../../utils/CommonUtils';
+import useToastContext from '../../hooks/useToastContext';
+import { getEntityMissingError, isEven } from '../../utils/CommonUtils';
 import { serviceTypeLogo } from '../../utils/ServiceUtils';
 import { getOwnerFromId, getUsagePercentile } from '../../utils/TableUtils';
 import { getTableTags } from '../../utils/TagsUtils';
@@ -53,6 +55,7 @@ const DatabaseDetails: FunctionComponent = () => {
   const [slashedTableName, setSlashedTableName] = useState<
     TitleBreadcrumbProps['titleLinks']
   >([]);
+  const showToast = useToastContext();
   const { databaseFQN } = useParams() as Record<string, string>;
   const [isLoading, setIsLoading] = useState(true);
   const [database, setDatabase] = useState<Database>();
@@ -69,6 +72,7 @@ const DatabaseDetails: FunctionComponent = () => {
   const [tableInstanceCount, setTableInstanceCount] = useState<number>(0);
 
   const [activeTab, setActiveTab] = useState<number>(1);
+  const [isError, setIsError] = useState(false);
 
   const history = useHistory();
   const isMounting = useRef(true);
@@ -121,35 +125,48 @@ const DatabaseDetails: FunctionComponent = () => {
   };
 
   const getDetailsByFQN = () => {
-    getDatabaseDetailsByFQN(databaseFQN).then((res: AxiosResponse) => {
+    getDatabaseDetailsByFQN(databaseFQN)
-      const { description, id, name, service, serviceType } = res.data;
+      .then((res: AxiosResponse) => {
-      setDatabase(res.data);
+        const { description, id, name, service, serviceType } = res.data;
-      setDescription(description);
+        setDatabase(res.data);
-      setDatabaseId(id);
+        setDescription(description);
-      setDatabaseName(name);
+        setDatabaseId(id);
+        setDatabaseName(name);
 
-      setServiceType(serviceType);
+        setServiceType(serviceType);
 
-      setSlashedTableName([
+        setSlashedTableName([
-        {
+          {
-          name: service.name,
+            name: service.name,
-          url: service.name
+            url: service.name
-            ? getServiceDetailsPath(
+              ? getServiceDetailsPath(
-                service.name,
+                  service.name,
-                serviceType,
+                  serviceType,
-                ServiceCategory.DATABASE_SERVICES
+                  ServiceCategory.DATABASE_SERVICES
-              )
+                )
-            : '',
+              : '',
-          imgSrc: serviceType ? serviceTypeLogo(serviceType) : undefined,
+            imgSrc: serviceType ? serviceTypeLogo(serviceType) : undefined,
-        },
+          },
-        {
+          {
-          name: name,
+            name: name,
-          url: '',
+            url: '',
-          activeTitle: true,
+            activeTitle: true,
-        },
+          },
-      ]);
+        ]);
-    });
+        fetchDatabaseTablesAndDBTModels();
-    fetchDatabaseTablesAndDBTModels();
+      })
+      .catch((err: AxiosError) => {
+        if (err.response?.status === 404) {
+          setIsError(true);
+        } else {
+          const errMsg = err.message || 'Error while fetching database details';
+          showToast({
+            variant: 'error',
+            body: errMsg,
+          });
+        }
+        setIsLoading(false);
+      });
   };
 
   const onCancel = () => {
@@ -176,11 +193,20 @@ const DatabaseDetails: FunctionComponent = () => {
         ...database,
         description: updatedHTML,
       };
-      saveUpdatedDatabaseData(updatedDatabaseDetails).then(() => {
+      saveUpdatedDatabaseData(updatedDatabaseDetails)
-        setDatabase(updatedDatabaseDetails);
+        .then(() => {
-        setDescription(updatedHTML);
+          setDatabase(updatedDatabaseDetails);
-        setIsEdit(false);
+          setDescription(updatedHTML);
-      });
+          setIsEdit(false);
+        })
+        .catch((err: AxiosError) => {
+          const errMsg =
+            err.response?.data.message || 'Error while updating description';
+          showToast({
+            variant: 'error',
+            body: errMsg,
+          });
+        });
     }
   };
 
@@ -226,6 +252,10 @@ const DatabaseDetails: FunctionComponent = () => {
     <>
       {isLoading ? (
         <Loader />
+      ) : isError ? (
+        <ErrorPlaceHolder>
+          {getEntityMissingError('database', databaseFQN)}
+        </ErrorPlaceHolder>
       ) : (
         <PageContainer>
           <div

openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx

@@ -31,6 +31,7 @@ import { getPipelines } from '../../axiosAPIs/pipelineAPI';
 import { getServiceByFQN, updateService } from '../../axiosAPIs/serviceAPI';
 import { getTopics } from '../../axiosAPIs/topicsAPI';
 import Description from '../../components/common/description/Description';
+import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
 import IngestionError from '../../components/common/error/IngestionError';
 import NextPrevious from '../../components/common/next-previous/NextPrevious';
 import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
@@ -61,7 +62,7 @@ import {
 import { EntityReference } from '../../generated/type/entityReference';
 import { useAuth } from '../../hooks/authHooks';
 import useToastContext from '../../hooks/useToastContext';
-import { isEven } from '../../utils/CommonUtils';
+import { getEntityMissingError, isEven } from '../../utils/CommonUtils';
 import {
   getIsIngestionEnable,
   getServiceCategoryFromType,
@@ -101,6 +102,7 @@ const ServicePage: FunctionComponent = () => {
   const [activeTab, setActiveTab] = useState(1);
   const [isConnectionAvailable, setConnectionAvailable] =
     useState<boolean>(true);
+  const [isError, setIsError] = useState(false);
   const [ingestions, setIngestions] = useState<AirflowPipeline[]>([]);
   const [serviceList] = useState<Array<DatabaseService>>([]);
   const [ingestionPaging, setIngestionPaging] = useState<Paging>({} as Paging);
@@ -261,7 +263,17 @@ const ServicePage: FunctionComponent = () => {
           resolve();
           getAllIngestionWorkflows();
           if (triggerIngestion) {
-            triggerIngestionById(id, displayName).then();
+            triggerIngestionById(id, displayName)
+              .then()
+              .catch((err: AxiosError) => {
+                const msg = err.response?.data.message;
+                showToast({
+                  variant: 'error',
+                  body:
+                    msg ??
+                    `Error while triggring ingestion workflow ${displayName}`,
+                });
+              });
           }
         })
         .catch((err: AxiosError) => {
@@ -301,7 +313,17 @@ const ServicePage: FunctionComponent = () => {
         setIsloading(false);
         getAllIngestionWorkflows();
         if (triggerIngestion) {
-          triggerIngestionById(id, displayName).then();
+          triggerIngestionById(id, displayName)
+            .then()
+            .catch((err: AxiosError) => {
+              const msg = err.response?.data.message;
+              showToast({
+                variant: 'error',
+                body:
+                  msg ??
+                  `Error while triggring ingestion workflow ${displayName}`,
+              });
+            });
         }
       })
       .catch((err: AxiosError) => {
@@ -325,7 +347,14 @@ const ServicePage: FunctionComponent = () => {
           setServiceDetails(res.data);
           resolve();
         })
-        .catch(() => reject());
+        .catch((err: AxiosError) => {
+          reject();
+          const msg = err.response?.data.message;
+          showToast({
+            variant: 'error',
+            body: msg ?? `Error while updating config for ${serviceFQN}`,
+          });
+        });
     });
   };
 
@@ -600,8 +629,8 @@ const ServicePage: FunctionComponent = () => {
   }, [serviceCategory, serviceType]);
 
   useEffect(() => {
-    getServiceByFQN(serviceName, serviceFQN).then(
+    getServiceByFQN(serviceName, serviceFQN)
-      (resService: AxiosResponse) => {
+      .then((resService: AxiosResponse) => {
         const { description, serviceType } = resService.data;
         setServiceDetails(resService.data);
         setDescription(description);
@@ -614,8 +643,21 @@ const ServicePage: FunctionComponent = () => {
           },
         ]);
         getOtherDetails();
-      }
+      })
-    );
+      .catch((err: AxiosError) => {
+        if (err.response?.status === 404) {
+          setIsError(true);
+        } else {
+          const errMsg =
+            err.response?.data.message ||
+            'Error while fetching service details';
+          showToast({
+            variant: 'error',
+            body: errMsg,
+          });
+        }
+        setIsloading(false);
+      });
   }, [serviceFQN, serviceName]);
 
   useEffect(() => {
@@ -679,6 +721,10 @@ const ServicePage: FunctionComponent = () => {
     <>
       {isLoading ? (
         <Loader />
+      ) : isError ? (
+        <ErrorPlaceHolder>
+          {getEntityMissingError(serviceName as string, serviceFQN)}
+        </ErrorPlaceHolder>
       ) : (
         <PageContainer>
           <div className="tw-px-4" data-testid="service-page">