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

[tomsseisums]

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: #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
  }
}

1. I would expect this to be shown by default in terminal logs. Without me having to try/catch + console.error to see the details.
2. 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.
3. 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

[tomsseisums]

This seems to have been introduced with v13.2 with the new error - <error> output, in v13.1 without error - <error> the error is displayed in full in server terminal. error.tsx still receives incomplete info, though.

Here is sandbox with 13.1, but otherwise same environment: https://codesandbox.io/p/sandbox/next-js-server-components-fetch-complete-error-if-uncaught-13-1-yvot4e

    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.1.6
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

[tomsseisums]

I think that might be this PR: #45472
cc: @hanneslund

[Athrun-Judah]

I had the same problem in the server component.

[kaloyanBozhkov]

I've documented this as well
#48744

[maciejadamski89]

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.

[MoncefDeveloper]

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.

[gempi]

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

[MoncefDeveloper]

@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
    ....
    ....
    ....

[Gr33nLight]

I tried almost every solution :')

Heyyyyyyy did you manage to find a solution to this?

[myzsqn]

I fixed this issue by ensuring that my endpoint URL was not involved in a redirect.

My example:

website.io was redirecting to www.website.io

Thus removing the Content-Length

#nodejs/undici#2046 (comment)

Hope it helps

[hrdwdmrbl]

Just in case people are missing it, the original author's "Expected Behavior" section gives a good workaround: try/catch your fetches for now.

[Sumitmaithani]

I also getting this error on next@13.4.12 everything works fine on locally but getting this error on deployment in vercel.

changed localhost:3000 to 127.0.0.1:3000 not worked

Want to see my code details https://github.com/Sumitmaithani/competency-passbook

Error loading courses:  TypeError: fetch failed
--
20:25:18.646 | at Object.fetch (node:internal/deps/undici/undici:11457:11)
20:25:18.646 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
20:25:18.647 | cause: Error: connect ECONNREFUSED 127.0.0.1:3000
20:25:18.647 | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
20:25:18.647 | at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
20:25:18.648 | errno: -111,
20:25:18.649 | code: 'ECONNREFUSED',
20:25:18.649 | syscall: 'connect',
20:25:18.657 | address: '127.0.0.1',
20:25:18.657 | port: 3000
20:25:18.657 | }