Из-за чего при build проекта на Next js ошибка TypeError: fetch failed ([cause]: ConnectTimeoutError: Connect Timeout Error)?

Ссылка скопирована
Next.js nextjs
1 ответ

По вводным:, подскажите, есть проект на Next js 14.2.3. С вот такими роутами: 

app/(routes)/(catalog)/foo/[...slug]/page.jsx app/(routes)/(catalog)/bar/[...slug]/page.jsx app/(routes)/(catalog)/test/[...slug]/page.jsx

По вводным: внутри каждого компонента одинаковая логика генерации, но почему-то при npm run build на сервере падают много таких вот ошибок: 

TypeError: fetch failed at node:internal/deps/undici/undici:12500:13 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Module.w ([MASKED]//.next/server/app/(routes)/(catalog)/foo/[...slug]/page.js:1:7994) { digest: '1853411761', [cause]: ConnectTimeoutError: Connect Timeout Error at onConnectTimeout (node:internal/deps/undici/undici:6621:28) at node:internal/deps/undici/undici:6573:50 at Immediate._onImmediate (node:internal/deps/undici/undici:6605:13) at process.processImmediate (node:internal/timers:478:21) at process.callbackTrampoline (node:internal/async_hooks:130:17) { code: 'UND_ERR_CONNECT_TIMEOUT' } }

По вводным: компонент у меня вот такой: 

import React, {Suspense} from "react"; import {notFound} from "next/navigation"; export async function generateMetadata({params}) { let info = (process.env.NODE_ENV === 'development') ? {cache: 'no-store'} : {}; if (params.slug) { const path = `${process.env.API_URL}/path/${params.slug.join('/')}?type=foo` const res = await fetch(path, info) if (res.ok) { const instance = await res.json() return { title: instance?.data?.title, description: instance?.data?.description, robots: { index: instance?.data?.index, follow: instance?.data?.follow, } } } } return { title: '', description: '', } } export async function generateStaticParams() { let result = []; let info = (process.env.NODE_ENV === 'development') ? {cache: 'no-store'} : {}; for (let l = 1; l <= 3; l++) { const path = `${process.env.API_URL}/path/l/${l}` const res = await fetch(path, info) const items = await res.json() let r = items.map(elem => { return { slug: elem.url.split("/") } }) result = [...result, ...r] } return result } export default async function Page({params, searchParams}) { let items = []; let info = (process.env.NODE_ENV === 'development') ? {cache: 'no-store'} : {next: {revalidate: 120}}; const {slug} = params const page = Math.max(1, Number(searchParams?.page ?? 1)) const res = await fetch(`${process.env.API_URL}/path/s/${slug.join('/')}?type=foo`, info) if (!res.ok) { return notFound(); } const instance = await res.json() if (instance?.data) { const resEx = await fetch(buildUrl(instance?.data, {page}), {next: {revalidate: 120}}) if (!resEx.ok) { return notFound(); } items = await resEx.json() } return ( <> ... </>); }

По вводным: fetch делает запросы к бэкенд сервису, я в логах php-fpm видел что он в момент билда пытается увеличитьpm.max_children settingНужно понять: возможно не хватает на сервер ресурсов?

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Алексей Денисов Ответ

Ошибка Next.js TypeError: fetch failed с причиной ConnectTimeoutError при build почти всегда означает, что во время сборки приложение пытается сходить во внешний API или внутренний backend, но не может подключиться за отведенное время. Это не ошибка React-компонента, а сетевой вызов, который выполняется на этапе server-side build/render.

Чаще всего виноваты generateStaticParams, generateMetadata, Server Components, getStaticProps в старом pages router или код, который импортируется на сервере и сразу делает fetch. В dev всё может работать, а на build падать, потому что переменные окружения другие, API недоступен из CI/контейнера или endpoint слушает только localhost.

  • проверьте URL API в переменных окружения для build;
  • убедитесь, что backend доступен из той среды, где запускается next build;
  • не используйте localhost, если сборка идет в Docker-контейнере;
  • добавьте timeout, обработку ошибок и fallback;
  • для динамических данных используйте runtime render, а не статическую сборку.

Для диагностики временно залогируйте endpoint перед fetch:

const url = process.env.API_URL + '/posts';
console.log('Build fetch URL:', url);
 
const res = await fetch(url, {
  next: { revalidate: 60 }
});
 
if (!res.ok) {
  throw new Error('API error: ' + res.status);
}

const url = process.env.API_URL + '/posts'; console.log('Build fetch URL:', url); const res = await fetch(url, { next: { revalidate: 60 } }); if (!res.ok) { throw new Error('API error: ' + res.status); }

Если API может быть недоступен, не роняйте сборку без необходимости. Для страниц, где данные не критичны, можно вернуть пустой массив или заглушку. Для приватных API проверьте токены на стороне сборки. Если всё работает локально, но падает на сервере, проверьте DNS, firewall, Docker network и то, доступен ли внешний домен с машины сборки через curl.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Искусственный интеллект Что делать, если OpenRouter ограничивает доступ к моделям? 1 ответ