ui: refine handle errors

ui/dashboardApp/client.js

@@ -28,8 +28,10 @@ function initAxios() {
       singleSpa.navigateToUrl('#' + auth.signInRoute)
       err.handled = true
     } else if (err.message === 'Network Error') {
-      message.error(i18next.t('error.message.network'))
+      const content = i18next.t('error.message.network')
+      message.error({ content, key: 'network_error' }) // use key to avoid multiple message boxes
       err.handled = true
+      err.msg = content // use `err.message` doesn't work
     }
     return Promise.reject(err)
   })

ui/lib/apps/Overview/components/Instances.tsx

@@ -12,12 +12,14 @@ import {
 import client from '@lib/client'
 import { AnimatedSkeleton, Card } from '@lib/components'
 import { useClientRequest } from '@lib/utils/useClientRequest'
+import getApiErrorsMsg from '@lib/utils/apiErrorsMsg'
 
 export default function Instances() {
   const { t } = useTranslation()
   const { data, isLoading, error } = useClientRequest((cancelToken) =>
     client.getInstance().topologyAllGet({ cancelToken })
   )
+  const errorMsg = useMemo(() => getApiErrorsMsg([error]), [error])
 
   const statusMap = useMemo(() => {
     if (!data) {
@@ -66,7 +68,7 @@ export default function Instances() {
       noMarginLeft
     >
       <AnimatedSkeleton showSkeleton={isLoading}>
-        {error && <Alert message="Error" type="error" showIcon />}
+        {error && <Alert message={errorMsg} type="error" showIcon />}
         {data &&
           statusMap.map((s) => {
             return (

ui/lib/components/CardTableV2/index.tsx

@@ -204,23 +204,20 @@ function CardTableV2(props: ICardTableV2Props) {
       <AnimatedSkeleton
         showSkeleton={items.length === 0 && loading && !errorMsg}
       >
-        {errorMsg ? (
-          <Alert message={errorMsg} type="error" showIcon />
-        ) : (
-          <div className={styles.cardTableContent}>
-            <MemoDetailsList
-              selectionMode={SelectionMode.none}
-              constrainMode={ConstrainMode.unconstrained}
-              layoutMode={DetailsListLayoutMode.justified}
-              onRenderDetailsHeader={renderStickyHeader}
-              onRenderRow={onRowClicked ? renderClickableRow : undefined}
-              onRenderCheckbox={onRenderCheckbox}
-              columns={finalColumns}
-              items={finalItems}
-              {...restProps}
-            />
-          </div>
-        )}
+        {errorMsg && <Alert message={errorMsg} type="error" showIcon />}
+        <div className={styles.cardTableContent}>
+          <MemoDetailsList
+            selectionMode={SelectionMode.none}
+            constrainMode={ConstrainMode.unconstrained}
+            layoutMode={DetailsListLayoutMode.justified}
+            onRenderDetailsHeader={renderStickyHeader}
+            onRenderRow={onRowClicked ? renderClickableRow : undefined}
+            onRenderCheckbox={onRenderCheckbox}
+            columns={finalColumns}
+            items={finalItems}
+            {...restProps}
+          />
+        </div>
       </AnimatedSkeleton>
     </Card>
   )

ui/lib/components/MetricChart/index.tsx

@@ -227,7 +227,7 @@ export default function MetricChart({
   ) {
     inner = (
       <div style={{ height: HEIGHT }}>
-        <Alert message={errorMsg || 'Error'} type="error" showIcon />
+        <Alert message={errorMsg} type="error" showIcon />
       </div>
     )
   } else {

ui/lib/utils/apiErrorsMsg.ts

@@ -2,6 +2,6 @@ import _ from 'lodash'
 
 export default function getApiErrorsMsg(errors: any[]) {
   return _.uniq(
-    _.map(errors, (err) => err?.response?.data?.message || '')
-  ).join('; ')
+    _.map(errors, (err) => err?.response?.data?.message || err?.msg || '')
+  )[0]
 }