From 7fa50070cee84dd7c99e7e9556a1cf60c3402a66 Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@signoz.io>
Date: Thu, 12 Oct 2023 12:21:04 +0530
Subject: [PATCH] refactor: removed escape character from the string (#3726)

---
 .../src/container/LogDetailedView/TableView.tsx    |  9 +++++++--
 frontend/src/container/LogDetailedView/utils.tsx   | 14 ++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/frontend/src/container/LogDetailedView/TableView.tsx b/frontend/src/container/LogDetailedView/TableView.tsx
index 92840bde45..17446b0118 100644
--- a/frontend/src/container/LogDetailedView/TableView.tsx
+++ b/frontend/src/container/LogDetailedView/TableView.tsx
@@ -21,7 +21,12 @@ import { ILog } from 'types/api/logs/log';
 
 import ActionItem, { ActionItemProps } from './ActionItem';
 import FieldRenderer from './FieldRenderer';
-import { flattenObject, jsonToDataNodes, recursiveParseJSON } from './utils';
+import {
+	flattenObject,
+	jsonToDataNodes,
+	recursiveParseJSON,
+	removeEscapeCharacters,
+} from './utils';
 
 // Fields which should be restricted from adding it to query
 const RESTRICTED_FIELDS = ['timestamp'];
@@ -58,7 +63,7 @@ function TableView({
 			.map((key) => ({
 				key,
 				field: key,
-				value: JSON.stringify(flattenLogData[key]),
+				value: removeEscapeCharacters(JSON.stringify(flattenLogData[key])),
 			}));
 
 	const onTraceHandler = (record: DataType) => (): void => {
diff --git a/frontend/src/container/LogDetailedView/utils.tsx b/frontend/src/container/LogDetailedView/utils.tsx
index 5530c970d3..f31534ace8 100644
--- a/frontend/src/container/LogDetailedView/utils.tsx
+++ b/frontend/src/container/LogDetailedView/utils.tsx
@@ -226,3 +226,17 @@ export const getDataTypes = (value: unknown): DataTypes => {
 
 	return determineType(value);
 };
+
+export const removeEscapeCharacters = (str: string): string =>
+	str.replace(/\\([ntfr'"\\])/g, (_: string, char: string) => {
+		const escapeMap: Record<string, string> = {
+			n: '\n',
+			t: '\t',
+			f: '\f',
+			r: '\r',
+			"'": "'",
+			'"': '"',
+			'\\': '\\',
+		};
+		return escapeMap[char as keyof typeof escapeMap];
+	});