next.js: "TypeError: fetch failed" is an incomplete error: `fetch` in Server Component, if throws and isn't caught, loses info

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant packages:
      next: 13.4.3-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/next-js-server-components-fetch-incomplete-error-if-uncaught-o09yqm

To Reproduce

In server component, try to load data from an non-existent URL without try/catch.

await fetch('http://127.0.0.1:1337/non-existent')

Describe the Bug

The terminal logs just:

TypeError: fetch failed

And with next dev, it will be surfaced to frontend with just the same:

Unhandled runtime error
TypeError: fetch failed

If I include my own error.tsx and try to destructure the error into const { name, message, trace, cause, ...rest } = error, it will still be incomplete, having only name and message (and digest in ...rest), and there the name even will be dropped from TypeError to just Error.

Related: https://github.com/vercel/next.js/issues/44062, but there the focus isn’t on error being incomplete, rather that it happens at all.

The issue seems that it only surfaces first line for low-level errors (ECONNREFUSED etc.). Which is why the #44062 seems like a mysterious thing, albeit if you look inside, you’d see that it’s the localhost resolving to ::1 IPv6 issue at most cases.

Expected Behavior

Given I try/catch and console.error('FULL ERROR', e) the error and get this out:

FULL ERROR:  TypeError: fetch failed
    at Object.fetch (/project/sandbox/node_modules/next/dist/compiled/undici/index.js:1:26669)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:1337
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1247:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 1337
  }
}

I would expect this to be shown by default in terminal logs. Without me having to try/catch + console.error to see the details.
I would expect the error.tsx to also have the full info available, as it is for any other (although with this I’m not sure) uncaught exception in Server Component.
I would expect the Error surfaced to error.tsx not to lose it’s name (error.tsx shows Error instead of TypeError).

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

About this issue

Original URL
State: closed
Created a year ago
Reactions: 15
Comments: 42 (6 by maintainers)

Commits related to this issue

Display original failed fetch trace (#60274) ### What Show the original fetch error trace in the dev error overlay, which can show which line of the fetch call is failing. #### After ![imag... — committed to vercel/next.js by huozhi 6 months ago

Most upvoted comments

Try upgrading to the latest canary and see if it helps your project

I tried updating to version 13.5.2 but still get the same error. It will randomly display a few endpoints

timomedia on Sep 22, 2023

I am having this issue as well, with errorno: -4078 and code: 'ECONNREFUSED' starting with TypeError: fetch failed..., always followed by The server is running out of memory, restarting to free up memory.

(Every time this error occurs, I see different value on Port:xxx but the rest is always the same with node:internal/deps/undici…

Node version tested (all having same issues): 16.20.2, 18.17.1, 20.5.1 NextJS version tested (all having same issues): 13.4.6, 13.4.19 Package Manager: pnpm 8.7.1 Typescript version: 5.2.2

Project dependencies:

"dependencies": {
    "@adobe/react-spectrum": "^3.29.0",
    "@formatjs/intl-localematcher": "^0.4.0",
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@reduxjs/toolkit": "^1.9.5",
    "@tailwindcss/forms": "^0.5.5",
    "@types/negotiator": "^0.6.1",
    "@types/node": "^20.5.9",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "async-mutex": "^0.4.0",
    "autoprefixer": "^10.4.15",
    "classnames": "^2.3.2",
    "client-only": "^0.0.1",
    "encoding": "^0.1.13",
    "eslint": "^8.48.0",
    "eslint-config-next": "13.4.19",
    "negotiator": "^0.6.3",
    "next": "13.4.19",
    "next-auth": "^4.23.1",
    "next-themes": "^0.2.1",
    "postcss": "^8.4.28",
    "react": "18.2.0",
    "react-aria": "^3.27.0",
    "react-country-flag": "^3.1.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.10.1",
    "react-redux": "^8.1.2",
    "react-stately": "^3.25.0",
    "react-toastify": "^9.1.3",
    "react-tooltip": "^5.21.1",
    "server-only": "^0.0.1",
    "styled-components": "6.0.7",
    "tailwindcss": "^3.3.3",
    "typescript": "5.2.2"
  }

The deployed web app seems to be running fine but in the dev env, I constantly encounter this server crash error when HMR occurs (on code change), about every 20 minutes or so.

These are all kinds of attempts I made so far to solve this issue.

Tried removing all cache in .next folder and re-run; no luck.
Explicitly specified the Hostname and the port when running the dev server: npx next dev -H 127.0.0.1 -p 3000 or npx next dev -H 0.0.0.0 -p 3000; no luck.
Use ‘127.0.0.1:8000’ instead of ‘http://localhost:8000’ as part of my api endpoint of local backend server; no luck.

Edited: The error message is a bit different in Next 13.4.6 or lower

andy-leezard on Sep 3, 2023

Currently, I’m experiencing this issue on my linux duing development. Is there any solution yet?

DevEmmy on Aug 23, 2023

@MoncefDeveloper have you tried to update to v13.4.4-canary.9 according to #50298 (comment)?

thanks Gempi. I updated my app to 13.4.4 but still faced the same error. after that, I tried to switch the node to 16! still showing me the same error I tried almost every solution 😂

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3000
  }
}
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3000
  }
}
/item/....
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3000
  }
}
TypeError: fetch failed
    ....
    ....
    ....

