Nuxt•4mo ago

onResponseError not running

code:

// plugins/02.adminApi.ts
const $adminApi = $fetch.create({
  baseURL: config.public.apiBase,
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json"
  },
  credentials: "include",
  onResponseError(ctx) {
    console.log("onResponseError", ctx)
  },
  onResponse(ctx) {
    console.log("onResponse", ctx)
  }
})

// plugins/02.adminApi.ts
const $adminApi = $fetch.create({
  baseURL: config.public.apiBase,
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json"
  },
  credentials: "include",
  onResponseError(ctx) {
    console.log("onResponseError", ctx)
  },
  onResponse(ctx) {
    console.log("onResponse", ctx)
  }
})

I can see neither one of these log when I get a 401 error. (for now I'm manually deleting the auth tokens and make a request to expect the error) I expect to see in the console 'onResponseError' : something based on this line

 onResponseError(ctx) {
    console.log("onResponseError", ctx)
  },

 onResponseError(ctx) {
    console.log("onResponseError", ctx)
  },

3 Replies

CakeOP•4mo ago

My end goal is to navigate the user back to /login when this happens full code:

// app/plugins/02.adminApi.ts
export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  const $adminApi = $fetch.create({
    baseURL: config.public.apiBase,
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json"
    },
    credentials: "include",
    onResponseError(ctx) {
      console.log("onResponseError", ctx)
    },
    onResponse(ctx) {
      console.log("onResponse", ctx)
    }
  })

  return {
    provide: {
      adminApi: $adminApi
    }
  }
})

// app/plugins/02.adminApi.ts
export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  const $adminApi = $fetch.create({
    baseURL: config.public.apiBase,
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json"
    },
    credentials: "include",
    onResponseError(ctx) {
      console.log("onResponseError", ctx)
    },
    onResponse(ctx) {
      console.log("onResponse", ctx)
    }
  })

  return {
    provide: {
      adminApi: $adminApi
    }
  }
})

// app/composables/useAdminApi.ts

import type { UseFetchOptions } from "#app"

export const useAdminApi = <T>(
  url: MaybeRefOrGetter<string>,
  options: UseFetchOptions<T> = {}
) => {
  const { $adminApi } = useNuxtApp()
  return useFetch(url, {
    ...options,
    $fetch: $adminApi
  })
}

// app/composables/useAdminApi.ts

import type { UseFetchOptions } from "#app"

export const useAdminApi = <T>(
  url: MaybeRefOrGetter<string>,
  options: UseFetchOptions<T> = {}
) => {
  const { $adminApi } = useNuxtApp()
  return useFetch(url, {
    ...options,
    $fetch: $adminApi
  })
}

// app/pages/admin/fabric-color.vue
const { data } = await useAdminApi<PaginatedResponse<OptionValue>>(
  `/api/options/2/values`,
  {
    params: {
      page,
      count,
      search
    }
  }
)

// app/pages/admin/fabric-color.vue
const { data } = await useAdminApi<PaginatedResponse<OptionValue>>(
  `/api/options/2/values`,
  {
    params: {
      page,
      count,
      search
    }
  }
)

bighead•3mo ago

https://github.com/nuxt/nuxt/issues/20090 related. I think I had similar issue, looks like onResponseError is meant for network-level errors. It wont be triggered for 401, 404, 500

GitHub

onResponseError({ request, options, response }) is not triggered ev...

Environment Operating System: Darwin Node Version: v16.17.1 Nuxt Version: 3.3.3 Nitro Version: 2.3.2 Package Manager: [email protected] Builder: vite User Config: app, imports, css, modules, pinia, vite...

bighead•3mo ago

I gave up on $fetch and useFetch and just use a regular fetch. I might come back to it when I get some patience

Gaming

Programming

onResponseError not running