NextJS 14 returns fetch failed with UND_ERR_CONNECT_TIMEOUT error on serverless function

[andremendonca03]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/gifted-shirley-mzlvgy?file=%2Fapp%2Fapi%2Froute.js%3A1%2C1-39%2C1

To Reproduce

1. From a client-side component, start a fecth POST request to an API endpoint (route handler) on form submission;
2. On an API serverless function realise another fetch POST request to an external API (in my case I used Slack message API);
3. On a production environment hosted on Vercel, around 70% of the requests to Slack are working while another 30% fail returning 500 server error code "UND_ERR_CONNECT_TIMEOUT".

Systems:

• Next.js v14.1.4
• Errors happen in both Pages and App Router
• Could only reproduce on a Prod environment hosted on Vercel
• Serverless function running node v20x
• Requests to external APIs from a client component work fine. Only serverless functions error out
• Slack API is working fine. Tested on other pure React apps and Postman and had no errors at all
• Problem seems to happen only on external API calls (tested Mailchimp as well and failed less times than Slack but still failing);

Full error message:
Unhandled Rejection: TypeError: fetch failed at node:internal/deps/undici/undici:12345:11 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { cause: ConnectTimeoutError: Connect Timeout Error at onConnectTimeout (node:internal/deps/undici/undici:7492:28) at node:internal/deps/undici/undici:7448:50 at Immediate._onImmediate (node:internal/deps/undici/undici:7480:13) at process.processImmediate (node:internal/timers:478:21) at process.callbackTrampoline (node:internal/async_hooks:130:17) { code: 'UND_ERR_CONNECT_TIMEOUT' } } Node.js process exited with exit status: 128. The logs above can help with debugging the issue.

Current vs. Expected behavior

Currently some external API calls from a serverless function are returning unhandled fetch errors.
Expected behaviour is no errors being returned and API call succeeding.

Provide environment information

Operating System:
Vercel Servers

Binaries:
Node: v20x (default vercel v20 setting)
npm: 10.2.3
yarn: 1.22.19
build command: yarn build

Relevant Packages: 
next: 14.1.4
react: 18.2.0
react-dom: 18.2.0

Next.js Config:
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  trailingSlash: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'site.com',
        port: '',
        pathname: '/wp-content/uploads/**',
      },
    ],
  },
}

module.exports = nextConfig;

Which area(s) are affected? (Select all that apply)

Module Resolution, Pages Router, Runtime

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

Additional information about the issue and more cases can be found at this discussion:
#57384

[icyJoseph]

This is most likely an Undici error.

• https://undici.nodejs.org/#/?id=network-address-family-autoselection

Can you try to collect more data about the endpoints that are failing?

[andremendonca03]

Hey @icyJoseph I only have these 2 APIs mentioned to test at the moment.
Haven't Undici been removed from next14?

[icyJoseph]

Hi, well, it's not a Next.js thing, rather Node.js' fetch implementation uses undici at its core.

For a world pre- Node 18 (17 really) Next js did a polyfill with node-fetch, to provide server side fetch, but since Node.js adopted fetch natively, Next.js just doesn't have to anymore.

[icyJoseph]

Maybe you can do an experiment. Does it also fail, if you create a node script, or just open the Node repl, and try to make a fetch request from there?

[andremendonca03]

I'm pretty sure this issue doesn't happen on local environments, only on live servers but I'll be testing on pure node soon.

I also found these 2 related issues?
nodejs/undici#2362
nodejs/undici#1531

[ornakash]

We have the exact same issue here

next@14.2.3

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[hrc7505]

@andremendonca03 See #57384 (comment)

[andremendonca03]

Yeah I'm on that discussion as well. For me though it only happens in production, not local.
Which API are you trying to fetch? Is it through a client component or a serverless function? @hrc7505

[hrc7505]

@andremendonca03

1. We are getting these issues in server-rendered pages. We are fetching apis and creating pages during build.
2. Same apis are working in browser during runtime.
3. I am randomly getting this issue; not every time. Once issue occurs, for rest of the day, it behaves same. But next day again it starts working.

Node: 18.17.1
Nextjs: 14.2.3

[osama554]

Facing same issue in my project using nextjs 14.

[Lersson]

Facing the same problem with Nextjs 14.2.3 and node 20 under comporate http_proxy network. In build time, Nextjs is trying to fetch some cloudflare addresses

[cause]: ConnectTimeoutError: Connect Timeout Error (attempted addresses: 104.16.24.34:443, 104.16.28.34:443, 104.16.26.34:443, 104.16.2.35:443, 104.16.0.35:443, 104.16.27.34:443, 104.16.31.34:443, 104.16.1.35:443, 104.16.30.34:443, 104.16.25.34:443, 104.16.29.34:443, 104.16.3.35:443)