Fix for displaying large numbers in message body (#2206)

ensure large number precision isn't lost by standard JSON parsing

Author: PhilBastian

src/Frontend/package-lock.json

@@ -23,6 +23,7 @@
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "highlight.js": "^11.10.0",
+    "lossless-json": "^4.0.2",
     "memoize-one": "^6.0.0",
     "moment": "^2.30.1",
     "pinia": "^2.2.8",

src/Frontend/package.json

@@ -17,6 +17,7 @@ import { TYPE } from "vue-toastification";
 import { ExtendedFailedMessage, FailedMessageError, FailedMessageStatus, isError } from "@/resources/FailedMessage";
 import Message from "@/resources/Message";
 import { NServiceBusHeaders } from "@/resources/Header";
+import { parse, stringify } from "lossless-json";
 
 let refreshInterval: number | undefined;
 let pollingFaster = false;
@@ -154,8 +155,8 @@ async function downloadBody(message: ExtendedFailedMessage) {
   try {
     switch (response.headers.get("content-type")) {
       case "application/json": {
-        let jsonBody = await response.json();
-        jsonBody = JSON.parse(JSON.stringify(jsonBody).replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g, (m, g) => (g ? "" : m)));
+        const jsonBodyRaw = await response.text();
+        const jsonBody = parse(jsonBodyRaw.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g, (m, g) => (g ? "" : m)));
         message.messageBody = formatJson(jsonBody);
         return;
       }
@@ -260,8 +261,8 @@ function formatXml(xml: string) {
   return string.trim();
 }
 
-function formatJson(json: string) {
-  return JSON.stringify(json, null, 2);
+function formatJson(json: unknown) {
+  return stringify(json, null, 2) as string;
 }
 
 function togglePanel(panelNum: number) {