Search code examples
javascripthttprequestfetch-apinuxt3.js

How to resolve NS_BINDING_ABORTED in Nuxt 3 useFetch?

I'm getting this error multiple times in the network tab (after resizing the view):

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: ConnectTimeoutError: Connect Timeout Error
      at onConnectTimeout (node:internal/deps/undici/undici:8522:28)
      at node:internal/deps/undici/undici:8480:50
      at Immediate._onImmediate (node:internal/deps/undici/undici:8511:13)
      at process.processImmediate (node:internal/timers:476:21)
      at process.callbackTrampoline (node:internal/async_hooks:130:17) {
    code: 'UND_ERR_CONNECT_TIMEOUT'
  }
}

Network tab

enter image description here

FE

await useFetch('/api/test', {
  method: 'POST',
  body: bodyInfos,
});

Server/Api

// server/api/test.post.js

// post to db
await fetch(SUPABASE_URL, {
  method: 'POST',
  headers: {
   apikey: SUPABASE_KEY,
   Authorization: `Bearer ${SUPABASE_KEY}`,
   'Content-Type': 'application/json',
  },
  body: JSON.stringify(testData),
}).catch((e) => console.log(e));

Context

I'm building an analytics tool that fires an event to my database in an onMounted hook. However, due to this network error, my database is being spammed with thousands of entries. I've read that this only happens in Firefox. But I have this problem in Chrome as well.

I would expect that this api call will only post once, but after resize events it will just fire tens more and fill my database with the same entries.

Questions

  • Do I have to add an expire value to my header sending the initial call to my endpoint?
  • Why does this error occurs in the first place?
Solution

  • I've changed useFetch with $fetch and it's working now without any errors.

    ps. I'm using the fetch inside a composable. Here is one answer from the GitHub Discussions.

    tl;dr: useFetch is for components using script setup. For composables use $fetch