From 4fe9e578470a2ad56a13fcaefc18ccc0874411d3 Mon Sep 17 00:00:00 2001
From: Mikhail Wahib <112858669+MikhailWahib@users.noreply.github.com>
Date: Mon, 8 Dec 2025 19:23:55 +0200
Subject: [PATCH] fix(http-request-action): pretty-print JSON errors in test
 HTTP requeset hook (#16387)

Before:
<img width="415" height="319" alt="Screenshot from 2025-12-08 09-00-48"
src="https://github.com/user-attachments/assets/bd99cf74-d278-4344-a3c2-e7740d7d058b"
/>

After:
<img width="399" height="371" alt="Screenshot from 2025-12-08 08-59-05"
src="https://github.com/user-attachments/assets/5c75bded-1632-4a9a-9b51-ed3c83f36b3b"
/>

fixes #16243

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../components/HttpRequestExecutionResult.tsx     |  5 +++--
 .../hooks/__tests__/useTestHttpRequest.test.ts    |  5 ++++-
 .../hooks/useTestHttpRequest.ts                   | 15 ++++++++++++---
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/HttpRequestExecutionResult.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/HttpRequestExecutionResult.tsx
index ecd2c6c873..34cc1382c9 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/HttpRequestExecutionResult.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/HttpRequestExecutionResult.tsx
@@ -3,6 +3,7 @@ import {
   WorkflowStepExecutionResult,
 } from '@/workflow/components/WorkflowStepExecutionResult';
 import type { HttpRequestTestData } from '@/workflow/workflow-steps/workflow-actions/http-request-action/types/HttpRequestTestData';
+import { t } from '@lingui/core/macro';
 
 export const HttpRequestExecutionResult = ({
   httpRequestTestData,
@@ -45,8 +46,8 @@ export const HttpRequestExecutionResult = ({
       isSuccess &&
       Object.keys(httpRequestTestData.output.headers || {}).length > 0
         ? `${Object.keys(httpRequestTestData.output.headers || {}).length} headers received`
-        : isError && httpRequestTestData.output.error
-          ? httpRequestTestData.output.error
+        : isError
+          ? t`An error occurred`
           : undefined,
   };
 
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/hooks/__tests__/useTestHttpRequest.test.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/hooks/__tests__/useTestHttpRequest.test.ts
index 88abb2681f..999a417050 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/hooks/__tests__/useTestHttpRequest.test.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/hooks/__tests__/useTestHttpRequest.test.ts
@@ -397,7 +397,10 @@ describe('useTestHttpRequest', () => {
     });
 
     expect(result.current.httpRequestTestData.output?.error).toBe(
-      '{"code":"ERR_CONNECTION_REFUSED","details":"Connection refused"}',
+      `{
+  "code": "ERR_CONNECTION_REFUSED",
+  "details": "Connection refused"
+}`,
     );
   });
 
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/hooks/useTestHttpRequest.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/hooks/useTestHttpRequest.ts
index 68fca28926..f47d0a99f1 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/hooks/useTestHttpRequest.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/hooks/useTestHttpRequest.ts
@@ -9,7 +9,7 @@ import { useMutation } from '@apollo/client';
 import { isObject, isString } from '@sniptt/guards';
 import { useState } from 'react';
 import { useRecoilState } from 'recoil';
-import { isDefined, resolveInput } from 'twenty-shared/utils';
+import { isDefined, parseJson, resolveInput } from 'twenty-shared/utils';
 import {
   type TestHttpRequestInput,
   type TestHttpRequestMutation,
@@ -125,9 +125,18 @@ export const useTestHttpRequest = (actionId: string) => {
       }
     } catch (error) {
       const duration = Date.now() - startTime;
-      const errorMessage =
+
+      const rawErrorMessage =
         error instanceof Error ? error.message : 'HTTP request failed';
 
+      const jsonParsedErrorMessage = parseJson(rawErrorMessage);
+
+      const errorMessage = isDefined(jsonParsedErrorMessage)
+        ? JSON.stringify(jsonParsedErrorMessage, null, 2)
+        : rawErrorMessage;
+
+      const language = isDefined(jsonParsedErrorMessage) ? 'json' : 'plaintext';
+
       setHttpRequestTestData((prev) => ({
         ...prev,
         output: {
@@ -138,7 +147,7 @@ export const useTestHttpRequest = (actionId: string) => {
           duration,
           error: errorMessage,
         },
-        language: 'plaintext',
+        language,
       }));
     } finally {
       setIsTesting(false);