[Lens] Embeddable error telemetry

x-pack/plugins/lens/kibana.json

@@ -35,6 +35,7 @@
     "savedObjects",
     "kibanaUtils",
     "kibanaReact",
-    "embeddable"
+    "embeddable",
+    "usageCollection"
   ]
 }

x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx

@@ -24,6 +24,8 @@ import { toExpression, Ast } from '@kbn/interpreter/common';
 import { DefaultInspectorAdapters, RenderMode } from 'src/plugins/expressions';
 import { map, distinctUntilChanged, skip } from 'rxjs/operators';
 import isEqual from 'fast-deep-equal';
+import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
+import { METRIC_TYPE } from '../../../../../../src/plugins/usage_collection/public';
 import {
   ExpressionRendererEvent,
   ReactExpressionRendererType,
@@ -51,7 +53,7 @@ import {
 } from '../../types';
 
 import { IndexPatternsContract } from '../../../../../../src/plugins/data/public';
-import { getEditPath, DOC_TYPE } from '../../../common';
+import { getEditPath, DOC_TYPE, PLUGIN_ID } from '../../../common';
 import { IBasePath } from '../../../../../../src/core/public';
 import { LensAttributeService } from '../../lens_attribute_service';
 import type { ErrorMessage } from '../types';
@@ -95,6 +97,7 @@ export interface LensEmbeddableDeps {
   getTrigger?: UiActionsStart['getTrigger'] | undefined;
   getTriggerCompatibleActions?: UiActionsStart['getTriggerCompatibleActions'];
   capabilities: { canSaveVisualizations: boolean; canSaveDashboards: boolean };
+  usageCollection?: UsageCollectionSetup;
 }
 
 export class Embeddable
@@ -113,6 +116,14 @@ export class Embeddable
   private inputReloadSubscriptions: Subscription[];
   private isDestroyed?: boolean;
 
+  private logError(type: 'runtime' | 'validation') {
+    this.deps.usageCollection?.reportUiCounter(
+      PLUGIN_ID,
+      METRIC_TYPE.COUNT,
+      type === 'runtime' ? 'embeddable_runtime_error' : 'embeddable_validation_error'
+    );
+  }
+
   private externalSearchContext: {
     timeRange?: TimeRange;
     query?: Query;
@@ -255,6 +266,9 @@ export class Embeddable
     const { ast, errors } = await this.deps.documentToExpression(this.savedVis);
     this.errors = errors;
     this.expression = ast ? toExpression(ast) : null;
+    if (errors) {
+      this.logError('validation');
+    }
     await this.initializeOutput();
     this.isInitialized = true;
   }
@@ -326,6 +340,9 @@ export class Embeddable
         className={input.className}
         style={input.style}
         canEdit={this.getIsEditable() && input.viewMode === 'edit'}
+        onRuntimeError={() => {
+          this.logError('runtime');
+        }}
       />,
       domNode
     );

x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable_factory.ts

@@ -10,6 +10,7 @@ import { i18n } from '@kbn/i18n';
 import { RecursiveReadonly } from '@kbn/utility-types';
 import { Ast } from '@kbn/interpreter/target/common';
 import { EmbeddableStateWithType } from 'src/plugins/embeddable/common';
