🐛 Reduce rerendering on expression error

elastic · Oct 26, 2022 · 512859c · 512859c
1 parent 1b5ea75
commit 512859c
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/src/plugins/kibana_utils/public/render_complete/render_complete_dispatcher.ts b/src/plugins/kibana_utils/public/render_complete/render_complete_dispatcher.ts
@@ -38,6 +38,7 @@ export class RenderCompleteDispatcher {
   }
 
   public setEl(el?: HTMLElement) {
+    if (this.el !== el) {
     this.el = el;
     this.count = 0;
     if (el) this.dispatchInProgress();

diff --git a/x-pack/plugins/lens/public/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/embeddable/embeddable.tsx
@@ -493,7 +493,9 @@ export class Embeddable
   }
 
   onContainerStateChanged(containerState: LensEmbeddableInput) {
-    if (this.handleContainerStateChanged(containerState) || this.errors?.length) this.reload();
+    if (this.handleContainerStateChanged(containerState)) {
+      this.reload();
+    }
   }
 
   handleContainerStateChanged(containerState: LensEmbeddableInput): boolean {
@@ -611,6 +613,10 @@ export class Embeddable
     });
   };
 
+  private onError: ExpressionWrapperProps['onExpressionError'] = () => {
+    this.renderComplete.dispatchError();
+  };
+
   getExecutionContext() {
     if (this.savedVis) {
       const parentContext = this.parent?.getInput().executionContext || this.input.executionContext;
@@ -651,7 +657,7 @@ export class Embeddable
     this.updateOutput({
       ...this.getOutput(),
       loading: true,
-      error: undefined,
+      error: undefined, // Lens handles errors internally
     });
     this.renderComplete.dispatchInProgress();
 
@@ -683,6 +689,7 @@ export class Embeddable
           style={input.style}
           executionContext={this.getExecutionContext()}
           canEdit={this.getIsEditable() && input.viewMode === 'edit'}
+          onExpressionError={this.onError}
           onRuntimeError={() => {
             this.logError('runtime');
           }}

diff --git a/x-pack/plugins/lens/public/embeddable/expression_wrapper.tsx b/x-pack/plugins/lens/public/embeddable/expression_wrapper.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useRef } from 'react';
 import { I18nProvider } from '@kbn/i18n-react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiIcon, EuiEmptyPrompt } from '@elastic/eui';
@@ -45,6 +45,7 @@ export interface ExpressionWrapperProps {
   className?: string;
   canEdit: boolean;
   onRuntimeError: () => void;
+  onExpressionError: () => void;
   executionContext?: KibanaExecutionContext;
   lensInspector: LensInspector;
   noPadding?: boolean;
@@ -53,9 +54,28 @@ export interface ExpressionWrapperProps {
 interface VisualizationErrorProps {
   errors: ExpressionWrapperProps['errors'];
   canEdit: boolean;
+  onExpressionError: ExpressionWrapperProps['onExpressionError'];
+  searchSessionId?: string;
 }
 
-export function VisualizationErrorPanel({ errors, canEdit }: VisualizationErrorProps) {
+export function VisualizationErrorPanel({
+  errors,
+  canEdit,
+  onExpressionError,
+  searchSessionId,
+}: VisualizationErrorProps) {
+  // use a combination of sessionid + error messages to decide whether to trigger a rerender
+  const rerenderKey = `${searchSessionId || ''}-${errors
+    ?.map(({ longMessage }) => longMessage)
+    .join('-')}`;
+
+  const keyRef = useRef(rerenderKey);
+  // Skip error logging when no search session id is passed
+  if (keyRef.current !== rerenderKey) {
+    keyRef.current = rerenderKey;
+    onExpressionError();
+  }
+
   const showMore = errors && errors.length > 1;
   const canFixInLens = canEdit && errors?.some(({ type }) => type === 'fixable');
   return (
@@ -121,14 +141,20 @@ export function ExpressionWrapper({
   errors,
   canEdit,
   onRuntimeError,
+  onExpressionError,
   executionContext,
   lensInspector,
   noPadding,
 }: ExpressionWrapperProps) {
   return (
     <I18nProvider>
       {errors || expression === null || expression === '' ? (
-        <VisualizationErrorPanel errors={errors} canEdit={canEdit} />
+        <VisualizationErrorPanel
+          errors={errors}
+          canEdit={canEdit}
+          onExpressionError={onExpressionError}
+          searchSessionId={searchSessionId}
+        />
       ) : (
         <div className={classNames('lnsExpressionRenderer', className)} style={style}>
           <ExpressionRendererComponent