Add fallback to non big int option to cover large floats

Author: GnaneshKunal

redisinsight/ui/src/components/json-viewer/JSONViewer.tsx

@@ -9,23 +9,40 @@ interface Props {
   expanded?: boolean
   space?: number
   useNativeBigInt?: boolean
+  fallbackToNonBigInt?: boolean
+}
+
+const RenderJSONValue = (value: string, expanded: boolean, space: number, useNativeBigInt: boolean) => {
+  const data = JSONBigInt({ useNativeBigInt }).parse(value)
+  return (
+    <div className={cx('jsonViewer', { 'jsonViewer-collapsed': !expanded })} data-testid="value-as-json">
+      <JsonPretty data={data} space={space} />
+    </div>
+  )
 }
 
 const JSONViewer = (props: Props) => {
-  const { value, expanded = false, space = 2, useNativeBigInt = true } = props
+  const { value, expanded = false, space = 2, useNativeBigInt = true, fallbackToNonBigInt } = props
 
   try {
-    const data = JSONBigInt({ useNativeBigInt }).parse(value)
-
+    const jsonValue = RenderJSONValue(value, expanded, space, useNativeBigInt)
     return {
-      value: (
-        <div className={cx('jsonViewer', { 'jsonViewer-collapsed': !expanded })} data-testid="value-as-json">
-          <JsonPretty data={data} space={space} />
-        </div>
-      ),
+      value: jsonValue,
       isValid: true
     }
   } catch (e) {
+    if (fallbackToNonBigInt) {
+      try {
+        const jsonValue = RenderJSONValue(value, expanded, space, false)
+        return {
+          value: jsonValue,
+          isValid: true
+        }
+      } catch (e) {
+        // ignore
+      }
+    }
+
     return {
       value,
       isValid: false

redisinsight/ui/src/utils/formatters/valueFormatters.tsx

@@ -65,7 +65,7 @@ const bufferToJSON = (
   reply: RedisResponseBuffer,
   props: FormattingProps
 ): { value: JSX.Element | string, isValid: boolean } =>
-  JSONViewer({ value: bufferToUTF8(reply), ...props })
+  JSONViewer({ value: bufferToUTF8(reply), fallbackToNonBigInt: true, ...props })
 
 const formattingBuffer = (
   reply: RedisResponseBuffer,