fix: add safeguard for large log body entries

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';
@@ -16,12 +15,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';
@@ -45,14 +42,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],
 	);

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],
 	);

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],
 	);

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}

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';
@@ -11,22 +10,19 @@ import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
-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';
 
@@ -49,8 +45,6 @@ interface ITableViewActionsProps {
 	) => () => void;
 }
 
-const convert = new Convert();
-
 // Memoized Tree Component
 const MemoizedTree = React.memo<{ treeData: any[] }>(({ treeData }) => (
 	<Tree
@@ -69,6 +63,7 @@ const BodyContent: React.FC<{
 	record: DataType;
 	bodyHtml: { __html: string };
 }> = React.memo(({ fieldData, record, bodyHtml }) => {
+	console.log('bodyHtml', bodyHtml);
 	const { isLoading, treeData, error } = useAsyncJSONProcessing(
 		fieldData.value,
 		record.field === 'body',
@@ -144,11 +139,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]);
 

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,
@@ -27,68 +29,84 @@ const useAsyncJSONProcessing = (
 
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect((): (() => void) => {
-		if (!shouldProcess || processingRef.current) {
-			return (): void => {};
-		}
+		try {
+			if (!shouldProcess || processingRef.current) {
+				return (): void => {};
+			}
+
+			// Check if the JSON is too large
+			const json = JSON.stringify(value);
+			const byteSize = new Blob([json]).size;
 
-		processingRef.current = true;
-		setJsonState({ isLoading: true, treeData: null, error: null });
+			if (byteSize > MAX_BODY_BYTES) {
+				setJsonState({ isLoading: false, treeData: null, error: null });
+				return (): void => {};
+			}
+
+			processingRef.current = true;
+			setJsonState({ isLoading: true, treeData: null, error: null });
 
-		// Option 1: Using setTimeout for non-blocking processing
-		const processAsync = (): void => {
-			setTimeout(() => {
-				try {
-					const parsedBody = recursiveParseJSON(value);
-					if (!isEmpty(parsedBody)) {
-						const treeData = jsonToDataNodes(parsedBody);
-						setJsonState({ isLoading: false, treeData, error: null });
-					} else {
-						setJsonState({ isLoading: false, treeData: null, error: null });
+			// Option 1: Using setTimeout for non-blocking processing
+			const processAsync = (): void => {
+				setTimeout(() => {
+					try {
+						const parsedBody = recursiveParseJSON(value);
+						if (!isEmpty(parsedBody)) {
+							const treeData = jsonToDataNodes(parsedBody);
+							setJsonState({ isLoading: false, treeData, error: null });
+						} else {
+							setJsonState({ isLoading: false, treeData: null, error: null });
+						}
+					} catch (error) {
+						setJsonState({
+							isLoading: false,
+							treeData: null,
+							error: error instanceof Error ? error.message : 'Parsing failed',
+						});
+					} finally {
+						processingRef.current = false;
 					}
-				} catch (error) {
-					setJsonState({
-						isLoading: false,
-						treeData: null,
-						error: error instanceof Error ? error.message : 'Parsing failed',
-					});
-				} finally {
-					processingRef.current = false;
-				}
-			}, 0);
-		};
+				}, 0);
+			};
 
-		// Option 2: Using requestIdleCallback for better performance
-		const processWithIdleCallback = (): void => {
-			if ('requestIdleCallback' in window) {
-				requestIdleCallback(
-					// eslint-disable-next-line sonarjs/no-identical-functions
-					(): void => {
-						try {
-							const parsedBody = recursiveParseJSON(value);
-							if (!isEmpty(parsedBody)) {
-								const treeData = jsonToDataNodes(parsedBody);
-								setJsonState({ isLoading: false, treeData, error: null });
-							} else {
-								setJsonState({ isLoading: false, treeData: null, error: null });
+			// Option 2: Using requestIdleCallback for better performance
+			const processWithIdleCallback = (): void => {
+				if ('requestIdleCallback' in window) {
+					requestIdleCallback(
+						// eslint-disable-next-line sonarjs/no-identical-functions
+						(): void => {
+							try {
+								const parsedBody = recursiveParseJSON(value);
+								if (!isEmpty(parsedBody)) {
+									const treeData = jsonToDataNodes(parsedBody);
+									setJsonState({ isLoading: false, treeData, error: null });
+								} else {
+									setJsonState({ isLoading: false, treeData: null, error: null });
+								}
+							} catch (error) {
+								setJsonState({
+									isLoading: false,
+									treeData: null,
+									error: error instanceof Error ? error.message : 'Parsing failed',
+								});
+							} finally {
+								processingRef.current = false;
 							}
-						} catch (error) {
-							setJsonState({
-								isLoading: false,
-								treeData: null,
-								error: error instanceof Error ? error.message : 'Parsing failed',
-							});
-						} finally {
-							processingRef.current = false;
-						}
-					},
-					{ timeout: 1000 },
-				);
-			} else {
-				processAsync();
-			}
-		};
+						},
+						{ timeout: 1000 },
+					);
+				} else {
+					processAsync();
+				}
+			};
 
-		processWithIdleCallback();
+			processWithIdleCallback();
+		} catch (error) {
+			console.error('Error processing JSON', error);
+			setJsonState({ isLoading: false, treeData: null, error: 'Parsing failed' });
+		} finally {
+			processingRef.current = false;
+		}
 
 		// Cleanup function
 		return (): void => {