diff --git a/static/app/components/metrics/metricQuerySelect.tsx b/static/app/components/metrics/metricQuerySelect.tsx index f5d5320494a1e5..9dc87eb9ae35c2 100644 --- a/static/app/components/metrics/metricQuerySelect.tsx +++ b/static/app/components/metrics/metricQuerySelect.tsx @@ -1,4 +1,4 @@ -import {useCallback, useMemo} from 'react'; +import {useCallback, useEffect, useMemo} from 'react'; import styled from '@emotion/styled'; import {Button} from 'sentry/components/button'; @@ -62,6 +62,13 @@ export function MetricQuerySelect({onChange, conditionId, mri}: Props) { pageFilters.selection.projects[0] === -1 || pageFilters.selection.projects.length === 0; + // If the selected condition cannot be found, select the first condition + useEffect(() => { + if (!selectedCondition && spanConditions.length > 0) { + onChange(spanConditions[0].id); + } + }, [onChange, selectedCondition, spanConditions]); + const options: SelectOptionOrSection[] = useMemo(() => { let builtInOption: SelectOption | null = null; const sectionMap = new Map[]>(); diff --git a/static/app/components/metrics/mriSelect/index.tsx b/static/app/components/metrics/mriSelect/index.tsx index e5033d9a9f5855..76e79f59e5727a 100644 --- a/static/app/components/metrics/mriSelect/index.tsx +++ b/static/app/components/metrics/mriSelect/index.tsx @@ -19,6 +19,7 @@ import { isTransactionDuration, isTransactionMeasurement, } from 'sentry/utils/metrics'; +import {emptyMetricsQueryWidget} from 'sentry/utils/metrics/constants'; import { hasCustomMetricsExtractionRules, hasMetricsNewInputs, @@ -170,6 +171,14 @@ export const MRISelect = memo(function MRISelect({ const metricsWithDuplicateNames = useMetricsWithDuplicateNames(metricsMeta); const filteredMRIs = useFilteredMRIs(metricsMeta, inputValue, mriMode); + // If the mri is not in the list of metrics, set it to the default metric + const selectedMeta = metricsMeta.find(metric => metric.mri === value); + useEffect(() => { + if (!selectedMeta) { + onChange(emptyMetricsQueryWidget.mri); + } + }, [onChange, selectedMeta]); + const handleFilterOption = useCallback( (option: ComboBoxOption) => { return filteredMRIs.has(option.value);