Handling json with long numbers

package.json

@@ -31,6 +31,7 @@
     "baseui": "^14.0.0",
     "copy-to-clipboard": "^3.3.3",
     "lodash": "^4.17.21",
+    "lossless-json": "^4.0.2",
     "next": "14.2.16",
     "next-logger": "^5.0.0",
     "pino": "^9.3.2",

src/components/pretty-json/pretty-json.types.tsx

@@ -1,14 +1,15 @@
 export type Props = {
-  json: JsonValue;
+  json: PrettyJsonValue;
 };
 
-export type JsonValue =
+export type PrettyJsonValue =
   | string
   | number
   | boolean
   | null
   | JsonObject
-  | JsonArray;
+  | JsonArray
+  | bigint;
 
-type JsonObject = { [key: string]: JsonValue };
-type JsonArray = JsonValue[];
+type JsonObject = { [key: string]: PrettyJsonValue };
+type JsonArray = PrettyJsonValue[];

src/route-handlers/query-workflow/query-workflow.ts

@@ -46,6 +46,8 @@ export async function queryWorkflow(
       },
     });
 
+    // TODO @assem.hafez: we may loss numeric percision here as we are parsing a result from other languages that may include long numbers
+    // one options is not to parse the result and return it as string and handle the parsing on the client side
     return NextResponse.json({
       result: res.queryResult
         ? JSON.parse(

src/utils/__tests__/lossless-json-parse.test.ts

@@ -0,0 +1,52 @@
+import losslessJsonParse from '../lossless-json-parse';
+
+describe('losslessJsonParse', () => {
+  it('should parse large numbers as BigInt', () => {
+    const json = '{"bigNumber": 90071992547409923213}';
+    const result = losslessJsonParse(json);
+    expect(result).toEqual({ bigNumber: BigInt('90071992547409923213') });
+  });
+
+  it('should parse strings of large numbers as string', () => {
+    const json = '{"bigNumber": "90071992547409923213"}';
+    const result = losslessJsonParse(json);
+    expect(result).toEqual({ bigNumber: '90071992547409923213' });
+  });
+
+  it('should parse a JSON string with integers correctly', () => {
+    const json = '{"integer": 42}';
+    const result = losslessJsonParse(json);
+    expect(result).toEqual({ integer: 42 });
+  });
+
+  it('should parse floating point numbers correctly', () => {
+    const json = '{"float": 3.14}';
+    const result = losslessJsonParse(json);
+    expect(result).toEqual({ float: 3.14 });
+  });
+
+  it('should use the provided reviver function', () => {
+    const json = '{"key": "value"}';
+    const reviver = (key: string, value: any) => {
+      if (key === 'key') {
+        return 'newValue';
+      }
+      return value;
+    };
+    const result = losslessJsonParse(json, reviver);
+    expect(result).toEqual({ key: 'newValue' });
+  });
+
+  it('should handle null and undefined reviver correctly', () => {
+    const json = '{"key": "value"}';
+    const resultWithNullReviver = losslessJsonParse(json, null);
+    const resultWithUndefinedReviver = losslessJsonParse(json, undefined);
+    expect(resultWithNullReviver).toEqual({ key: 'value' });
+    expect(resultWithUndefinedReviver).toEqual({ key: 'value' });
+  });
+
+  it('should throw an error if the JSON is invalid', () => {
+    const json = '{"key": "value"';
+    expect(() => losslessJsonParse(json)).toThrow();
+  });
+});

src/utils/__tests__/lossless-json-stringify.test.ts

@@ -0,0 +1,65 @@
+import losslessJsonStringify from '../lossless-json-stringify';
+
+describe('losslessJsonStringify', () => {
+  it('should stringify a JSON object with safe numbers correctly', () => {
+    const json = { number: 123 };
+    const result = losslessJsonStringify(json);
+    expect(result).toBe('{"number":123}');
+  });
+
+  it('should stringify BigInts as numbers', () => {
+    const json = { bigNumber: BigInt('900719925474099223423423') };
+    const result = losslessJsonStringify(json);
+    expect(result).toBe('{"bigNumber":900719925474099223423423}');
+  });
+
+  it('should stringify integers correctly', () => {
+    const json = { integer: 42 };
+    const result = losslessJsonStringify(json);
+    expect(result).toBe('{"integer":42}');
+  });
+
+  it('should stringify floating point numbers correctly', () => {
+    const json = { float: 3.14 };
+    const result = losslessJsonStringify(json);
+    expect(result).toBe('{"float":3.14}');
+  });
+
+  it('should use the provided reviver function', () => {
+    const json = { key: 'value' };
+    const reviver = (key: string, value: any) => {
+      if (key === 'key') {
+        return 'newValue';
+      }
+      return value;
+    };
+    const result = losslessJsonStringify(json, reviver);
+    expect(result).toBe('{"key":"newValue"}');
+  });
+
+  it('should handle null and undefined reviver correctly', () => {
+    const json = { key: 'value' };
+    const resultWithNullReviver = losslessJsonStringify(json, null);
+    const resultWithUndefinedReviver = losslessJsonStringify(json, undefined);
+    expect(resultWithNullReviver).toBe('{"key":"value"}');
+    expect(resultWithUndefinedReviver).toBe('{"key":"value"}');
+  });
+
+  it('should format JSON with spaces correctly', () => {
+    const json = { key: 'value' };
+    const result = losslessJsonStringify(json, null, 2);
+    expect(result).toBe('{\n  "key": "value"\n}');
+  });
+
+  it('should return an empty string for invalid JSON', () => {
+    const json = () => {};
+    const result = losslessJsonStringify(json);
+    expect(result).toBe('');
+  });
+
+  it('should remove invalid JSON keys', () => {
+    const json = { key: 'value', fn: () => {} };
+    const result = losslessJsonStringify(json);
+    expect(result).toBe('{"key":"value"}');
+  });
+});

src/utils/data-formatters/__tests__/format-payload.test.ts

@@ -12,8 +12,11 @@ describe('formatPayload', () => {
   });
 
   it('should parse JSON data correctly', () => {
-    const payload = { data: btoa(JSON.stringify({ key: 'value' })) };
-    expect(formatPayload(payload)).toEqual({ key: 'value' });
+    const payload = { data: btoa('{"key":"value","long":284789263475236586}') };
+    expect(formatPayload(payload)).toEqual({
+      key: 'value',
+      long: BigInt('284789263475236586'),
+    });
   });
 
   it('should remove double quotes from the string if JSON parsing fails', () => {

src/utils/data-formatters/format-input-payload.ts

@@ -1,5 +1,6 @@
 import logger from '@/utils/logger';
 
+import losslessJsonParse from '../lossless-json-parse';
 const formatInputPayload = (
   payload: { data?: string | null } | null | undefined
 ) => {
@@ -25,7 +26,7 @@ function parseJsonLines(input: string) {
 
     try {
       // Try to parse the current JSON string
-      const jsonObject = JSON.parse(currentJson);
+      const jsonObject = losslessJsonParse(currentJson);
       // If successful, add the object to the array
       jsonArray.push(jsonObject);
       // Reset currentJson for the next JSON object
@@ -38,7 +39,7 @@ function parseJsonLines(input: string) {
   // Handle case where the last JSON object might be malformed
   if (currentJson.trim() !== '') {
     try {
-      const jsonObject = JSON.parse(currentJson);
+      const jsonObject = losslessJsonParse(currentJson);
       jsonArray.push(jsonObject);
     } catch {
       logger.error(

src/utils/data-formatters/format-payload.ts

@@ -1,3 +1,5 @@
+import losslessJsonParse from '../lossless-json-parse';
+
 const formatPayload = (
   payload: { data?: string | null } | null | undefined
 ) => {
@@ -11,7 +13,7 @@ const formatPayload = (
 
   // try parsing as JSON
   try {
-    return JSON.parse(parsedData);
+    return losslessJsonParse(parsedData);
   } catch {
     // remove double quotes from the string
     const formattedString = parsedData.replace(/"/g, '');

src/utils/data-formatters/format-workflow-history-event/__tests__/index.test.ts.snapshot

@@ -73,7 +73,7 @@ exports[`formatWorkflowHistoryEvent should format workflow activityTaskScheduled
   },
   "heartbeatTimeoutSeconds": 0,
   "input": [
-    1725747370575410000,
+    1725747370575409843n,
     "gadence-canary-xdc",
     "workflow.sanity",
   ],
@@ -523,7 +523,7 @@ exports[`formatWorkflowHistoryEvent should format workflow startChildWorkflowExe
     "fields": {},
   },
   "input": [
-    1726492751798812400,
+    1726492751798812308n,
     30000000000,
   ],
   "jitterStart": null,

src/utils/lossless-json-parse.ts

@@ -0,0 +1,16 @@
+import { parse, isSafeNumber, isInteger, type Reviver } from 'lossless-json';
+
+export default function losslessJsonParse(
+  json: string,
+  reviver?: Reviver | null | undefined
+) {
+  return parse(json, reviver, (value) => {
+    if (!isSafeNumber(value)) {
+      return BigInt(value);
+    }
+    if (isInteger(value)) {
+      return parseInt(value);
+    }
+    return parseFloat(value);
+  });
+}

src/utils/lossless-json-stringify.ts

@@ -0,0 +1,16 @@
+import { stringify, type Reviver } from 'lossless-json';
+
+export default function losslessJsonStringify(
+  json: unknown,
+  reviver?: Reviver | null | undefined,
+  space?: string | number | undefined
+) {
+  const stringified = stringify(json, reviver, space, [
+    {
+      test: (value) => typeof value === 'bigint',
+      stringify: (value) => (value || '').toString(),
+    },
+  ]);
+
+  return stringified || '';
+}

src/views/workflow-history/workflow-history-event-details-json/__tests__/workflow-summary-tab-json-view.test.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { render } from '@/test-utils/rtl';
 
+import losslessJsonStringify from '@/utils/lossless-json-stringify';
+
 import WorkflowSummaryTabJsonView from '../workflow-history-event-details-json';
 
 jest.mock('@/components/copy-text-button/copy-text-button', () =>
@@ -13,23 +15,28 @@ jest.mock('@/components/pretty-json/pretty-json', () =>
 );
 
 describe('WorkflowSummaryTabJsonView Component', () => {
-  const inputJson = { input: 'inputJson' };
+  const losslessInputJson = {
+    input: 'inputJson',
+    long: BigInt('9007199254740991345435'),
+  };
 
   it('renders correctly with initial props', () => {
     const { getByText } = render(
-      <WorkflowSummaryTabJsonView entryValue={inputJson} />
+      <WorkflowSummaryTabJsonView entryValue={losslessInputJson} />
     );
 
     expect(getByText('PrettyJson Mock')).toBeInTheDocument();
   });
 
   it('renders copy text button and pass the correct text', () => {
     const { getByText } = render(
-      <WorkflowSummaryTabJsonView entryValue={inputJson} />
+      <WorkflowSummaryTabJsonView entryValue={losslessInputJson} />
     );
 
     const copyButton = getByText(/Copy Button/);
     expect(copyButton).toBeInTheDocument();
-    expect(copyButton.innerHTML).toMatch(JSON.stringify(inputJson, null, '\t'));
+    expect(copyButton.innerHTML).toMatch(
+      losslessJsonStringify(losslessInputJson, null, '\t')
+    );
   });
 });

src/views/workflow-history/workflow-history-event-details-json/workflow-history-event-details-json.tsx

@@ -4,6 +4,7 @@ import React, { useMemo } from 'react';
 import CopyTextButton from '@/components/copy-text-button/copy-text-button';
 import PrettyJson from '@/components/pretty-json/pretty-json';
 import useStyletronClasses from '@/hooks/use-styletron-classes';
+import losslessJsonStringify from '@/utils/lossless-json-stringify';
 
 import { cssStyles } from './workflow-history-event-details-json.styles';
 import type { Props } from './workflow-history-event-details-json.types';
@@ -12,7 +13,7 @@ export default function WorkflowHistoryEventDetailsJson({ entryValue }: Props) {
   const { cls } = useStyletronClasses(cssStyles);
 
   const textToCopy = useMemo(() => {
-    return JSON.stringify(entryValue, null, '\t');
+    return losslessJsonStringify(entryValue, null, '\t');
   }, [entryValue]);
   return (
     <div className={cls.jsonViewWrapper}>

src/views/workflow-history/workflow-history-export-json-button/workflow-history-export-json-button.tsx

@@ -11,6 +11,7 @@ import { type GetWorkflowHistoryResponse } from '@/route-handlers/get-workflow-h
 import formatWorkflowHistoryEvent from '@/utils/data-formatters/format-workflow-history-event';
 import { type FormattedHistoryEvent } from '@/utils/data-formatters/schema/format-history-event-schema';
 import logger from '@/utils/logger';
+import losslessJsonStringify from '@/utils/lossless-json-stringify';
 import request from '@/utils/request';
 import { RequestError } from '@/utils/request/request-error';
 
@@ -23,7 +24,7 @@ export default function WorkflowHistoryExportJsonButton(props: Props) {
   >('idle');
 
   const downloadJSON = (jsonData: any) => {
-    const blob = new Blob([JSON.stringify(jsonData, null, '\t')], {
+    const blob = new Blob([losslessJsonStringify(jsonData, null, '\t')], {
       type: 'application/json',
     });
     const url = window.URL.createObjectURL(blob);

src/views/workflow-queries/workflow-queries-result-json/workflow-queries-result-json.tsx

@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
 
 import CopyTextButton from '@/components/copy-text-button/copy-text-button';
 import PrettyJson from '@/components/pretty-json/pretty-json';
+import losslessJsonStringify from '@/utils/lossless-json-stringify';
 
 import getQueryJsonContent from './helpers/get-query-json-content';
 import { styled } from './workflow-queries-result-json.styles';
@@ -15,7 +16,7 @@ export default function WorkflowQueriesResultJson(props: Props) {
   );
 
   const textToCopy = useMemo(() => {
-    return JSON.stringify(content, null, '\t');
+    return losslessJsonStringify(content, null, '\t');
   }, [content]);
 
   return (

src/views/workflow-queries/workflow-queries-result-json/workflow-queries-result-json.types.ts

@@ -1,4 +1,4 @@
-import { type JsonValue } from '@/components/pretty-json/pretty-json.types';
+import { type PrettyJsonValue } from '@/components/pretty-json/pretty-json.types';
 import { type QueryWorkflowResponse } from '@/route-handlers/query-workflow/query-workflow.types';
 import { type RequestError } from '@/utils/request/request-error';
 
@@ -9,6 +9,6 @@ export type Props = {
 };
 
 export type QueryJsonContent = {
-  content: JsonValue | undefined;
+  content: PrettyJsonValue | undefined;
   isError: boolean;
 };