framework icon indicating copy to clipboard operation
framework copied to clipboard

[unhandledRejection] Cannot set headers after they are sent to the client

Open mak33v opened this issue 2 years ago • 24 comments

[unhandledRejection] Cannot set headers after they are sent to the client

at new NodeError (node:internal/errors:372:5) at ServerResponse.setHeader (node:_http_outgoing:576:11) at sendError (/H:/nuxt%20projects/trademark/node_modules/h3/dist/index.mjs:216:13) at nodeHandler (/H:/nuxt%20projects/trademark/node_modules/h3/dist/index.mjs:375:15)

Due to a problem with dynamic imports, I moved all the resources of the application to the /public folder and now I constantly get this error, what could be the problem?

mak33v avatar May 28 '22 17:05 mak33v

I'm getting a similar error in both Chrome (102.0.5005.63) & Firefox (100.0.2)

ERROR  [unhandledRejection] Cannot set headers after they are sent to the client                                                                                                                                                                                             

  at new NodeError (internal/errors.js:322:7)
  at ServerResponse.setHeader (_http_outgoing.js:561:11)
  at sendError (node_modules/h3/dist/index.mjs:216:13)
  at nodeHandler (node_modules/h3/dist/index.mjs:375:15)

I'm not using a public folder. node: v14.19.2

"devDependencies": { "@nuxt/postcss8": "^1.1.3", "autoprefixer": "^10.4.7", "nuxt": "3.0.0-rc.3", "postcss": "^8.4.14" }, "dependencies": { "@nuxtjs/color-mode": "^3.0.3", "css-loader": "^6.7.1", "nes.css": "^2.3.0", "tailwindcss": "^3.0.24", "tailwindcss-dark-mode": "^1.1.7", }

What's also strange is the browser just randomly refreshes. There's a brief error when it happens, but the server rebuilds so fast I almost couldn't can't catch it in the console. Curse this blazingly fast server-side rendering! 🤣

I'm kind of wondering if this doesn't have something to due with remote debugging and forwarding ports on VS Code?

Edit:

I managed to catch the error by enabling Preserve Logs in Chrome & Firefox console settings. It looks like a websocket error coming from client.ts

Chrome:

client.ts:16 [vite] connecting...

runtime-core.esm-bundler.js:1331 <Suspense> is an experimental feature and its API will likely change.

client.ts:22 WebSocket connection to 'ws://localhost:24678/_nuxt/' failed: (anonymous) @ client:188

client.ts:219 [vite] server connection lost. polling for restart...
            ​    Fetch failed loading: GET "http://localhost:3000/_nuxt/__vite_ping".
                waitForSuccessfulPing @ client:347
                (anonymous) @ client:366

Navigated to http://localhost:3000/

D2theR avatar May 28 '22 22:05 D2theR

Getting this error to... but it seems to be a firefox issue.

ERROR [unhandledRejection] Cannot set headers after they are sent to the client 11:05:14

at new NodeError (node:internal/errors:372:5) at ServerResponse.setHeader (node:_http_outgoing:576:11) at sendError (node_modules/h3/dist/index.mjs:216:13) at nodeHandler (node_modules/h3/dist/index.mjs:376:15)

node v16.15.0

"devDependencies": { "@intlify/nuxt3": "^0.2.2", "@nuxtjs/tailwindcss": "^5.1.2", "nuxt": "3.0.0-rc.3" }, "dependencies": { "@pinia/nuxt": "^0.1.9", "@stripe/stripe-js": "^1.31.0", "graphql": "^16.5.0", "pinia": "^2.0.14", "villus": "^1.1.0" }

bitmonti avatar May 29 '22 09:05 bitmonti

Your Nuxt app si running inside Docker container?

misaon avatar May 31 '22 16:05 misaon

Does anyone use AdGuard adblocker?

bitmonti avatar Jun 10 '22 08:06 bitmonti

Does anyone use AdGuard adblocker?

I'm using Brave Adblock when i disable it, its doesnt giving any error. I think the adblock cause this error. I'm using rc4 by the way.

 ERROR  [unhandledRejection] Cannot set headers after they are sent to the client

  at new NodeError (node:internal/errors:371:5)
  at ServerResponse.setHeader (node:_http_outgoing:576:11)
  at sendError (node_modules/h3/dist/index.mjs:219:13)
  at nodeHandler (node_modules/h3/dist/index.mjs:378:15)

YusufcanY avatar Jun 15 '22 14:06 YusufcanY

Does anyone use AdGuard adblocker?

