From 8d595bb765cfdf1ebd113d7dd83e44270eab1852 Mon Sep 17 00:00:00 2001
From: Alex <alex@appsmith.com>
Date: Wed, 19 Mar 2025 10:20:12 +0300
Subject: [PATCH] fix: display correct message for API reqeusts (#39786)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
Fixes an issue where incorrect/incomplete message is shown for API
reponses.

Fixes #39432

## Automation

/ok-to-test tags="@tag.IDE"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!WARNING]
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13925272629>
> Commit: 629191db7a352a05546d29b8b73b8020316226f2
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13925272629&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: @tag.IDE
> Spec:
> It seems like **no tests ran** 😔. We are not able to recognize it,
please check <a
href="https://github.com/appsmithorg/appsmith/actions/runs/13925272629"
target="_blank">workflow here</a>.
> <hr>Tue, 18 Mar 2025 14:44:01 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced error reporting now displays a clear title alongside the
detailed message, providing improved context for users encountering
issues.
- The streamlined error feedback offers a more structured presentation
to help users better understand and address any problems.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/ErrorView/ErrorView.tsx        |  4 +-
 .../utils/getErrorFromActionResponse.ts       | 52 +++++++++++++------
 2 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/components/ErrorView/ErrorView.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/components/ErrorView/ErrorView.tsx
index 4d422de257..0f346021b6 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/components/ErrorView/ErrorView.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/components/ErrorView/ErrorView.tsx
@@ -32,7 +32,7 @@ export const ErrorView: React.FC<ErrorViewProps> = ({
   handleJsonWrapperClick,
   tooltipContent,
 }) => {
-  const errorMessage = getErrorMessageFromActionResponse(
+  const [errorTitle, errorMessage] = getErrorMessageFromActionResponse(
     actionResponse,
     action.pluginType,
   );
@@ -79,7 +79,7 @@ export const ErrorView: React.FC<ErrorViewProps> = ({
             Request has failed to execute
             {errorMessage && ":"}
           </Styled.ErrorDefaultMessage>
-          <div data-testid="t--response-error">{errorMessage}</div>
+          <div data-testid="t--response-error">{errorTitle}</div>
           <LogHelper
             logType={LOG_TYPE.ACTION_EXECUTION_ERROR}
             message={`${errorMessage}`}
diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/getErrorFromActionResponse.ts b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/getErrorFromActionResponse.ts
index 9f877f1e59..be4d512e21 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/getErrorFromActionResponse.ts
+++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Response/utils/getErrorFromActionResponse.ts
@@ -1,32 +1,52 @@
+// Type imports
 import type { ActionResponse } from "api/ActionAPI";
+
+// Application-specific imports
 import { PluginType } from "entities/Plugin";
 import { DEFAULT_ERROR_MESSAGE } from "../constants";
 
+/**
+ * Checks if the plugin type is supported for detailed error handling
+ */
+const isSupportedPluginTypeForErrorDetails = (
+  pluginType?: PluginType,
+): boolean => {
+  return (
+    pluginType === PluginType.DB ||
+    pluginType === PluginType.SAAS ||
+    pluginType === PluginType.EXTERNAL_SAAS ||
+    pluginType === PluginType.API
+  );
+};
+
 /**
  * Retrieves the error message from the action response.
+ * Returns a tuple of [errorTitle, errorMessage]
  */
 export const getErrorMessageFromActionResponse = (
   actionResponse?: ActionResponse,
   pluginType?: PluginType,
 ) => {
-  // Return default error message if action response is not provided
-  if (!actionResponse) return DEFAULT_ERROR_MESSAGE;
-
-  const { body, pluginErrorDetails } = actionResponse;
-
-  if (pluginErrorDetails) {
-    // Return downstream error message if available
-    // Otherwise, return Appsmith error message
-    return (
-      pluginErrorDetails.downstreamErrorMessage ||
-      pluginErrorDetails.appsmithErrorMessage
-    );
+  if (!actionResponse) {
+    return [DEFAULT_ERROR_MESSAGE, DEFAULT_ERROR_MESSAGE];
   }
 
-  // Return body if plugin type is DB/SAAS/ExternalSAAS, otherwise return default error message
-  return pluginType === PluginType.DB ||
-    pluginType === PluginType.SAAS ||
-    pluginType === PluginType.EXTERNAL_SAAS
+  const { body, pluginErrorDetails, statusCode } = actionResponse;
+
+  // Determine base error message based on plugin type
+  let errorMessage = isSupportedPluginTypeForErrorDetails(pluginType)
     ? body
     : DEFAULT_ERROR_MESSAGE;
+
+  // Override with plugin-specific error details if available
+  if (pluginErrorDetails) {
+    errorMessage =
+      pluginErrorDetails.downstreamErrorMessage ||
+      pluginErrorDetails.appsmithErrorMessage;
+  }
+
+  // For API plugin types, use status code as the title
+  const errorTitle = pluginType === PluginType.API ? statusCode : errorMessage;
+
+  return [errorTitle, errorMessage];
 };