fix: add safeguard for large log body entries (#8560)

aks07 · Aditya Singh · web-flow · commit b40fda02cfb7 · 2025-07-23T13:18:04.000Z
* fix: add safeguard for large log body entries

* feat: added test cases for getSanitizedLogBody

* feat: minor refactor

* feat: revert try catch

* feat: minor refactor

* feat: minor refactor

---------

Co-authored-by: Aditya Singh &lt;adityasingh@Adityas-MacBook-Pro.local&gt;
diff --git a/frontend/src/components/LogDetail/index.tsx b/frontend/src/components/LogDetail/index.tsx
@@ -2,7 +2,6 @@
 import './LogDetails.styles.scss';
 
 import { Color, Spacing } from '@signozhq/design-tokens';
-import Convert from 'ansi-to-html';
 import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
 import { RadioChangeEvent } from 'antd/lib';
 import cx from 'classnames';
@@ -17,12 +16,10 @@ import JSONView from 'container/LogDetailedView/JsonView';
 import Overview from 'container/LogDetailedView/Overview';
 import {
 	aggregateAttributesResourcesToString,
-	escapeHtml,
+	getSanitizedLogBody,
 	removeEscapeCharacters,
-	unescapeString,
 } from 'container/LogDetailedView/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import dompurify from 'dompurify';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
@@ -46,14 +43,11 @@ import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import { RESOURCE_KEYS, VIEW_TYPES, VIEWS } from './constants';
 import { LogDetailProps } from './LogDetail.interfaces';
 import QueryBuilderSearchWrapper from './QueryBuilderSearchWrapper';
 
-const convert = new Convert();
-
 function LogDetail({
 	log,
 	onClose,
@@ -118,11 +112,7 @@ function LogDetail({
 
 	const htmlBody = useMemo(
 		() => ({
-			__html: convert.toHtml(
-				dompurify.sanitize(unescapeString(escapeHtml(log?.body || '')), {
-					FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
-				}),
-			),
+			__html: getSanitizedLogBody(log?.body || '', { shouldEscapeHtml: true }),
 		}),
 		[log?.body],
 	);
diff --git a/frontend/src/components/Logs/ListLogView/index.tsx b/frontend/src/components/Logs/ListLogView/index.tsx
@@ -1,15 +1,13 @@
 import './ListLogView.styles.scss';
 
 import { blue } from '@ant-design/colors';
-import Convert from 'ansi-to-html';
 import { Typography } from 'antd';
 import cx from 'classnames';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { escapeHtml, unescapeString } from 'container/LogDetailedView/utils';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
-import dompurify from 'dompurify';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -20,7 +18,6 @@ import { useCallback, useMemo, useState } from 'react';
 // interfaces
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
-import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 // components
 import AddToQueryHOC, { AddToQueryHOCProps } from '../AddToQueryHOC';
@@ -37,8 +34,6 @@ import {
 } from './styles';
 import { isValidLogField } from './util';
 
-const convert = new Convert();
-
 interface LogFieldProps {
 	fieldKey: string;
 	fieldValue: string;
@@ -57,11 +52,7 @@ function LogGeneralField({
 }: LogFieldProps): JSX.Element {
 	const html = useMemo(
 		() => ({
-			__html: convert.toHtml(
-				dompurify.sanitize(unescapeString(escapeHtml(fieldValue)), {
-					FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
-				}),
-			),
+			__html: getSanitizedLogBody(fieldValue, { shouldEscapeHtml: true }),
 		}),
 		[fieldValue],
 	);
diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -1,13 +1,11 @@
 import './RawLogView.styles.scss';
 
-import Convert from 'ansi-to-html';
 import { DrawerProps } from 'antd';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { escapeHtml, unescapeString } from 'container/LogDetailedView/utils';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import LogsExplorerContext from 'container/LogsExplorerContext';
-import dompurify from 'dompurify';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
@@ -23,7 +21,6 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButtons';
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
@@ -32,8 +29,6 @@ import { getLogIndicatorType } from '../LogStateIndicator/utils';
 import { RawLogContent, RawLogViewContainer } from './styles';
 import { RawLogViewProps } from './types';
 
-const convert = new Convert();
-
 function RawLogView({
 	isActiveLog,
 	isReadOnly,
@@ -176,11 +171,7 @@ function RawLogView({
 
 	const html = useMemo(
 		() => ({
-			__html: convert.toHtml(
-				dompurify.sanitize(unescapeString(escapeHtml(text)), {
-					FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
-				}),
-			),
+			__html: getSanitizedLogBody(text, { shouldEscapeHtml: true }),
 		}),
 		[text],
 	);
diff --git a/frontend/src/components/Logs/TableView/useTableView.tsx b/frontend/src/components/Logs/TableView/useTableView.tsx
@@ -1,17 +1,14 @@
 import './useTableView.styles.scss';
 
-import Convert from 'ansi-to-html';
 import { Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { unescapeString } from 'container/LogDetailedView/utils';
-import dompurify from 'dompurify';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
 import { useMemo } from 'react';
-import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorTypeForTable } from '../LogStateIndicator/utils';
@@ -27,8 +24,6 @@ import {
 	UseTableViewResult,
 } from './types';
 
-const convert = new Convert();
-
 export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 	const {
 		logs,
@@ -149,11 +144,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								children: (
 									<TableBodyContent
 										dangerouslySetInnerHTML={{
-											__html: convert.toHtml(
-												dompurify.sanitize(unescapeString(field as string), {
-													FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
-												}),
-											),
+											__html: getSanitizedLogBody(field as string),
 										}}
 										fontSize={fontSize}
 										linesPerRow={linesPerRow}
diff --git a/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx b/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx
@@ -2,7 +2,6 @@
 import './TableViewActions.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
-import Convert from 'ansi-to-html';
 import { Button, Popover, Spin, Tooltip, Tree } from 'antd';
 import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
 import cx from 'classnames';
@@ -12,22 +11,19 @@ import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 import { MetricsType } from 'container/MetricsApplication/constant';
-import dompurify from 'dompurify';
 import { ArrowDownToDot, ArrowUpFromDot, Ellipsis } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import { DataType } from '../TableView';
 import {
-	escapeHtml,
 	filterKeyForField,
 	getFieldAttributes,
+	getSanitizedLogBody,
 	parseFieldValue,
 	removeEscapeCharacters,
-	unescapeString,
 } from '../utils';
 import useAsyncJSONProcessing from './useAsyncJSONProcessing';
 
@@ -51,8 +47,6 @@ interface ITableViewActionsProps {
 	) => () => void;
 }
 
-const convert = new Convert();
-
 // Memoized Tree Component
 const MemoizedTree = React.memo<{ treeData: any[] }>(({ treeData }) => (
 	<Tree
@@ -146,11 +140,7 @@ export default function TableViewActions(
 		if (record.field !== 'body') return { __html: '' };
 
 		return {
-			__html: convert.toHtml(
-				dompurify.sanitize(unescapeString(escapeHtml(record.value)), {
-					FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
-				}),
-			),
+			__html: getSanitizedLogBody(record.value, { shouldEscapeHtml: true }),
 		};
 	}, [record.field, record.value]);
 
diff --git a/frontend/src/container/LogDetailedView/TableView/useAsyncJSONProcessing.ts b/frontend/src/container/LogDetailedView/TableView/useAsyncJSONProcessing.ts
@@ -4,6 +4,8 @@ import { useEffect, useRef, useState } from 'react';
 
 import { jsonToDataNodes, recursiveParseJSON } from '../utils';
 
+const MAX_BODY_BYTES = 100 * 1024; // 100 KB
+
 // Hook for async JSON processing
 const useAsyncJSONProcessing = (
 	value: string,
@@ -31,6 +33,12 @@ const useAsyncJSONProcessing = (
 			return (): void => {};
 		}
 
+		// Avoid processing if the json is too large
+		const byteSize = new Blob([value]).size;
+		if (byteSize > MAX_BODY_BYTES) {
+			return (): void => {};
+		}
+
 		processingRef.current = true;
 		setJsonState({ isLoading: true, treeData: null, error: null });
 
diff --git a/frontend/src/container/LogDetailedView/util.test.ts b/frontend/src/container/LogDetailedView/util.test.ts
diff --git a/frontend/src/container/LogDetailedView/utils.tsx b/frontend/src/container/LogDetailedView/utils.tsx
