Skip to content

Commit

Permalink
[#noissue] Handle html error response
Browse files Browse the repository at this point in the history
  • Loading branch information
binDongKim committed Jul 2, 2024
1 parent d6fc4f2 commit ae66fc2
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 29 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,5 @@ export type ErrorResponse = {
};
};
};

export type ErrorDetailResponse = ErrorResponse & { url?: string };
28 changes: 26 additions & 2 deletions web-frontend/src/main/v3/packages/hooks/src/api/swrConfigs.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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.');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ import {
Separator,
} from '../ui';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import { ErrorResponse } from '@pinpoint-fe/constants';
import { ErrorDetailResponse } from '@pinpoint-fe/constants';
import { cn } from '../../lib';
import { HighLightCode } from '../HighLightCode';
import { RxChevronDown, RxChevronUp } from 'react-icons/rx';

export interface ErrorDetailDialogProps {
error: ErrorResponse;
error: ErrorDetailResponse;
contentOption?: PopoverPrimitive.PopoverContentProps;
contentClassName?: string;
}
Expand All @@ -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>
Expand All @@ -48,15 +48,23 @@ 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 />
{error?.data && (
<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
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit ae66fc2

Please sign in to comment.