fix: Safe parse everywhere

- Fix actual printout (wrong interpolation)
- Improve DX by printing which key failed to parse

Author: franky47

packages/nuqs/src/parsers.ts

@@ -277,10 +277,11 @@ export function parseAsArrayOf<ItemType>(
       }
       return query
         .split(separator)
-        .map(item =>
+        .map((item, index) =>
           safeParse(
             itemParser.parse,
-            item.replaceAll(encodedSeparator, separator)
+            item.replaceAll(encodedSeparator, separator),
+            `[${index}]`
           )
         )
         .filter(value => value !== null && value !== undefined) as ItemType[]

packages/nuqs/src/useQueryState.ts

@@ -230,7 +230,7 @@ export function useQueryState<T = string>(
         : // Components mounted after page load must use the current URL value
           new URLSearchParams(location.search).get(key) ?? null
     const value = queueValue ?? urlValue
-    return value === null ? null : safeParse(parse, value)
+    return value === null ? null : safeParse(parse, value, key)
   })
   const stateRef = React.useRef(internalState)
   debug(
@@ -243,7 +243,7 @@ export function useQueryState<T = string>(
   if (process.env.__NEXT_WINDOW_HISTORY_SUPPORT) {
     React.useEffect(() => {
       const value = initialSearchParams.get(key) ?? null
-      const state = value === null ? null : parse(value)
+      const state = value === null ? null : safeParse(parse, value, key)
       debug('[nuqs `%s`] syncFromUseSearchParams %O', key, state)
       stateRef.current = state
       setInternalState(state)
@@ -259,7 +259,7 @@ export function useQueryState<T = string>(
     }
     function syncFromURL(search: URLSearchParams) {
       const value = search.get(key) ?? null
-      const state = value === null ? null : parse(value)
+      const state = value === null ? null : safeParse(parse, value, key)
       debug('[nuqs `%s`] syncFromURL %O', key, state)
       updateInternalState(state)
     }

packages/nuqs/src/useQueryStates.ts

@@ -178,7 +178,7 @@ function parseMap<KeyMap extends UseQueryStatesKeysMap>(
     const urlQuery = searchParams?.get(key) ?? null
     const queueQuery = getQueuedValue(key)
     const query = queueQuery ?? urlQuery
-    const value = query === null ? null : safeParse(parse, query)
+    const value = query === null ? null : safeParse(parse, query, key)
     obj[key as keyof KeyMap] = value ?? defaultValue ?? null
     return obj
   }, {} as Values<KeyMap>)

packages/nuqs/src/utils.ts

@@ -1,11 +1,21 @@
 import { warn } from './debug'
 import type { Parser } from './parsers'
 
-export function safeParse<T>(parser: Parser<T>['parse'], value: string) {
+export function safeParse<T>(
+  parser: Parser<T>['parse'],
+  value: string,
+  key?: string
+) {
   try {
     return parser(value)
   } catch (error) {
-    warn('[nuqs] Error while parsing value `%s`: %O', error)
+    warn(
+      '[nuqs] Error while parsing value `%s`: %O' +
+        (key ? ' (for key `%s`)' : ''),
+      value,
+      error,
+      key
+    )
     return null
   }
 }