Show error if field is not found during filter rendering

src/plugins/data/common/es_query/filters/get_display_value.ts

@@ -27,7 +27,11 @@ function getValueFormatter(indexPattern?: IIndexPattern, key?: string) {
   let format = get(indexPattern, ['fields', 'byName', key, 'format']);
   if (!format && (indexPattern.fields as any).getByName) {
     // TODO: Why is indexPatterns sometimes a map and sometimes an array?
-    format = ((indexPattern.fields as any).getByName(key) as IFieldType).format;
+    const field: IFieldType = (indexPattern.fields as any).getByName(key);
+    if (!field) {
+      throw new Error(`Field ${key} not found`);
+    }
+    format = field?.format;
   }
   return format;
 }

src/plugins/data/public/ui/filter_bar/filter_item.tsx

@@ -33,6 +33,7 @@ import {
   toggleFilterPinned,
   toggleFilterDisabled,
 } from '../../../common';
+import { getNotifications } from '../../services';
 
 interface Props {
   id: string;
@@ -75,7 +76,18 @@ class FilterItemUI extends Component<Props, State> {
       this.props.className
     );
 
-    const valueLabel = getDisplayValueFromFilter(filter, this.props.indexPatterns);
+    let valueLabel;
+    try {
+      valueLabel = getDisplayValueFromFilter(filter, this.props.indexPatterns);
+    } catch (e) {
+      getNotifications().toasts.addError(e, {
+        title: this.props.intl.formatMessage({
+          id: 'data.filter.filterBar.labelError',
+          defaultMessage: 'Failed to render filter',
+        }),
+      });
+      return null;
+    }
     const dataTestSubjKey = filter.meta.key ? `filter-key-${filter.meta.key}` : '';
     const dataTestSubjValue = filter.meta.value ? `filter-value-${valueLabel}` : '';
     const dataTestSubjDisabled = `filter-${