diff --git a/frontend/src/pages/ErrorDetails/index.tsx b/frontend/src/pages/ErrorDetails/index.tsx
index ddc677c7b5..5f9e6c8e9f 100644
--- a/frontend/src/pages/ErrorDetails/index.tsx
+++ b/frontend/src/pages/ErrorDetails/index.tsx
@@ -5,6 +5,7 @@ import Spinner from 'components/Spinner';
 import ROUTES from 'constants/routes';
 import ErrorDetailsContainer from 'container/ErrorDetails';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { Redirect, useLocation } from 'react-router-dom';
@@ -13,6 +14,7 @@ import { PayloadProps } from 'types/api/errors/getById';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 function ErrorDetails(): JSX.Element {
+	const { t } = useTranslation(['common']);
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
@@ -22,6 +24,7 @@ function ErrorDetails(): JSX.Element {
 	const errorId = params.get('errorId');
 	const errorType = params.get('errorType');
 	const serviceName = params.get('serviceName');
+	const defaultError = t('something_went_wrong');
 
 	const { data, status } = useQuery(
 		[
@@ -72,16 +75,31 @@ function ErrorDetails(): JSX.Element {
 		},
 	);
 
+	// if errorType and serviceName is null redirecting to the ALL_ERROR page not now
 	if (errorType === null || serviceName === null) {
 		return <Redirect to={ROUTES.ALL_ERROR} />;
 	}
 
+	// when the api is in loading state
 	if (status === 'loading' || ErrorIdStatus === 'loading') {
 		return <Spinner tip="Loading.." />;
 	}
 
+	// if any error occurred while loading
 	if (status === 'error' || ErrorIdStatus === 'error') {
-		return <Typography>{data?.error || errorIdPayload?.error}</Typography>;
+		return (
+			<Typography>
+				{data?.error || errorIdPayload?.error || defaultError}
+			</Typography>
+		);
+	}
+
+	// if API is successfully but there is an error
+	if (
+		(status === 'success' && data?.statusCode >= 400) ||
+		(ErrorIdStatus === 'success' && errorIdPayload.statusCode >= 400)
+	) {
+		return <Typography>{data?.error || defaultError}</Typography>;
 	}
 
 	return (