Blog
Error handling in nuqs source code.

Error handling in nuqs source code.

In this article, we review Error handling in nuqs source code. We will look at:

  1. error() function.

  2. How is error function called?

error() function

Where to find this error function? You will find this error function in a file named error.ts, Which is part of nuqs package and this is in nuqs codebase. nuqs is a Type-safe search params state manager for React frameworks - Like useState, but stored in the URL query string

export const errors = {
  303: 'Multiple adapter contexts detected. This might happen in monorepos.',
  404: 'nuqs requires an adapter to work with your framework.',
  409: 'Multiple versions of the library are loaded. This may lead to unexpected behavior. Currently using `%s`, but `%s` (via the %s adapter) was about to load on top.',
  414: 'Max safe URL length exceeded. Some browsers may not be able to accept this URL. Consider limiting the amount of state stored in the URL.',
  429: 'URL update rate-limited by the browser. Consider increasing `throttleMs` for key(s) `%s`. %O',
  500: "Empty search params cache. Search params can't be accessed in Layouts.",
  501: 'Search params cache already populated. Have you called `parse` twice?'
} as const

export function error(code: keyof typeof errors) {
  return `[nuqs] ${errors[code]}
  See https://err.47ng.com/NUQS-${code}`
}

This error function accepts a parameter which is a code and this code is of type keyof typeof errors. Errors is an object that contains codes well, basically you have 303, 404 etc and they are the keys. However the values are strings so the keys are of type numbers and the values are of type string.

export const errors = {
  303: 'Multiple adapter contexts detected. This might happen in monorepos.',
  404: 'nuqs requires an adapter to work with your framework.',
  409: 'Multiple versions of the library are loaded. This may lead to unexpected behavior. Currently using `%s`, but `%s` (via the %s adapter) was about to load on top.',
  414: 'Max safe URL length exceeded. Some browsers may not be able to accept this URL. Consider limiting the amount of state stored in the URL.',
  429: 'URL update rate-limited by the browser. Consider increasing `throttleMs` for key(s) `%s`. %O',
  500: "Empty search params cache. Search params can't be accessed in Layouts.",
  501: 'Search params cache already populated. Have you called `parse` twice?'
} as const

This error function returns a string, that’s all it does. But, the way the value inside this string is computed is completely based on code. you see based on the code, you will get the string from the errors object and then it will be nuqs.

For Example: if the error is 303, you will call something like this 

return `[nuqs]' Multiple adapter contexts detected. This might happen in monorepos.'
 See https://err.47ng.com/NUQS-${303}`
}

How is error function called?

In a file named context.ts, at line number 25, you will see that error function is called and the code passed here is 303.

if (window.__NuqsAdapterContext && window.__NuqsAdapterContext !== context) {
    console.error(error(303))
  }

This error function is imported from the errors file at line number 3 in the lib/context.ts.

import { error } from '../../errors'

At line number 12, in the context.ts you will see that error function is called with 404 code.

export const context = createContext<AdapterContext>({
  useAdapter() {
    throw new Error(error(404))
  }
})

You will see that error function is actually used in a lot of other places within this nuqs codebase. For example, the way you can find that out is by looking at list of symbols on the right side

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

Configure features such as Changesets, Supabase auth in your Next.js project using Think Throo CLI.

Email — ramu@thinkthroo.com

My Github —  https://github.com/ramu-narasinga

My website —  https://ramunarasinga.com

My YouTube channel —  https://www.youtube.com/@ramu-narasinga

Learning platform —  https://thinkthroo.com

Codebase Architecture —  https://app.thinkthroo.com/architecture

Best practices —  https://app.thinkthroo.com/best-practices

Production-grade projects —  https://app.thinkthroo.com/production-grade-projects

References

  1. https://github.com/47ng/nuqs/blob/next/packages/nuqs/src/adapters/lib/context.ts#L25

  2. https://github.com/47ng/nuqs/blob/next/packages/nuqs/src/errors.ts#L11