add a JSONSafeParse function to handle parsing errors

server/app/query/view/[id]/page.tsx

@@ -22,6 +22,7 @@ import {
   initialRunTimeByRemoteServer,
 } from "@/app/query/servers";
 import { StatsComponent } from "@/app/query/view/[id]/charts";
+import { JSONSafeParse } from "@/app/utils";
 import { getQuery, Query } from "@/data/query";
 
 export default function QueryPage({ params }: { params: { id: string } }) {
@@ -58,11 +59,6 @@ export default function QueryPage({ params }: { params: { id: string } }) {
     setStatsHidden(!statsHidden);
   }
 
-
-  const queryParams = Object.entries(
-    JSON.parse((query?.params as string) || "{}"),
-  );
-
   function handleCheckbox(e: React.ChangeEvent<HTMLInputElement>) {
     const remoteServer = e.target.id;
 
@@ -81,6 +77,10 @@ export default function QueryPage({ params }: { params: { id: string } }) {
     }
   }
 
+  const queryParams = Object.entries(
+    JSONSafeParse((query?.params as string) || "{}"),
+  );
+
   const kill = async (remoteServers: RemoteServersType) => {
     const query: Query = await getQuery(params.id);
 

server/app/utils.ts

@@ -0,0 +1,12 @@
+export function JSONSafeParse(s: string) {
+  try {
+    return JSON.parse(s);
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      console.error(`${error}`);
+      console.error(`Failed to parse JSON from string ${s}`);
+      return {};
+    }
+    throw error;
+  }
+}