nuxt / http

Universal HTTP Module for Nuxt.js
https://http.nuxtjs.org
MIT License
229 stars 51 forks source link

onRequest Hook in asyncData causes nuxt generate to hang forever #181

Open mdarrik opened 3 years ago

mdarrik commented 3 years ago

Didn't see an issue template, but will happily update this if there is one.

I'm using $http in a nuxt static site. I wanted to add the onRequest hook so we could log requests during our generate to a monitoring/observability service. What I found was that the hook seems to cause some requests to never resolve back to the template. This also happens with nuxt dev too.

I tried returning & not returning the response like this:

  $http.onResponse((request, options, response) => {
    console.log(response)
    return response
  })

or

  $http.onResponse((request, options, response) => {
     console.log(response)
  })

I see the console.log from the response, but the page making the request never resolves.

If I comment out the whole $http.onResponse block, the site builds just fine. I'm able to use the $http.onRequest hook without this issue, it's just the onResponse hook that seems to cause problems.

Reproduction Steps

  1. Create a Nuxt site for static hosting
  2. Add @nuxt/http & add an $http request to asyncData
  3. Create a plugin via the instructions here: https://http.nuxtjs.org/hooks#onresponse
  4. Register that plugin in the nuxt-config
  5. Run nuxt generate

Demo/Reproduction Repo

I made a demo repo using the pokemon api for the request here: https://github.com/mdarrik/http-middleware-test/

It's a plain nuxt-cli created repo with @nuxt/http, a server plugin that features the above code, and a request inside the asyncData function of the index.vue page.

System Info

OS: Ubuntu via WSL2 (also confirmed on MacOS) Node: 14.14.0

Other Info

If I switch the request in the demo from $http.$get to $http.get (no dollar sign) without changing any other code the promise seems to resolve. (it'll throw errors with properties accessed from the body being undefined), but if I update the request code like so:

$http.get(url).then(response => response.json()) 

the json conversion never seems to resolve. So it seems likely there's a bug in resolving the response body's stream if the onResponse hook is used?

jeanmatthieud commented 3 years ago

It seems to be an issue with the clone() function used by node-fetch: https://github.com/sindresorhus/ky-universal#clone-hangs-with-a-large-response-in-node---what-should-i-do https://github.com/node-fetch/node-fetch/issues/665

@nuxtjs/http should use node-fetch v3

I lost a lot of time with this issue...