chore(ui/dependencies): update zod to version 4.3.5 and refactor API data parsing

Author: dest1n1s

ui-ssr/bun.lock

@@ -63,7 +63,7 @@
     "tailwindcss": "^4.0.6",
     "tw-animate-css": "^1.3.6",
     "vite-tsconfig-paths": "^5.1.4",
-    "zod": "^3.22.4"
+    "zod": "^4.3.5"
   },
   "devDependencies": {
     "@tanstack/devtools-event-client": "^0.3.2",

ui-ssr/package.json

@@ -3,6 +3,7 @@ import { createServerFn } from '@tanstack/react-start'
 import camelcaseKeys from 'camelcase-keys'
 import type { z } from 'zod'
 import { FeatureCompactSchema } from '@/types/feature'
+import { parseWithPrettify } from '@/utils/zod'
 
 export interface Bookmark {
   saeName: string
@@ -49,7 +50,10 @@ export const fetchBookmarks = createServerFn({ method: 'GET' })
     // Validate and parse feature data if present
     const bookmarks = camelCased.bookmarks.map((bookmark: any) => {
       if (bookmark.feature) {
-        bookmark.feature = FeatureCompactSchema.parse(bookmark.feature)
+        bookmark.feature = parseWithPrettify(
+          FeatureCompactSchema,
+          bookmark.feature,
+        )
       }
       return bookmark
     })

ui-ssr/src/api/bookmarks.ts

@@ -3,6 +3,7 @@ import { createServerFn } from '@tanstack/react-start'
 import camelcaseKeys from 'camelcase-keys'
 import { z } from 'zod'
 import type { CircuitData } from '@/types/circuit'
+import { parseWithPrettify } from '@/utils/zod'
 import { CircuitDataSchema } from '@/types/circuit'
 
 export type CircuitStatus = 'pending' | 'running' | 'completed' | 'failed'
@@ -109,7 +110,7 @@ export const fetchSaeSets = createServerFn({ method: 'GET' }).handler(
   async () => {
     const response = await fetch(`${process.env.BACKEND_URL}/sae-sets`)
     const data = await response.json()
-    return z.array(z.string()).parse(data)
+    return parseWithPrettify(z.array(z.string()), data)
   },
 )
 
@@ -242,7 +243,7 @@ export const fetchCircuit = createServerFn({ method: 'GET' })
         deep: true,
       }) as FetchCircuitResponse
 
-      result.graphData = CircuitDataSchema.parse(result.graphData)
+      result.graphData = parseWithPrettify(CircuitDataSchema, result.graphData)
 
       return result
     },

ui-ssr/src/api/circuits.ts

@@ -2,6 +2,7 @@ import { decode } from '@msgpack/msgpack'
 import camelcaseKeys from 'camelcase-keys'
 import { z } from 'zod'
 import { createServerFn } from '@tanstack/react-start'
+import { parseWithPrettify } from '@/utils/zod'
 import {
   FeatureCompactSchema,
   FeatureSampleCompactSchema,
@@ -12,7 +13,7 @@ export const fetchDictionaries = createServerFn({ method: 'GET' }).handler(
   async () => {
     const response = await fetch(`${process.env.BACKEND_URL}/dictionaries`)
     const data = await response.json()
-    return z.array(z.string()).parse(data)
+    return parseWithPrettify(z.array(z.string()), data)
   },
 )
 
@@ -23,7 +24,8 @@ export const fetchMetrics = createServerFn({ method: 'GET' })
       `${process.env.BACKEND_URL}/dictionaries/${dictionary}/metrics`,
     )
     const data = await response.json()
-    return z.object({ metrics: z.array(z.string()) }).parse(data).metrics
+    return parseWithPrettify(z.object({ metrics: z.array(z.string()) }), data)
+      .metrics
   })
 
 export type MetricFilters = Record<string, { min?: number; max?: number }>
@@ -81,7 +83,7 @@ export const fetchFeature = createServerFn({ method: 'GET' })
       ],
     })
 
-    return FeatureSchema.parse(camelCased)
+    return parseWithPrettify(FeatureSchema, camelCased)
   })
 
 export const fetchSamplings = createServerFn({ method: 'GET' })
@@ -100,9 +102,10 @@ export const fetchSamplings = createServerFn({ method: 'GET' })
       deep: true,
     })
 