MoncefDeveloper on May 25, 2023

Same for me - can’t fetch from server component. From client component there are no any problems. Change request url from localhost:8000 to 127.0.0.1:8000 solved my problem.

maciejadamski89 on May 24, 2023

Having the same issue too !

Zakisb on Sep 17, 2023

Gettiing this below error when trying to build my nextjs project, i tried chaging the localhost to 127.0.0.1 in the env but it’s not working, It would be great if anybody can help me get through this error.

My Versions: next - 13.4.19 node - 18.17.1

TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11576:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { cause: Error: connect ECONNREFUSED 127.0.0.1:3000 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) { errno: -4078, code: ‘ECONNREFUSED’, syscall: ‘connect’, address: ‘127.0.0.1’, port: 3000 } }

Error occurred prerendering page “/blog”. Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11576:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

info Generating static pages (13/13)

Export encountered errors on following paths: /blog/page: /blog

parthy007 on Sep 13, 2023

Now It is officially documented in a Next Js docs that it is better to fetch data from direct source instead of using local api route in Server components. Because at build time Server components will not able tofind those routes which are not still built yet. And you can refer the examples there.

It works in dev env because dev server don’t create pre rendered static pages.

could you share the link that point to the docs?

Sure, https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating

MAhmedSid on Nov 9, 2023

We got a PR up here to fix this 🙏

huozhi on Jan 9, 2024

Now It is officially documented in a Next Js docs that it is better to fetch data from direct source instead of using local api route in Server components. Because at build time Server components will not able tofind those routes which are not still built yet. And you can refer the examples there.

It works in dev env because dev server don’t create pre rendered static pages.

MAhmedSid on Nov 4, 2023

async function getData() { const res = await fetch(‘https://localhost:8080/api/v1/posts’) // The return value is not serialized // You can return Date, Map, Set, etc.

if (!res.ok) { // This will activate the closest error.js Error Boundary throw new Error(‘Failed to fetch data’) }

return res.json() }

export default async function Page() { const data = await getData()

return <main>…</main> }

I’ve got this from here yet getting the same error.

eademir on Oct 27, 2023

same here

renanrodrigueszup on Aug 23, 2023

I have this issue in next.js version 13.4.13 as well (node 20.4.9). Is there a fix in the pipeline?

em1l1000 on Aug 9, 2023

same problem Changing ‘localhost’ to ‘127.0.0.1’, still causes the same problem. add dns.setDefaultResultOrder(‘ipv4first’) to my app, still the same problem.

MoncefDeveloper on May 25, 2023