I don't use blockers and I get this error

mak33v avatar Jun 15 '22 15:06 mak33v

I'm getting the same error as @bitmonti, only on Firefox too. It appears twice when refreshing the page (CTRL+R).

 ERROR  [unhandledRejection] Cannot set headers after they are sent to the client

  at new NodeError (node:internal/errors:372:5)
  at ServerResponse.setHeader (node:_http_outgoing:576:11)
  at sendError (/C:/Users/kobyf/Dev/idb/node_modules/h3/dist/index.mjs:216:13)
  at nodeHandler (/C:/Users/kobyf/Dev/idb/node_modules/h3/dist/index.mjs:375:15)
`Node v16.15.0`
  "devDependencies": {
    "nuxt": "3.0.0-rc.3"
  },
  "dependencies": {
    "@pinia/nuxt": "^0.1.9",
    "pinia": "^2.0.14",
    "sass": "^1.52.0",
    "sass-loader": "^13.0.0"
  }

Jocabin avatar Jun 17 '22 11:06 Jocabin

I removed package-lock.json and node_modules. Than updated nuxt version "3.0.0-rc.3" to "3.0.0-rc.4".

This solved the problem for me.

bitmonti avatar Jun 17 '22 11:06 bitmonti

For me too, thanks !

Jocabin avatar Jun 17 '22 11:06 Jocabin

i'm still having this issue with rc4.

codeflorist avatar Jun 24 '22 07:06 codeflorist

I deleted the package lock file, the node_modules and the .nuxt directory. Then I installed the packages.

My nuxt entry in package.json is the following "nuxt": "npm:nuxt3@latest".

The problem still persists. I m using firefox developer edition.

pavloskafritsas avatar Jun 24 '22 08:06 pavloskafritsas

still persists for me (running inside Docker)

misaon avatar Jun 24 '22 12:06 misaon

I'm also having this issue on Safari 15.5 (running on Mac OS Monterey).

garyteofanus avatar Jun 29 '22 18:06 garyteofanus

I have same issue. For me this error is shown only in development mode in docker using https I run Nuxt in docker with HTTPS proxy (via nginx in docker).

I figured out that error is thrown when using useHead() for links in component or setting app.head.link in nuxt.config.ts. Does not matter if links files are from nuxt or from external URL

docker-compose.yaml

version: '3.8'

services:
  app:
    container_name: my-app
    build: .
    command:
      - sleep
      - '9999999999'
    ports:
      - '80:80'
    volumes:
      - .:/app:cached

  https-proxy:
    container_name: my-app-https-proxy
    image: nginx
    volumes:
      - './https-proxy-cert.cert:/var/https-proxy-cert.cert'
      - './https-proxy-cert.key:/var/https-proxy-cert.key'
      - './https-proxy.conf:/etc/nginx/conf.d/http-proxy.conf'
    ports:
      - '443:443'
      - '24678:24678'

volumes:
  node_modules:

https-proxy.conf

server {
    listen 443 ssl http2;
    server_name _;

    location / {
        proxy_pass http://app:80;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    ssl_protocols TLSv1.2;

    ssl_certificate     /var/https-proxy-cert.cert;
    ssl_certificate_key /var/https-proxy-cert.key;

    access_log /dev/stdout;
    error_log /dev/stderr;
}

server {
    listen 24678 ssl http2;
    server_name _;

    location / {
        proxy_pass http://app:24678;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    ssl_protocols TLSv1.2;

    ssl_certificate     /var/https-proxy-cert.cert;
    ssl_certificate_key /var/https-proxy-cert.key;

    access_log /dev/stdout;
    error_log /dev/stderr;
}

ivan-mihalic avatar Jun 30 '22 15:06 ivan-mihalic

I have the same problem

Georglider avatar Jul 02 '22 20:07 Georglider

I'm not using useHead() or app.head.link. Error still exists.

bitmonti avatar Jul 05 '22 05:07 bitmonti

I'm not using useHead() or app.head.link. Error still exists.

I assume the problem is more related to having pointers to external resources via Https than the useHead composable. Try maybe to comment out these external <link>s or <img>s, and see whether the problem disappears :)

ennioVisco avatar Jul 05 '22 05:07 ennioVisco

I'm not using any external resources either on links or images in any place of the app.

Working on a more or less fresh install of Nuxt rc4. But as you said, the error could be thrown by i18next related http requests.

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev -p 3002",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.4"
  },
  "dependencies": {
    "@nuxtjs/tailwindcss": "^5.1.2",
    "@pinia/nuxt": "^0.1.9",
    "i18next": "^21.8.10",
    "i18next-browser-languagedetector": "^6.1.4",
    "i18next-http-backend": "^1.4.1"
  }
}

