fix: OPTIC-683: Detect and convert large integers automatically in API responses before parsing as JSON to retain precision

web/libs/datamanager/src/utils/__tests__/helpers.test.ts

@@ -0,0 +1,60 @@
+import * as helpers from "../helpers";
+
+describe("helpers", () => {
+  const originalMaxSafeInteger = Number.MAX_SAFE_INTEGER;
+
+  beforeEach(() => {
+    // Mock Number.MAX_SAFE_INTEGER to a smaller value for testing purposes as NodeJS supports larger integers than Web.
+    Object.defineProperty(Number, "MAX_SAFE_INTEGER", {
+      value: 9007199254740991,
+    });
+  });
+
+  afterEach(() => {
+    Object.defineProperty(Number, "MAX_SAFE_INTEGER", {
+      value: originalMaxSafeInteger,
+    });
+  });
+
+  describe("jsonReviverWithBigInt", () => {
+    it("should return the source value if the value is a number and the source is defined and exceeds MAX_SAFE_INTEGER", () => {
+      const key = "key";
+      const value = 9007199254740992;
+      const source = "9007199254740992";
+      const context = { source };
+
+      const result = helpers.jsonReviverWithBigInt(key, value, context);
+      expect(result).toBe(source);
+    });
+
+    it("should return the source value if the value is a number and the source defined is less than -MAX_SAFE_INTEGER", () => {
+      const key = "key";
+      const value = -9007199254740992;
+      const source = "-9007199254740992";
+      const context = { source };
+
+      const result = helpers.jsonReviverWithBigInt(key, value, context);
+      expect(result).toBe(source);
+    });
+
+    it("should return the value if the value is a number and the source defined is less than or equal to MAX_SAFE_INTEGER", () => {
+      const key = "key";
+      const value = 9007199254740991;
+      const source = 9007199254740991;
+      const context = { source };
+
+      const result = helpers.jsonReviverWithBigInt(key, value, context);
+      expect(result).toBe(source);
+    });
+  });
+
+  it("should return the value if the value is a number and the source defined is greater than or equal to -MAX_SAFE_INTEGER", () => {
+    const key = "key";
+    const value = -9007199254740991;
+    const source = -9007199254740991;
+    const context = { source };
+
+    const result = helpers.jsonReviverWithBigInt(key, value, context);
+    expect(result).toBe(source);
+  });
+});

web/libs/datamanager/src/utils/api-proxy/index.js

@@ -9,7 +9,7 @@
  * }} EndpointConfig
  */
 
-import { formDataToJPO } from "../helpers";
+import { formDataToJPO, parseJson } from "../helpers";
 import statusCodes from "./status-codes.json";
 
 /**
@@ -242,7 +242,7 @@ export class APIProxy {
           try {
             const responseData =
               rawResponse.status !== 204
-                ? JSON.parse(this.alwaysExpectJSON ? responseText : responseText || "{}")
+                ? parseJson(this.alwaysExpectJSON ? responseText : responseText || "{}")
                 : { ok: true };
 
             if (methodSettings.convert instanceof Function) {

web/libs/datamanager/src/utils/helpers.ts

@@ -12,6 +12,34 @@ export const formDataToJPO = (formData: FormData) => {
   return formData;
 };
 
+/**
+ * Hydrate JSON values that are large integers to strings.
+ */
+export const jsonReviverWithBigInt = (_key: any, value: any, context?: any) => {
+  if (typeof value === "number" && context?.source !== undefined && Math.abs(value) > Number.MAX_SAFE_INTEGER) {
+    // If the number would overflow the JS number precision, retain it to a string
+    // from the original source string.
+    // Leaving as a string and not a BigInt to avoid issues with JSON.stringify or other cases downstream.
+    return context.source;
+  }
+  return value;
+};
+/**
+ * Parse a JSON string and convert big integers to strings.
+ * We convert only big integers that are still integers within the JSON string
+ * to avoid JS number precision issues when displaying them in the UI.
+ * This is a workaround for the fact that JSON.parse does not directly support big integers and will
+ * immediately convert them to numbers (losing precision).
+ *
+ * ex. { "id": 12345678901234567890 } => { "id": "12345678901234567890" }
+ *     { "id": -12345678901234567890 } => { "id": "-12345678901234567890" }
+ *     { "meta": { "id": 12345678901234567890 } } => { "meta": { "id": "12345678901234567890" } }
+ *     { "meta": { "id": -12345678901234567890 } } => { "meta": { "id": "-12345678901234567890" } }
+ **/
+export const parseJson = <T = any>(jsonString: string): T => {
+  return JSON.parse(jsonString, jsonReviverWithBigInt) as T;
+};
+
 export const objectToMap = <T extends Record<string, any>>(object: T) => {
   return new Map(Object.entries(object ?? {}));
 };