1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-24 01:18:01 +02:00

fix: handle cases where the flag name causes API errors (or other errors occur) (#8439)

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


![image](https://github.com/user-attachments/assets/6f41f0d3-4d5f-433d-ad53-899d22b02d89)
This commit is contained in:
Thomas Heartman 2024-10-14 11:48:22 +02:00 committed by GitHub
parent 5a036997dc
commit a3dd51734e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -121,10 +121,12 @@ const useFlagMetrics = (
environment: string | null, environment: string | null,
hoursBack: number, hoursBack: number,
) => { ) => {
const { featureMetrics: metrics = [], loading } = useFeatureMetricsRaw( const {
flagName, featureMetrics: metrics = [],
hoursBack, loading,
); error,
} = useFeatureMetricsRaw(flagName, hoursBack);
const sortedMetrics = useMemo(() => { const sortedMetrics = useMemo(() => {
return [...metrics].sort((metricA, metricB) => { return [...metrics].sort((metricA, metricB) => {
return metricA.timestamp.localeCompare(metricB.timestamp); return metricA.timestamp.localeCompare(metricB.timestamp);
@ -151,7 +153,7 @@ const useFlagMetrics = (
return createBarChartOptions(theme, hoursBack, locationSettings); return createBarChartOptions(theme, hoursBack, locationSettings);
}, [theme, hoursBack, locationSettings]); }, [theme, hoursBack, locationSettings]);
return { data, options, loading }; return { data, options, loading, error };
}; };
const EnvironmentSelect: FC<{ const EnvironmentSelect: FC<{
@ -222,11 +224,22 @@ export const FlagMetricsChart: FC<{
const { environment, setEnvironment, activeEnvironments } = const { environment, setEnvironment, activeEnvironments } =
useMetricsEnvironments(flag.project, flag.name); useMetricsEnvironments(flag.project, flag.name);
const { data, options, loading } = useFlagMetrics( const {
flag.name, data,
environment, options,
hoursBack, 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; const noData = data.datasets[0].data.length === 0;