[Dashboard] Fix Invalid Filter Blank Screen (#120530)

* Add better error handling for saved dashboard load

src/plugins/dashboard/public/application/lib/filter_utils.ts

@@ -72,7 +72,7 @@ export const cleanFiltersForComparison = (filters: Filter[]) => {
 
 export const cleanFiltersForSerialize = (filters: Filter[]): Filter[] => {
   return filters.map((filter) => {
-    if (filter.meta.value) {
+    if (filter.meta?.value) {
       delete filter.meta.value;
     }
     return filter;

src/plugins/dashboard/public/application/lib/load_saved_dashboard_state.ts

@@ -8,10 +8,10 @@
 
 import _ from 'lodash';
 
+import { getDashboard60Warning, dashboardLoadingErrorStrings } from '../../dashboard_strings';
 import { savedObjectToDashboardState } from './convert_dashboard_state';
 import { DashboardState, DashboardBuildContext } from '../../types';
 import { DashboardConstants, DashboardSavedObject } from '../..';
-import { getDashboard60Warning } from '../../dashboard_strings';
 import { migrateLegacyQuery } from './migrate_legacy_query';
 import { cleanFiltersForSerialize } from './filter_utils';
 import { ViewMode } from '../../services/embeddable';
@@ -52,34 +52,33 @@ export const loadSavedDashboardState = async ({
     return;
   }
   await indexPatterns.ensureDefaultDataView();
-  let savedDashboard: DashboardSavedObject | undefined;
   try {
-    savedDashboard = (await savedDashboards.get({
+    const savedDashboard = (await savedDashboards.get({
       id: savedDashboardId,
       useResolve: true,
     })) as DashboardSavedObject;
+    const savedDashboardState = savedObjectToDashboardState({
+      savedDashboard,
+      usageCollection,
+      showWriteControls,
+      savedObjectsTagging,
+      version: initializerContext.env.packageInfo.version,
+    });
+
+    const isViewMode = !showWriteControls || Boolean(savedDashboard.id);
+    savedDashboardState.viewMode = isViewMode ? ViewMode.VIEW : ViewMode.EDIT;
+    savedDashboardState.filters = cleanFiltersForSerialize(savedDashboardState.filters);
+    savedDashboardState.query = migrateLegacyQuery(
+      savedDashboardState.query || queryString.getDefaultQuery()
+    );
+
+    return { savedDashboardState, savedDashboard };
   } catch (error) {
     // E.g. a corrupt or deleted dashboard
-    notifications.toasts.addDanger(error.message);
+    notifications.toasts.addDanger(
+      dashboardLoadingErrorStrings.getDashboardLoadError(error.message)
+    );
     history.push(DashboardConstants.LANDING_PAGE_PATH);
     return;
   }
-  if (!savedDashboard) return;
-
-  const savedDashboardState = savedObjectToDashboardState({
-    savedDashboard,
-    usageCollection,
-    showWriteControls,
-    savedObjectsTagging,
-    version: initializerContext.env.packageInfo.version,
-  });
-
-  const isViewMode = !showWriteControls || Boolean(savedDashboard.id);
-  savedDashboardState.viewMode = isViewMode ? ViewMode.VIEW : ViewMode.EDIT;
-  savedDashboardState.filters = cleanFiltersForSerialize(savedDashboardState.filters);
-  savedDashboardState.query = migrateLegacyQuery(
-    savedDashboardState.query || queryString.getDefaultQuery()
-  );
-
-  return { savedDashboardState, savedDashboard };
 };

src/plugins/dashboard/public/dashboard_strings.ts

@@ -359,6 +359,14 @@ export const panelStorageErrorStrings = {
     }),
 };
 
+export const dashboardLoadingErrorStrings = {
+  getDashboardLoadError: (message: string) =>
+    i18n.translate('dashboard.loadingError.errorMessage', {
+      defaultMessage: 'Error encountered while loading saved dashboard: {message}',
+      values: { message },
+    }),
+};
+
 /*
   Empty Screen
 */