[#12240] Display message when heatmap API error occurs

Author: jihea-park

web-frontend/src/main/v3/packages/ui/src/components/Heatmap/HeatmapFetcher.tsx

@@ -6,6 +6,7 @@ import {
   useGetHeatmapAppData,
 } from '@pinpoint-fe/ui/src/hooks';
 import { APP_SETTING_KEYS, GetHeatmapAppData } from '@pinpoint-fe/ui/src/constants';
+import { useTranslation } from 'react-i18next';
 
 const DefaultAxisY = [0, 10000];
 
@@ -14,6 +15,7 @@ export type HeatmapFetcherProps = {
 } & Pick<HeatmapChartCoreProps, 'toolbarOption' | 'nodeData'>;
 
 export const HeatmapFetcher = ({ nodeData, agentId, ...props }: HeatmapFetcherProps) => {
+  const { t } = useTranslation();
   const { dateRange } = useServerMapSearchParameters();
   const [setting] = useStoragedSetting(APP_SETTING_KEYS.HEATMAP_SETTING);
 
@@ -25,7 +27,7 @@ export const HeatmapFetcher = ({ nodeData, agentId, ...props }: HeatmapFetcherPr
     maxElapsedTime: Number(setting?.yMax) || DefaultAxisY[1],
     agentId: agentId,
   });
-  const { data, isLoading } = useGetHeatmapAppData(parameters);
+  const { data, isLoading, error } = useGetHeatmapAppData(parameters);
 
   React.useEffect(() => {
     setParameters({
@@ -45,5 +47,26 @@ export const HeatmapFetcher = ({ nodeData, agentId, ...props }: HeatmapFetcherPr
     agentId,
   ]);
 
-  return <HeatmapChartCore isLoading={isLoading} data={data} nodeData={nodeData} {...props} />;
+  return (
+    <div className="relative w-full h-full">
+      {error && (
+        <div className="absolute inset-0 z-[1000] flex items-center justify-center">
+          <div className="absolute inset-0 opacity-50 bg-background"></div>
+          <div className="z-10 text-red-500">
+            {t('SERVER_MAP.HEATMAP_API_ERROR_MESSAGE')
+              .split('\n')
+              .map((txt, i) => (
+                <p key={i}>{txt}</p>
+              ))}
+          </div>
+        </div>
+      )}
+      <HeatmapChartCore
+        isLoading={isLoading}
+        data={data || ({} as GetHeatmapAppData.Response)}
+        nodeData={nodeData}
+        {...props}
+      />
+    </div>
+  );
 };

web-frontend/src/main/v3/packages/ui/src/components/Heatmap/core/HeatmapChart.tsx

@@ -151,7 +151,7 @@ const HeatmapChart = React.forwardRef(
 
       const xAxisData = heatmapData?.map((row) => String(row.timestamp)) || [];
       const yAxisData =
-        heatmapData?.[heatmapData?.length - 1].cellDataList
+        heatmapData?.[heatmapData?.length - 1]?.cellDataList
           ?.map((cell) => String(cell.elapsedTime))
           ?.filter((yValue) => Number(yValue) >= setting.yMin && Number(yValue) <= setting.yMax) ||
         [];

web-frontend/src/main/v3/packages/ui/src/constants/locales/en.json

@@ -55,7 +55,8 @@
     "SELECT_URL_INFO": "Select a path info below"
   },
   "SERVER_MAP": {
-    "SCATTER_CHART_STATIC_WARN": "To view the scatter chart by agent,\nplease switch the heatmap to a scatter chart."
+    "SCATTER_CHART_STATIC_WARN": "To view the scatter chart by agent,\nplease switch the heatmap to a scatter chart.",
+    "HEATMAP_API_ERROR_MESSAGE": "If the heatmap call error persists,\nplease refer to the scatter chart."
   },
   "TRANSACTION_LIST": {
     "SELECT_TRANSACTION": "Select your transaction",

web-frontend/src/main/v3/packages/ui/src/constants/locales/ko.json

@@ -55,7 +55,8 @@
     "SELECT_URL_INFO": "아래에서 Path 정보를 선택하세요."
   },
   "SERVER_MAP": {
-    "SCATTER_CHART_STATIC_WARN": "Agent별 scatter chart를 보기 위해\nheatmap을 scatter chart로 변경해 주세요."
+    "SCATTER_CHART_STATIC_WARN": "Agent별 scatter chart를 보기 위해\nheatmap을 scatter chart로 변경해 주세요.",
+    "HEATMAP_API_ERROR_MESSAGE": "Heatmap 호출 에러가 반복될 경우,\nscatter 차트를 참고해 주세요."
   },
   "TRANSACTION_LIST": {
     "SELECT_TRANSACTION": "Transaction을 선택하세요.",

web-frontend/src/main/v3/packages/ui/src/hooks/api/useGetHeatmapAppData.ts

@@ -6,10 +6,10 @@ import { queryFn } from './reactQueryHelper';
 
 export const useGetHeatmapAppData = (parameters: GetHeatmapAppData.Parameters) => {
   const queryString = `?${convertParamsToQueryString(parameters)}`;
-  const { data, isLoading, refetch } = useQuery<GetHeatmapAppData.Response>({
+  const { data, isLoading, refetch, error } = useQuery<GetHeatmapAppData.Response>({
     queryKey: [END_POINTS.HEATMAP_APP_DATA, parameters],
     queryFn: queryFn(`${END_POINTS.HEATMAP_APP_DATA}${queryString}`),
     enabled: !!queryString,
   });
-  return { data, isLoading, refetch };
+  return { data, isLoading, refetch, error };
 };