Fix a regression where JSON responses are not formatted in DocService

ikhoon · ikhoon · commit c67b4a6aeb4c · 2025-10-10T16:56:01.000+09:00
Motivation: JSON pretty-printing logic was unintentionally removed while working on line#6191 https://github.com/line/armeria/pull/6191/files#diff-f12e66c572a486106958b3f165d995f093e16ffb76db3028fd836595eace6c67L64-L67 Modifications: - Prettify JSON responses before rendering them on the debug console. - Remove duplicate duration measurement logic. - Slightly adjust the font size and layout spacing in `ResponseStatusBar` for readability. Result: Fix a regression where JSON responses are not formatted in DocService
diff --git a/docs-client/src/containers/MethodPage/DebugPage.tsx b/docs-client/src/containers/MethodPage/DebugPage.tsx
@@ -147,33 +147,31 @@ const ResponseStatusBar: React.FC<{
       style={{
         display: 'flex',
         flexWrap: 'wrap',
-        justifyContent: 'flex-end',
+        justifyContent: 'flex-start',
         alignItems: 'center',
         gap: '4px 16px',
         overflow: 'hidden',
         wordBreak: 'break-word',
       }}
     >
       <Typography
-        variant="body2"
+        variant="subtitle2"
         style={{
           display: 'flex',
           flexWrap: 'wrap',
         }}
       >
-        <span style={{ marginLeft: 16, color }}>
+        <span style={{ marginRight: 16, color }}>
           <strong>Status</strong>: {responseMetaData.status ?? '–'}
         </span>
-        <span style={{ marginLeft: 16 }}>
-          <strong>Execution Time</strong>:{' '}
-          {responseMetaData.executionTime ?? '–'} ms
+        <span style={{ marginRight: 16 }}>
+          <strong>Duration</strong>: {responseMetaData.executionTime ?? '–'} ms
         </span>
-        <span style={{ marginLeft: 16 }}>
-          <strong>Response Size</strong>: {responseMetaData.size ?? '–'} B
+        <span style={{ marginRight: 16 }}>
+          <strong>Size</strong>: {responseMetaData.size ?? '–'} B
         </span>
-        <span style={{ marginLeft: 16 }}>
-          <strong>Execution Timestamp</strong> :{' '}
-          {responseMetaData.timestamp ?? '-'}
+        <span>
+          <strong>Timestamp</strong> : {responseMetaData.timestamp ?? '-'}
         </span>
       </Typography>
     </Grid>
@@ -688,8 +686,8 @@ const DebugPage: React.FunctionComponent<Props> = ({
                   {responseHeadersString && (
                     <>
                       <Typography
-                        variant="subtitle1"
-                        style={{ marginTop: '1rem' }}
+                        variant="subtitle2"
+                        style={{ marginTop: '1rem', fontWeight: 'bold' }}
                       >
                         Response Headers:
                       </Typography>
@@ -702,7 +700,10 @@ const DebugPage: React.FunctionComponent<Props> = ({
                       </SyntaxHighlighter>
                     </>
                   )}
-                  <Typography variant="subtitle1" style={{ marginTop: '1rem' }}>
+                  <Typography
+                    variant="subtitle2"
+                    style={{ marginTop: '1rem', fontWeight: 'bold' }}
+                  >
                     Response Body:
                   </Typography>
                   <SyntaxHighlighter
diff --git a/docs-client/src/lib/json-util.ts b/docs-client/src/lib/json-util.ts
@@ -134,11 +134,3 @@ export function isValidJsonMimeType(applicationType: string | null) {
   }
   return applicationType.indexOf('json') >= 0;
 }
-
-export function extractHeaderLines(headers: Headers): string[] {
-  const headerLines: string[] = [];
-  headers.forEach((value, name) => {
-    headerLines.push(`${name}: ${value}`);
-  });
-  return headerLines;
-}
diff --git a/docs-client/src/lib/transports/annotated-http.ts b/docs-client/src/lib/transports/annotated-http.ts
@@ -15,13 +15,8 @@
  */
 import { Endpoint, Method } from '../specification';
 
-import Transport from './transport';
-import {
-  extractHeaderLines,
-  isValidJsonMimeType,
-  validateJsonObject,
-} from '../json-util';
-import { ResponseData } from '../types';
+import { Transport } from './transport';
+import { isValidJsonMimeType, validateJsonObject } from '../json-util';
 
 export const ANNOTATED_HTTP_MIME_TYPE = 'application/json; charset=utf-8';
 
@@ -88,13 +83,12 @@ export default class AnnotatedHttpTransport extends Transport {
 
   protected async doSend(
     method: Method,
-    headers: { [name: string]: string },
+    headers: { [p: string]: string },
     pathPrefix: string,
     bodyJson?: string,
     endpointPath?: string,
     queries?: string,
-  ): Promise<ResponseData> {
-    const start = performance.now();
+  ): Promise<Response> {
     const endpoint = this.getDebugMimeTypeEndpoint(method);
 
     const hdrs = new Headers();
@@ -122,23 +116,10 @@ export default class AnnotatedHttpTransport extends Transport {
     }
     newPath = pathPrefix + newPath;
 
-    const response = await fetch(encodeURI(newPath), {
+    return fetch(encodeURI(newPath), {
       headers: hdrs,
       method: method.httpMethod,
       body: bodyJson,
     });
-
-    const responseHeaders = extractHeaderLines(response.headers);
-    const responseText = await response.text();
-    const duration = Math.round(performance.now() - start);
-    const timestamp = new Date().toLocaleString();
-    return {
-      body: responseText,
-      headers: responseHeaders,
-      status: response.status,
-      executionTime: duration,
-      size: responseText.length,
-      timestamp,
-    };
   }
 }
diff --git a/docs-client/src/lib/transports/grahpql-http.ts b/docs-client/src/lib/transports/grahpql-http.ts
@@ -14,10 +14,9 @@
  * under the License.
  */
 
-import Transport from './transport';
+import { Transport } from './transport';
 import { Method } from '../specification';
-import { extractHeaderLines, validateJsonObject } from '../json-util';
-import { ResponseData } from '../types';
+import { validateJsonObject } from '../json-util';
 
 export const GRAPHQL_HTTP_MIME_TYPE = 'application/graphql+json';
 
@@ -32,13 +31,12 @@ export default class GraphqlHttpTransport extends Transport {
 
   protected async doSend(
     method: Method,
-    headers: { [name: string]: string },
+    headers: { [p: string]: string },
     pathPrefix: string,
     bodyJson?: string,
     endpointPath?: string,
     queries?: string,
-  ): Promise<ResponseData> {
-    const start = performance.now();
+  ): Promise<Response> {
     const endpoint = this.getDebugMimeTypeEndpoint(method);
 
     const hdrs = new Headers();
@@ -61,23 +59,10 @@ export default class GraphqlHttpTransport extends Transport {
     }
     newPath = pathPrefix + newPath;
 
-    const response = await fetch(encodeURI(newPath), {
+    return fetch(encodeURI(newPath), {
       headers: hdrs,
       method: method.httpMethod,
       body: bodyJson,
     });
-
-    const responseHeaders = extractHeaderLines(response.headers);
-    const responseText = await response.text();
-    const duration = Math.round(performance.now() - start);
-    const timestamp = new Date().toLocaleString();
-    return {
-      body: responseText,
-      headers: responseHeaders,
-      status: response.status,
-      executionTime: duration,
-      size: responseText.length,
-      timestamp,
-    };
   }
 }
diff --git a/docs-client/src/lib/transports/grpc-unframed.ts b/docs-client/src/lib/transports/grpc-unframed.ts
@@ -15,9 +15,8 @@
  */
 import { Method } from '../specification';
 
-import Transport from './transport';
-import { extractHeaderLines, validateJsonObject } from '../json-util';
-import { ResponseData } from '../types';
+import { Transport } from './transport';
+import { validateJsonObject } from '../json-util';
 
 export const GRPC_UNFRAMED_MIME_TYPE =
   'application/json; charset=utf-8; protocol=gRPC';
@@ -37,11 +36,10 @@ export default class GrpcUnframedTransport extends Transport {
     pathPrefix: string,
     bodyJson?: string,
     endpointPath?: string,
-  ): Promise<ResponseData> {
+  ): Promise<Response> {
     if (!bodyJson) {
       throw new Error('A gRPC request must have body.');
     }
-    const start = performance.now();
     const endpoint = this.getDebugMimeTypeEndpoint(method, endpointPath);
 
     const hdrs = new Headers();
@@ -58,23 +56,10 @@ export default class GrpcUnframedTransport extends Transport {
     }
 
     const newPath = pathPrefix + (endpointPath ?? endpoint.pathMapping);
-    const response = await fetch(newPath, {
+    return fetch(newPath, {
       headers: hdrs,
       method: 'POST',
       body: bodyJson,
     });
-
-    const responseHeaders = extractHeaderLines(response.headers);
-    const responseText = await response.text();
-    const duration = Math.round(performance.now() - start);
-    const timestamp = new Date().toLocaleString();
-    return {
-      body: responseText,
-      headers: responseHeaders,
-      status: response.status,
-      executionTime: duration,
-      size: responseText.length,
-      timestamp,
-    };
   }
 }
diff --git a/docs-client/src/lib/transports/index.ts b/docs-client/src/lib/transports/index.ts
@@ -19,7 +19,7 @@ import { Method } from '../specification';
 import AnnotatedHttpTransport from './annotated-http';
 import GrpcUnframedTransport from './grpc-unframed';
 import ThriftTransport from './thrift';
-import Transport from './transport';
+import { Transport } from './transport';
 import GraphqlHttpTransport from './grahpql-http';
 
 const grpcUnframedTransport = new GrpcUnframedTransport();
diff --git a/docs-client/src/lib/transports/thrift.ts b/docs-client/src/lib/transports/thrift.ts
@@ -16,9 +16,8 @@
 
 import { Endpoint, Method } from '../specification';
 
-import Transport from './transport';
-import { extractHeaderLines, validateJsonObject } from '../json-util';
-import { ResponseData } from '../types';
+import { Transport } from './transport';
+import { validateJsonObject } from '../json-util';
 
 export const TTEXT_MIME_TYPE = 'application/x-thrift; protocol=TTEXT';
 
@@ -48,11 +47,10 @@ export default class ThriftTransport extends Transport {
     pathPrefix: string,
     bodyJson?: string,
     endpointPath?: string,
-  ): Promise<ResponseData> {
+  ): Promise<Response> {
     if (!bodyJson) {
       throw new Error('A Thrift request must have body.');
     }
-    const start = performance.now();
     const endpoint = this.getDebugMimeTypeEndpoint(method, endpointPath);
 
     const thriftMethod = ThriftTransport.thriftMethod(endpoint, method);
@@ -68,23 +66,10 @@ export default class ThriftTransport extends Transport {
 
     const newPath = pathPrefix + (endpointPath ?? endpoint.pathMapping);
 
-    const response = await fetch(newPath, {
+    return fetch(newPath, {
       headers: hdrs,
       method: 'POST',
       body: `{"method": "${thriftMethod}", "type": "CALL", "args": ${bodyJson}}`,
     });
-
-    const responseHeaders = extractHeaderLines(response.headers);
-    const responseText = await response.text();
-    const duration = Math.round(performance.now() - start);
-    const timestamp = new Date().toLocaleString();
-    return {
-      body: responseText,
-      headers: responseHeaders,
-      status: response.status,
-      executionTime: duration,
-      size: responseText.length,
-      timestamp,
-    };
   }
 }
diff --git a/docs-client/src/lib/transports/transport.ts b/docs-client/src/lib/transports/transport.ts
@@ -13,15 +13,25 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
+import JSONbig from 'json-bigint';
+import { jsonPrettify } from '../json-util';
 import { docServiceDebug, providers } from '../header-provider';
 import { Endpoint, Method } from '../specification';
 import { ResponseData } from '../types';
 
-export default abstract class Transport {
+export abstract class Transport {
   public abstract supportsMimeType(mimeType: string): boolean;
 
   public abstract getDebugMimeType(): string;
 
+  private toHeaderLines(headers: Headers): string[] {
+    const headerLines: string[] = [];
+    headers.forEach((value, name) => {
+      headerLines.push(`${name}: ${value}`);
+    });
+    return headerLines;
+  }
+
   public async send(
     method: Method,
     headers: { [name: string]: string },
@@ -59,13 +69,28 @@ export default abstract class Transport {
       endpointPath,
       queries,
     );
-    const responseHeaders = httpResponse.headers;
-    const responseText = httpResponse.body;
+
+    const responseHeaders = this.toHeaderLines(httpResponse.headers);
+    const responseText = await httpResponse.text();
+    const applicationType = httpResponse.headers.get('content-type') || '';
+    let responseBody: string = responseText;
+    if (applicationType.indexOf('json') >= 0) {
+      try {
+        const json = JSONbig.parse(responseText);
+        const prettified = jsonPrettify(JSONbig.stringify(json));
+        if (prettified.length > 0) {
+          responseBody = prettified;
+        }
+      } catch (ignored) {
+        /* empty */
+      }
+    }
     const duration = Math.round(performance.now() - start);
     const timestamp = new Date().toLocaleString();
+
     if (responseText.length > 0) {
       return {
-        body: responseText,
+        body: responseBody,
         headers: responseHeaders,
         status: httpResponse.status,
         executionTime: duration,
@@ -78,7 +103,7 @@ export default abstract class Transport {
       headers: responseHeaders,
       status: httpResponse.status,
       executionTime: duration,
-      size: responseText.length,
+      size: 0,
       timestamp,
     };
   }
@@ -159,10 +184,10 @@ export default abstract class Transport {
 
   protected abstract doSend(
     method: Method,
-    headers: { [name: string]: string },
+    headers: { [p: string]: string },
     pathPrefix: string,
     bodyJson?: string,
     endpointPath?: string,
     queries?: string,
-  ): Promise<ResponseData>;
+  ): Promise<Response>;
 }

Original file line number	Diff line number	Diff line change
`@@ -134,11 +134,3 @@ export function isValidJsonMimeType(applicationType: string \| null) {`
`134`	`134`	`}`
`135`	`135`	`return applicationType.indexOf('json') >= 0;`
`136`	`136`	`}`
`137`		`-`
`138`		`-export function extractHeaderLines(headers: Headers): string[] {`
`139`		`- const headerLines: string[] = [];`
`140`		`- headers.forEach((value, name) => {`
`141`		- headerLines.push(`${name}: ${value}`);
`142`		`- });`
`143`		`- return headerLines;`
`144`		`-}`