-    return z
-      .array(z.object({ name: z.string(), length: z.number() }))
-      .parse(camelCased)
+    return parseWithPrettify(
+      z.array(z.object({ name: z.string(), length: z.number() })),
+      camelCased,
+    )
   })
 
 export const fetchSamples = createServerFn({ method: 'GET' })
@@ -150,7 +153,7 @@ export const fetchSamples = createServerFn({ method: 'GET' })
       const decoded = decode(new Uint8Array(arrayBuffer)) as any
       const camelCased = camelcaseKeys(decoded)
 
-      return z.array(FeatureSampleCompactSchema).parse(camelCased)
+      return parseWithPrettify(z.array(FeatureSampleCompactSchema), camelCased)
     },
   )
 
@@ -188,7 +191,7 @@ export const countFeatures = createServerFn({ method: 'GET' })
     }
 
     const data = await response.json()
-    return z.object({ count: z.number() }).parse(data).count
+    return parseWithPrettify(z.object({ count: z.number() }), data).count
   })
 
 export const fetchFeatures = createServerFn({ method: 'GET' })
@@ -224,7 +227,7 @@ export const fetchFeatures = createServerFn({ method: 'GET' })
       ],
     })
 
-    return z.array(FeatureCompactSchema).parse(camelCased)
+    return parseWithPrettify(z.array(FeatureCompactSchema), camelCased)
   })
 
 export const submitCustomInput = createServerFn({ method: 'POST' })
@@ -257,7 +260,7 @@ export const submitCustomInput = createServerFn({ method: 'POST' })
       stopPaths: ['context'],
     })
 
-    return FeatureSampleCompactSchema.parse(camelCased)
+    return parseWithPrettify(FeatureSampleCompactSchema, camelCased)
   })
 
 export const toggleBookmark = createServerFn({ method: 'POST' })
@@ -343,12 +346,13 @@ export const dictionaryInference = createServerFn({ method: 'POST' })
       ],
     })
 
-    return z
-      .array(
+    return parseWithPrettify(
+      z.array(
         z.object({
           feature: FeatureCompactSchema,
           inference: FeatureSampleCompactSchema,
         }),
-      )
-      .parse(camelCased)
+      ),
+      camelCased,
+    )
   })

ui-ssr/src/api/features.ts

@@ -9,6 +9,7 @@ import { AlertCircle, Loader2 } from 'lucide-react'
 import { useCallback, useMemo, useState } from 'react'
 import { z } from 'zod'
 import type { CircuitData, FeatureNode, VisState } from '@/types/circuit'
+import { parseWithPrettify } from '@/utils/zod'
 import {
   circuitQueryOptions,
   circuitStatusQueryOptions,
@@ -35,7 +36,7 @@ const searchParamsSchema = z.object({
 })
 
 export const Route = createFileRoute('/circuit/$id/')({
-  validateSearch: searchParamsSchema,
+  validateSearch: (search) => parseWithPrettify(searchParamsSchema, search),
   staticData: {
     fullScreen: true,
   },

ui-ssr/src/routes/circuit.$id.index.tsx

@@ -2,6 +2,7 @@ import { Link, createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useEffect, useState } from 'react'
 import { z } from 'zod'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { parseWithPrettify } from '@/utils/zod'
 import { Button } from '@/components/ui/button'
 import { FeatureBookmarkButton } from '@/components/feature/bookmark-button'
 import { FeatureCard } from '@/components/feature/feature-card'
@@ -28,7 +29,7 @@ const searchParamsSchema = z.object({
 export const Route = createFileRoute(
   '/dictionaries/$dictionaryName/features/$featureIndex',
 )({
-  validateSearch: searchParamsSchema,
+  validateSearch: (search) => parseWithPrettify(searchParamsSchema, search),
   staticData: {
     fullScreen: true,
   },

ui-ssr/src/routes/dictionaries.$dictionaryName.features.$featureIndex.tsx

@@ -0,0 +1,14 @@
+import { z } from 'zod'
+
+export function parseWithPrettify<T>(schema: z.ZodType<T>, data: unknown): T {
+  try {
+    return schema.parse(data)
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      // Use built-in prettifyError from Zod 4
+      const message = z.prettifyError(error)
+      throw new Error(message)
+    }
+    throw error
+  }
+}