bitmonti avatar Jul 05 '22 06:07 bitmonti

@danielroe after upgrade to latest nitropack, now working for me 👍🏼

misaon avatar Jul 11 '22 12:07 misaon

I'm using RC5 and the instant I add a file to the /public directory (like my favicon.ico file), I receive this error. [unhandledRejection] Cannot set headers after they are sent to the client

marty-mcgee avatar Jul 14 '22 11:07 marty-mcgee

I'm also facing this issue. (on rc.6)

I've tried various solutions mentioned above but none seem to resolve. I do notice that its somewhat sporadic (Possibly why some users are saying it has resolved the issue).

I haven't determined where the failure is, or whether a manual restart of nuxt is required to verify if a solution has any effect.

genu avatar Jul 22 '22 15:07 genu

I'm also facing this issue. (on rc.6)

I've tried various solutions mentioned above but none seem to resolve. I do notice that its somewhat sporadic (Possibly why some users are saying it has resolved the issue).

I haven't determined where the failure is, or whether a manual restart of nuxt is required to verify if a solution has any effect.

It seems it only appears at development time, so it shouldn't be a big issue anyway.

ennioVisco avatar Jul 22 '22 15:07 ennioVisco

Any updates about this issue :( ?

damevin avatar Aug 03 '22 06:08 damevin

I'm also facing this issue.

 "nuxt": "3.0.0rc.6"

Mnigos avatar Aug 06 '22 21:08 Mnigos

Same here, it happens randomly but it more often seems triggered when I use useCookie in a plugin or route middleware (though not every time, and I think it also happened when using it in a component at one point).

This one is very hard to pin down because I can't find a reliable trigger. Sometimes it happens when a 500 error is triggered, sometimes it happens without apparent causes. I'm on 3.0.0-rc.8 and running straight on my machine, not in a Docker container.

Morpheu5 avatar Aug 21 '22 20:08 Morpheu5

This is triggered when code modifies the headers of a response after the response has already been made. For example, you are redirecting within a setTimeout on server. Or It is possible to be triggered by user error, or of course it could be a bug in nitro/nuxt. I would need to see a reproduction to tell which is the cause.

danielroe avatar Aug 22 '22 09:08 danielroe

I suspect it may be caused by an error somewhere, it would make more sense than the others because I'm pretty sure I'm not doing any of that myself. However, I can't get enough logging to know for sure. Any time this happens, I only get a laconic 500 no-can-do error and no context.

I don't suppose useCookie or parseCookies do try to set cookies, right? Although, on occasion, I get a "can't read value X of undefined" apparently on these two calls, and it turns out the undefined part is the cookies themselves (as in: there is nothing to parse). I can circumvent this with a definedness check, but it would be good to figure out why this may happen. Should I open a bug in Nitro or H3?

Morpheu5 avatar Aug 22 '22 10:08 Morpheu5

Yes, the (vue app composable) useCookie will try to set a cookie if the value has changed from the initial value. I'm very happy for you to comment here with a reproduction, but it's probably a nuxt issue if there's a problem with the vue app composable.

danielroe avatar Aug 22 '22 10:08 danielroe

I couldn't reproduce it on an MRE but it doesn't look like it's useCookie trying to set a cookie at the wrong time. I get this error on the server's console instead

 ERROR  [unhandledRejection] Cannot set headers after they are sent to the client                                                                                                                                                                             20:16:37

  at new NodeError (node:internal/errors:377:5)
  at ServerResponse.setHeader (node:_http_outgoing:595:11)
  at sendError (node_modules/h3/dist/index.mjs:287:13)
  at nodeHandler (node_modules/h3/dist/index.mjs:450:15)

which points me to node_modules/h3/dist/index.mjs:287:13 which is

  event.res.statusCode = h3Error.statusCode;
  event.res.statusMessage = h3Error.statusMessage;
  event.res.setHeader("Content-Type", MIMES.json); // <--- setHeader is is at 287:13 precisely
  event.res.end(JSON.stringify(responseBody, null, 2));

but I can't get any more out of this. Would there be a way of getting more debug logging perhaps?

Morpheu5 avatar Aug 22 '22 18:08 Morpheu5

Reproduction for a way of triggering this: https://stackblitz.com/edit/github-u3et7v. HT: @benjamincanac.

danielroe avatar Sep 06 '22 14:09 danielroe