mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01: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 `..`). 
This commit is contained in:
		
							parent
							
								
									5a036997dc
								
							
						
					
					
						commit
						a3dd51734e
					
				| @ -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; | ||||||
| 
 | 
 | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user