From bcb2f845ea24fe5314ee6ea7af45d42cbde191a3 Mon Sep 17 00:00:00 2001
From: QooQooDass <bindong.kim@navercorp.com>
Date: Mon, 1 Jul 2024 11:58:17 +0900
Subject: [PATCH] [#noissue] Handle html error response

---
 .../v3/packages/hooks/src/api/swrConfigs.ts   | 28 ++++++++-
 .../components/Error/ErrorDetailDialog.tsx    | 62 +++++++++++--------
 2 files changed, 62 insertions(+), 28 deletions(-)

diff --git a/web-frontend/src/main/v3/packages/hooks/src/api/swrConfigs.ts b/web-frontend/src/main/v3/packages/hooks/src/api/swrConfigs.ts
index 753f679aa612..f8b945ee6a46 100644
--- a/web-frontend/src/main/v3/packages/hooks/src/api/swrConfigs.ts
+++ b/web-frontend/src/main/v3/packages/hooks/src/api/swrConfigs.ts
@@ -1,6 +1,30 @@
 import { ErrorResponse } from '@pinpoint-fe/constants';
 import { SWRConfiguration } from 'swr';
 
+export const parseErrorResponse = async (response: Response) => {
+  const contentType = response.headers.get('content-type');
+
+  if (contentType?.includes('json')) {
+    return await response.json();
+  } else if (contentType?.includes('text/html')) {
+    const htmlText = await response.text();
+    const parser = new DOMParser();
+    const DOM = parser.parseFromString(htmlText, 'text/html');
+    const titleElement = DOM.querySelector('h1');
+    const traceElement = DOM.querySelector('pre');
+    const title = titleElement?.textContent || '';
+    const trace = traceElement?.textContent || '';
+
+    return {
+      data: {},
+      instance: title,
+      trace,
+    } as ErrorResponse;
+  } else {
+    return new Error('Unsupported content type.');
+  }
+};
+
 export const swrConfigs: SWRConfiguration = {
   suspense: true,
   revalidateIfStale: false,
@@ -12,11 +36,11 @@ export const swrConfigs: SWRConfiguration = {
     const response = await fetch(urlWithQueryParams);
 
     if (!response.ok) {
-      const error: ErrorResponse = await response.json();
+      const error = await parseErrorResponse(response);
 
       if (error.data) {
         // Server API error
-        throw error;
+        throw { ...error, url };
       } else {
         // Network error
         throw new Error('An error occurred while fetching the data.');
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Error/ErrorDetailDialog.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Error/ErrorDetailDialog.tsx
index c18af2808ae2..96e88cd08141 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/Error/ErrorDetailDialog.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/Error/ErrorDetailDialog.tsx
@@ -16,7 +16,7 @@ import { HighLightCode } from '../HighLightCode';
 import { RxChevronDown, RxChevronUp } from 'react-icons/rx';
 
 export interface ErrorDetailDialogProps {
-  error: ErrorResponse;
+  error: ErrorResponse & { url: string };
   contentOption?: PopoverPrimitive.PopoverContentProps;
   contentClassName?: string;
 }
@@ -28,7 +28,7 @@ export const ErrorDetailDialog = ({
 }: ErrorDetailDialogProps) => {
   const [headerOpen, setHeaderOpen] = React.useState(false);
   const [paremetersOpen, setParametersOpen] = React.useState(false);
-  const [stackTraceOpen, setStackTraceOpen] = React.useState(false);
+  const [stackTraceOpen, setStackTraceOpen] = React.useState(true);
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -48,7 +48,15 @@ export const ErrorDetailDialog = ({
               <div className="w-1 h-4 rounded-sm bg-status-fail" />
               Error Details
             </h4>
-            <p className="text-sm font-semibold text-muted-foreground">{error?.instance}</p>
+            <div className="flex items-center gap-1">
+              <a
+                className="text-sm font-semibold text-primary hover:underline"
+                href={error?.url}
+                target="_blank"
+              >
+                {error?.instance}
+              </a>
+            </div>
             <p className="text-sm break-all text-muted-foreground">{error?.message}</p>
           </div>
           <Separator />
@@ -56,7 +64,7 @@ export const ErrorDetailDialog = ({
             <div className="grid gap-2 text-sm scrollbar-hide">
               <div className="grid grid-cols-[7rem_auto] gap-2">
                 <div className="text-muted-foreground">Method</div>
-                <div>{error.data.requestInfo.method}</div>
+                <div>{error.data.requestInfo?.method}</div>
               </div>
               <Collapsible className="space-y-2" open={headerOpen} onOpenChange={setHeaderOpen}>
                 <CollapsibleTrigger
@@ -67,16 +75,17 @@ export const ErrorDetailDialog = ({
                 </CollapsibleTrigger>
                 <CollapsibleContent>
                   <div className="grid grid-cols-[7rem_auto] gap-2 text-xs p-2">
-                    {Object.keys(error.data.requestInfo.headers)
-                      .sort()
-                      .map((key) => {
-                        return (
-                          <React.Fragment key={key}>
-                            <div className="text-muted-foreground">{key}</div>
-                            <div className="break-all">{error.data.requestInfo.headers[key]}</div>
-                          </React.Fragment>
-                        );
-                      })}
+                    {error.data.requestInfo?.headers &&
+                      Object.keys(error.data.requestInfo.headers)
+                        .sort()
+                        .map((key) => {
+                          return (
+                            <React.Fragment key={key}>
+                              <div className="text-muted-foreground">{key}</div>
+                              <div className="break-all">{error.data.requestInfo.headers[key]}</div>
+                            </React.Fragment>
+                          );
+                        })}
                   </div>
                 </CollapsibleContent>
               </Collapsible>
@@ -93,18 +102,19 @@ export const ErrorDetailDialog = ({
                 </CollapsibleTrigger>
                 <CollapsibleContent>
                   <div className="grid grid-cols-[7rem_auto] gap-2 text-xs p-2">
-                    {Object.keys(error.data.requestInfo.parameters)
-                      .sort()
-                      .map((key) => {
-                        return (
-                          <React.Fragment key={key}>
-                            <div className="text-muted-foreground">{key}</div>
-                            <div className="break-all">
-                              {error.data.requestInfo.parameters[key]}
-                            </div>
-                          </React.Fragment>
-                        );
-                      })}
+                    {error.data.requestInfo?.parameters &&
+                      Object.keys(error.data.requestInfo.parameters)
+                        .sort()
+                        .map((key) => {
+                          return (
+                            <React.Fragment key={key}>
+                              <div className="text-muted-foreground">{key}</div>
+                              <div className="break-all">
+                                {error.data.requestInfo.parameters[key]}
+                              </div>
+                            </React.Fragment>
+                          );
+                        })}
                   </div>
                 </CollapsibleContent>
               </Collapsible>