+import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
 import {
   IndexPatternsContract,
   TimefilterContract,
@@ -34,6 +35,7 @@ export interface LensEmbeddableStartServices {
   expressionRenderer: ReactExpressionRendererType;
   indexPatternService: IndexPatternsContract;
   uiActions?: UiActionsStart;
+  usageCollection?: UsageCollectionSetup;
   documentToExpression: (
     doc: Document
   ) => Promise<{ ast: Ast | null; errors: ErrorMessage[] | undefined }>;
@@ -87,6 +89,7 @@ export class EmbeddableFactory implements EmbeddableFactoryDefinition {
       attributeService,
       indexPatternService,
       capabilities,
+      usageCollection,
     } = await this.getStartServices();
 
     const { Embeddable } = await import('../../async_services');
@@ -105,6 +108,7 @@ export class EmbeddableFactory implements EmbeddableFactoryDefinition {
           canSaveDashboards: Boolean(capabilities.dashboard?.showWriteControls),
           canSaveVisualizations: Boolean(capabilities.visualize.save),
         },
+        usageCollection,
       },
       input,
       parent

x-pack/plugins/lens/public/editor_frame_service/embeddable/expression_wrapper.tsx

@@ -38,6 +38,7 @@ export interface ExpressionWrapperProps {
   style?: React.CSSProperties;
   className?: string;
   canEdit: boolean;
+  onRuntimeError: () => void;
 }
 
 interface VisualizationErrorProps {
@@ -106,6 +107,7 @@ export function ExpressionWrapper({
   className,
   errors,
   canEdit,
+  onRuntimeError,
 }: ExpressionWrapperProps) {
   return (
     <I18nProvider>
@@ -123,20 +125,23 @@ export function ExpressionWrapper({
             onData$={onData$}
             renderMode={renderMode}
             syncColors={syncColors}
-            renderError={(errorMessage, error) => (
-              <div data-test-subj="expression-renderer-error">
-                <EuiFlexGroup direction="column" alignItems="center" justifyContent="center">
-                  <EuiFlexItem>
-                    <EuiIcon type="alert" color="danger" />
-                  </EuiFlexItem>
-                  <EuiFlexItem>
-                    {(getOriginalRequestErrorMessages(error) || [errorMessage]).map((message) => (
-                      <EuiText size="s">{message}</EuiText>
-                    ))}
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </div>
-            )}
+            renderError={(errorMessage, error) => {
+              onRuntimeError();
+              return (
+                <div data-test-subj="expression-renderer-error">
+                  <EuiFlexGroup direction="column" alignItems="center" justifyContent="center">
+                    <EuiFlexItem>
+                      <EuiIcon type="alert" color="danger" />
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                      {(getOriginalRequestErrorMessages(error) || [errorMessage]).map((message) => (
+                        <EuiText size="s">{message}</EuiText>
+                      ))}
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </div>
+              );
+            }}
             onEvent={handleEvent}
             hasCompatibleActions={hasCompatibleActions}
           />

x-pack/plugins/lens/public/editor_frame_service/service.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { I18nProvider } from '@kbn/i18n/react';
 import { CoreSetup, CoreStart } from 'kibana/public';
+import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
 import { ExpressionsSetup, ExpressionsStart } from '../../../../../src/plugins/expressions/public';
 import { EmbeddableSetup, EmbeddableStart } from '../../../../../src/plugins/embeddable/public';
 import {
@@ -35,6 +36,7 @@ export interface EditorFrameSetupPlugins {
   embeddable?: EmbeddableSetup;
   expressions: ExpressionsSetup;
   charts: ChartsPluginSetup;
+  usageCollection?: UsageCollectionSetup;
 }
 
 export interface EditorFrameStartPlugins {
@@ -101,6 +103,7 @@ export class EditorFrameService {
         documentToExpression: this.documentToExpression,
         indexPatternService: deps.data.indexPatterns,
         uiActions: deps.uiActions,
+        usageCollection: plugins.usageCollection,
       };
     };
 

x-pack/plugins/lens/public/plugin.ts

@@ -6,6 +6,7 @@
  */
 
 import { AppMountParameters, CoreSetup, CoreStart } from 'kibana/public';
+import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
 import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../../src/plugins/data/public';
 import { EmbeddableSetup, EmbeddableStart } from '../../../../src/plugins/embeddable/public';
 import { DashboardStart } from '../../../../src/plugins/dashboard/public';
@@ -62,6 +63,7 @@ export interface LensPluginSetupDependencies {
   visualizations: VisualizationsSetup;
   charts: ChartsPluginSetup;
   globalSearch?: GlobalSearchPluginSetup;
+  usageCollection?: UsageCollectionSetup;
 }
 
 export interface LensPluginStartDependencies {
@@ -139,6 +141,7 @@ export class LensPlugin {
       visualizations,
       charts,
       globalSearch,
+      usageCollection,
     }: LensPluginSetupDependencies
   ) {
     this.attributeService = async () => {
@@ -153,6 +156,7 @@ export class LensPlugin {
         embeddable,
         charts,
         expressions,
+        usageCollection,
       },
       this.attributeService
     );