TLDR;
When executing a fetch request from a serverless function it sometimes fails returning a UND_ERR_CONNECT_TIMEOUT on a Nex.js production environment hosted on Vercel.
I currently have a Next.js site (v14.1.4 - Pages router) running on the Vercel platform (Node v20x) that performs fetch requests to the Slack API from an API route through a serverless function. This is a breakdown of what happens before the error:
- From a client-side component, start a fecth POST request to an API endpoint (route handler) on form submission;
- On an API serverless function realise another fetch POST request to an external API (in my case I used Slack message API - "https://slack.com/api/chat.postMessage");
- 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".
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.
IMPORTANT NOTE: I've seen this issue happening in both pages and app routers but more frequently on the pages router. Also, it only happens on production environments hosted on Vercel. I could not (personally) reproduce from my local server nor dev environments.
Reproducible By
This codepen contains an example of the code being used to trigger the fetch requests coming from the input form submission to the serverless function API call.
https://codesandbox.io/p/devbox/gifted-shirley-mzlvgy?file=%2Fapp%2Fapi%2Froute.js%3A1%2C1-39%2C1
Expected Behaviour
Currently some external API calls from a serverless function are returning undici unhandled fetch errors.
Expected behaviour is no errors being returned and API call succeeding every time.
Environment
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
Additional Context
Additional information about the issue and more cases can be found at:
vercel/next.js#57384
vercel/next.js#66373
TLDR;
When executing a fetch request from a serverless function it sometimes fails returning a UND_ERR_CONNECT_TIMEOUT on a Nex.js production environment hosted on Vercel.
I currently have a Next.js site (v14.1.4 - Pages router) running on the Vercel platform (Node v20x) that performs fetch requests to the Slack API from an API route through a serverless function. This is a breakdown of what happens before the error:
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.IMPORTANT NOTE: I've seen this issue happening in both pages and app routers but more frequently on the pages router. Also, it only happens on production environments hosted on Vercel. I could not (personally) reproduce from my local server nor dev environments.
Reproducible By
This codepen contains an example of the code being used to trigger the fetch requests coming from the input form submission to the serverless function API call.
https://codesandbox.io/p/devbox/gifted-shirley-mzlvgy?file=%2Fapp%2Fapi%2Froute.js%3A1%2C1-39%2C1
Expected Behaviour
Currently some external API calls from a serverless function are returning undici unhandled fetch errors.
Expected behaviour is no errors being returned and API call succeeding every time.
Environment
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
Additional Context
Additional information about the issue and more cases can be found at:
vercel/next.js#57384
vercel/next.js#66373