diff --git a/ui-common/src/components/EntryDetailed/EntrySections/EntrySections.tsx b/ui-common/src/components/EntryDetailed/EntrySections/EntrySections.tsx index efc8bfe3c..51abf9a9f 100644 --- a/ui-common/src/components/EntryDetailed/EntrySections/EntrySections.tsx +++ b/ui-common/src/components/EntryDetailed/EntrySections/EntrySections.tsx @@ -117,7 +117,8 @@ interface EntryBodySectionProps { selector?: string, } -export const formatRequest = (body: any, contentType: string, decodeBase64: boolean = true, isBase64Encoding: boolean = false, isPretty: boolean = true): string => { +export const formatRequest = (bodyRef: any, contentType: string, decodeBase64: boolean = true, isBase64Encoding: boolean = false, isPretty: boolean = true): string => { + const { body } = bodyRef if (!decodeBase64 || !body) return body; const chunk = body.slice(0, MAXIMUM_BYTES_TO_FORMAT); @@ -144,12 +145,24 @@ export const formatRequest = (body: any, contentType: string, decodeBase64: bool } } catch (error) { console.error(error) + bodyRef.body = bodyBuf throw error } return bodyBuf; } +export const formatRequestWithOutError = (body: any, contentType: string, decodeBase64: boolean = true, isBase64Encoding: boolean = false, isPretty: boolean = true): string => { + const bodyRef = { body } + try { + return formatRequest(bodyRef, contentType, decodeBase64, isBase64Encoding, isPretty) + } catch (error) { + console.warn(error) + } + + return bodyRef.body +} + export const EntryBodySection: React.FC = ({ title, color, @@ -173,8 +186,9 @@ export const EntryBodySection: React.FC = ({ }, [isLineNumbersGreaterThenOne, isPretty]) const formatTextBody = useCallback((body) => { + const bodyRef = { body } try { - return formatRequest(body, contentType, decodeBase64, isBase64Encoding, isPretty) + return formatRequest(bodyRef, contentType, decodeBase64, isBase64Encoding, isPretty) } catch (error) { if (String(error).includes("More than one message in")) { if (isDecodeGrpc) @@ -183,6 +197,8 @@ export const EntryBodySection: React.FC = ({ console.warn(error); } } + + return bodyRef.body }, [isPretty, contentType, isDecodeGrpc, decodeBase64, isBase64Encoding]) const formattedText = useMemo(() => formatTextBody(content), [formatTextBody, content]); diff --git a/ui-common/src/components/modals/ReplayRequestModal/ReplayRequestModal.tsx b/ui-common/src/components/modals/ReplayRequestModal/ReplayRequestModal.tsx index d9846b4dd..5c945a721 100644 --- a/ui-common/src/components/modals/ReplayRequestModal/ReplayRequestModal.tsx +++ b/ui-common/src/components/modals/ReplayRequestModal/ReplayRequestModal.tsx @@ -14,7 +14,7 @@ import styles from './ReplayRequestModal.module.sass' import closeIcon from "assets/close.svg" import spinnerImg from "assets/spinner.svg" import refreshImg from "assets/refresh.svg" -import { formatRequest } from "../../EntryDetailed/EntrySections/EntrySections"; +import { formatRequestWithOutError } from "../../EntryDetailed/EntrySections/EntrySections"; import entryDataAtom from "../../../recoil/entryData"; import { AutoRepresentation, TabsEnum } from "../../EntryDetailed/EntryViewer/AutoRepresentation"; import useDebounce from "../../../hooks/useDebounce" @@ -175,7 +175,7 @@ const ReplayRequestModal: React.FC = ({ isOpen, onClose break; case RequestTabs.Body: - const formatedCode = formatRequest(postData || "", request?.postData?.mimeType) + const formatedCode = formatRequestWithOutError(postData || "", request?.postData?.mimeType) innerComponent =