PMM-12784 Better error handling for explain

pmm-app/src/pmm-qan/panel/components/Details/Explain/Explain.tools.ts

@@ -1,5 +1,5 @@
 import { logger } from 'shared/core/logger';
-import { ActionResult, getActionResult } from 'shared/components/Actions';
+import { ActionResult, getActionResult, catchActionError } from 'shared/components/Actions';
 import { Databases } from 'shared/core';
 import { mongodbMethods, mysqlMethods } from '../database-models';
 import { DatabasesType, QueryExampleResponseItem } from '../Details.types';
@@ -80,8 +80,8 @@ export const fetchExplains = async (
       };
 
       const [classicResult, jsonResult] = await Promise.all([
-        mysqlMethods.getExplain(payload).then(getActionResult),
-        mysqlMethods.getExplainJSON(payload).then(getActionResult),
+        mysqlMethods.getExplain(payload).then(getActionResult).catch(catchActionError),
+        mysqlMethods.getExplainJSON(payload).then(getActionResult).catch(catchActionError),
       ]);
 
       const jsonValue = parseExplain(jsonResult);
@@ -95,7 +95,10 @@ export const fetchExplains = async (
     }
 
     if (databaseType === Databases.mongodb) {
-      const jsonResult = await mongodbMethods.getExplainJSON({ example }).then(getActionResult);
+      const jsonResult = await mongodbMethods
+        .getExplainJSON({ example })
+        .then(getActionResult)
+        .catch(catchActionError);
 
       return {
         jsonExplain: jsonResult,

pmm-app/src/pmm-qan/panel/components/Details/database-models/mysql/mysql.ts

@@ -45,30 +45,18 @@ export const mysqlMethods = {
   },
 
   getExplainJSON: async ({ example, queryId, placeholders }) => {
-    try {
-      const payload = getExplainPayload(example, queryId, placeholders);
+    const payload = getExplainPayload(example, queryId, placeholders);
 
-      const result = await MysqlDatabaseService.getExplainJSON(payload);
+    const result = await MysqlDatabaseService.getExplainJSON(payload);
 
-      return result.mysql_explain_json.action_id;
-    } catch (e) {
-      console.error(e);
-
-      return null;
-    }
+    return result.mysql_explain_json.action_id;
   },
 
   getExplain: async ({ example, queryId, placeholders }) => {
-    try {
-      const payload = getExplainPayload(example, queryId, placeholders);
+    const payload = getExplainPayload(example, queryId, placeholders);
 
-      const result = await MysqlDatabaseService.getExplain(payload);
+    const result = await MysqlDatabaseService.getExplain(payload);
 
-      return result.mysql_explain.action_id;
-    } catch (e) {
-      console.error(e);
-
-      return null;
-    }
+    return result.mysql_explain.action_id;
   },
 };

pmm-app/src/shared/components/Actions/Actions.utils.ts

@@ -1,10 +1,19 @@
 import { backOff } from 'exponential-backoff';
+import { AxiosError } from 'axios';
 import { ActionResult } from './Actions.types';
 import { ActionsService } from './Actions.service';
 
 const INTERVAL = 500;
 
 export const getActionResult = async (actionId: string): Promise<ActionResult> => {
+  if (actionId === null) {
+    return {
+      loading: false,
+      value: null,
+      error: 'Unknown error',
+    };
+  }
+
   const getData = async () => {
     const result = await ActionsService.getActionResult({
       action_id: actionId,
@@ -47,3 +56,19 @@ export const getActionResult = async (actionId: string): Promise<ActionResult> =
     error: '',
   };
 };
+
+export const catchActionError = (error: Error): Promise<ActionResult> => {
+  if (error instanceof AxiosError) {
+    return Promise.resolve({
+      loading: false,
+      value: null,
+      error: error.response?.data?.message,
+    });
+  }
+
+  return Promise.resolve({
+    loading: false,
+    value: null,
+    error: error.message,
+  });
+};

pmm-app/src/shared/components/Actions/index.ts

@@ -1,2 +1,2 @@
-export { getActionResult } from './Actions.utils';
+export { getActionResult, catchActionError } from './Actions.utils';
 export * from './Actions.types';