Surface vis loader errors in the UI. (#30594) (#31811)

src/legacy/ui/public/visualize/loader/embedded_visualize_handler.ts

@@ -46,6 +46,9 @@ import {
 } from './types';
 import { queryGeohashBounds } from './utils';
 
+import { i18n } from '@kbn/i18n';
+import { toastNotifications } from 'ui/notify';
+
 interface EmbeddedVisualizeHandlerParams extends VisualizeLoaderParams {
   Private: IPrivate;
   queryFilter: any;
@@ -428,12 +431,47 @@ export class EmbeddedVisualizeHandler {
     this.dataLoaderParams.inspectorAdapters = this.inspectorAdapters;
 
     this.vis.filters = { timeRange: this.dataLoaderParams.timeRange };
+    this.vis.requestError = undefined;
+    this.vis.showRequestError = false;
+
+    return this.dataLoader
+      .fetch(this.dataLoaderParams)
+      .then(data => {
+        // Pipeline responses never throw errors, so we need to check for
+        // `type: 'error'`, and then throw so it can be caught below.
+        // TODO: We should revisit this after we have fully migrated
+        // to the new expression pipeline infrastructure.
+        if (data && data.type === 'error') {
+          throw data.error;
+        }
 
-    return this.dataLoader.fetch(this.dataLoaderParams).then(data => {
-      if (data && data.value) {
-        this.dataSubject.next(data.value);
-      }
-      return data;
+        if (data && data.value) {
+          this.dataSubject.next(data.value);
+        }
+        return data;
+      })
+      .catch(this.handleDataLoaderError);
+  };
+
+  /**
+   * When dataLoader returns an error, we need to make sure it surfaces in the UI.
+   *
+   * TODO: Eventually we should add some custom error messages for issues that are
+   * frequently encountered by users.
+   */
+  private handleDataLoaderError = (error: any): void => {
+    // TODO: come up with a general way to cancel execution of pipeline expressions.
+    this.dataLoaderParams.searchSource.cancelQueued();
+
+    this.vis.requestError = error;
+    this.vis.showRequestError =
+      error.type && ['NO_OP_SEARCH_STRATEGY', 'UNSUPPORTED_QUERY'].includes(error.type);
+
+    toastNotifications.addDanger({
+      title: i18n.translate('common.ui.visualize.dataLoaderError', {
+        defaultMessage: 'Error in visualization',
+      }),
+      text: error.message,
     });
   };
 

src/legacy/ui/public/visualize/loader/pipeline_data_loader.ts

@@ -24,8 +24,6 @@ export class PipelineDataLoader {
   constructor(private readonly vis: Vis) {}
 
   public async fetch(params: RequestHandlerParams): Promise<any> {
-    this.vis.requestError = undefined;
-    this.vis.showRequestError = false;
     this.vis.pipelineExpression = buildPipeline(this.vis, params);
 
     return await runPipeline(