How to properly handle API errors

[iBobik]

All good APIs return data or error with non-200 status code. How to handle errors universally, so I don't need to have nullchecks errors handling everywhere I use use[Client]?

I am ok with having plugin like this:

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('openFetch:onResponseError', (ctx) => {
    showError(ctx.response)
  })
})

Is is best practice for this module? Are there some disadvantages?

I know only about one - it does not fix types, so I have to nullcheck anyway (or silence him) to have Typescript satisfied. Is there a way to have all usages of use[Client] to return type without undefined, because errors are handled in the components?

[Norbiros]

Basically:

• $fetch - throws an error when a request fails.
• useFetch - wraps the call in a try block; if an error occurs, it returns null for data and sets the error in the error field.

Nuxt Open Fetch aims to implement useFetch without introducing major behavior changes. Your solution is the recommended approach. For specific requests where you don’t want showError to be called, you can simply use the fetch method with onResponseError: undefined, and it should work as expected.

For very advanced use cases, like retrying failed requests, consider overriding the Nuxt Open Fetch plugin.

For real-world examples, check out Hack4KrakSite. The openFetch.ts doesn’t use hooks, because it was created before they were introduced, but it works great as production-grade project.

In the near future, I plan to revisit the fetch implementation in that project, and I’ll share updates if I discover any new best practices / ideas.