fix: handle cases where the flag name causes API errors (or other err…

…ors occur)

This commit fixes a bug where the frontend would crash if the flag
name was invalid (such as `..`).

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;