fix: Show readable error in query response pane if present (#8518)

app/client/src/api/ActionAPI.tsx

@@ -93,6 +93,7 @@ export interface ActionResponse {
   suggestedWidgets?: SuggestedWidget[];
   messages?: Array<string>;
   errorType?: string;
+  readableError?: string;
 }
 
 export interface MoveActionRequest {

app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx

@@ -73,6 +73,7 @@ import SearchSnippets from "components/ads/SnippetButton";
 import EntityBottomTabs from "components/editorComponents/EntityBottomTabs";
 import { setCurrentTab } from "actions/debuggerActions";
 import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers";
+import { getErrorAsString } from "sagas/ActionExecution/errorUtils";
 
 const QueryFormContainer = styled.form`
   flex: 1;
@@ -387,6 +388,7 @@ type QueryFormProps = {
     isExecutionSuccess?: boolean;
     messages?: Array<string>;
     suggestedWidgets?: SuggestedWidget[];
+    readableError?: string;
   };
   runErrorMessage: string | undefined;
   location: {
@@ -451,7 +453,9 @@ export function EditorJSONtoForm(props: Props) {
 
   if (executedQueryData) {
     if (!executedQueryData.isExecutionSuccess) {
-      error = String(executedQueryData.body);
+      error = executedQueryData.readableError
+        ? getErrorAsString(executedQueryData.readableError)
+        : getErrorAsString(executedQueryData.body);
     } else if (isString(executedQueryData.body)) {
       output = JSON.parse(executedQueryData.body);
     } else {

app/client/src/sagas/ActionExecution/PluginActionSaga.ts

@@ -91,6 +91,7 @@ import {
   PluginTriggerFailureError,
   PluginActionExecutionError,
   UserCancelledActionExecutionError,
+  getErrorAsString,
 } from "sagas/ActionExecution/errorUtils";
 
 enum ActionResponseDataTypes {
@@ -419,16 +420,43 @@ function* runActionSaga(
     error = e.message;
   }
 
+  // Error should be readable error if present.
+  // Otherwise payload's body.
+  // Default to "An unexpected error occurred" if none is available
+
+  const readableError = payload.readableError
+    ? getErrorAsString(payload.readableError)
+    : undefined;
+
+  const payloadBodyError = payload.body
+    ? getErrorAsString(payload.body)
+    : undefined;
+
+  const defaultError = "An unexpected error occurred";
+
   if (isError) {
-    // Get an appropriate error message
-    if (payload.body) {
-      error = !isString(payload.body)
-        ? JSON.stringify(payload.body)
-        : payload.body;
-      if (!error) {
-        error = "An unexpected error occurred";
-      }
+    error = readableError || payloadBodyError || defaultError;
+
+    // In case of debugger, both the current error message
+    // and the readableError needs to be present,
+    // since the readableError may be malformed for certain errors.
+
+    const appsmithConsoleErrorMessageList = [
+      {
+        message: error,
+        type: PLATFORM_ERROR.PLUGIN_EXECUTION,
+        subType: payload.errorType,
+      },
+    ];
+
+    if (error === readableError && !!payloadBodyError) {
+      appsmithConsoleErrorMessageList.push({
+        message: payloadBodyError,
+        type: PLATFORM_ERROR.PLUGIN_EXECUTION,
+        subType: payload.errorType,
+      });
     }
+
     AppsmithConsole.addError({
       id: actionId,
       logType: LOG_TYPE.ACTION_EXECUTION_ERROR,
@@ -440,13 +468,7 @@ function* runActionSaga(
         name: actionObject.name,
         id: actionId,
       },
-      messages: [
-        {
-          message: error,
-          type: PLATFORM_ERROR.PLUGIN_EXECUTION,
-          subType: payload.errorType,
-        },
-      ],
+      messages: appsmithConsoleErrorMessageList,
       state: payload.request,
     });
 

app/client/src/sagas/ActionExecution/errorUtils.ts

@@ -8,6 +8,7 @@ import { ENTITY_TYPE } from "entities/AppsmithConsole";
 import { Toaster } from "components/ads/Toast";
 import { Variant } from "components/ads/common";
 import { ApiResponse } from "api/ApiResponses";
+import { isString } from "lodash";
 
 /*
  * The base trigger error that also logs the errors in the debugger.
@@ -108,3 +109,7 @@ export class UncaughtAppsmithPromiseError extends TriggerFailureError {
     super(message, triggerMeta, error);
   }
 }
+
+export const getErrorAsString = (error: unknown): string => {
+  return isString(error) ? error : JSON.stringify(error);
+};