From 5b4b8133b159a9b560e69f6415aef1e6483540da Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 14 Oct 2024 11:42:58 +0200
Subject: [PATCH] fix: handle cases where the flag name causes API errors (or
 other errors occur)

This commit fixes a bug where the frontend would crash if the flag
name was invalid (such as `..`).
---
 .../personalDashboard/FlagMetricsChart.tsx    | 33 +++++++++++++------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
index 8312459f74ed..31f7ab284887 100644
--- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
+++ b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
@@ -121,10 +121,12 @@ const useFlagMetrics = (
     environment: string | null,
     hoursBack: number,
 ) => {
-    const { featureMetrics: metrics = [], loading } = useFeatureMetricsRaw(
-        flagName,
-        hoursBack,
-    );
+    const {
+        featureMetrics: metrics = [],
+        loading,
+        error,
+    } = useFeatureMetricsRaw(flagName, hoursBack);
+
     const sortedMetrics = useMemo(() => {
         return [...metrics].sort((metricA, metricB) => {
             return metricA.timestamp.localeCompare(metricB.timestamp);
@@ -151,7 +153,7 @@ const useFlagMetrics = (
         return createBarChartOptions(theme, hoursBack, locationSettings);
     }, [theme, hoursBack, locationSettings]);
 
-    return { data, options, loading };
+    return { data, options, loading, error };
 };
 
 const EnvironmentSelect: FC<{
@@ -222,11 +224,22 @@ export const FlagMetricsChart: FC<{
     const { environment, setEnvironment, activeEnvironments } =
         useMetricsEnvironments(flag.project, flag.name);
 
-    const { data, options, loading } = useFlagMetrics(
-        flag.name,
-        environment,
-        hoursBack,
-    );
+    const {
+        data,
+        options,
+        loading,
+        error: metricsError,
+    } = useFlagMetrics(flag.name, environment, hoursBack);
+
+    if (metricsError) {
+        return (
+            <ChartContainer>
+                <PlaceholderFlagMetricsChart
+                    label={`Couldn't fetch metrics for the current flag. This may be a transient error, or your flag name ("${flag.name}") may be causing issues.`}
+                />
+            </ChartContainer>
+        );
+    }
 
     const noData = data.datasets[0].data.length === 0;