nextjs runtime_error ai_generated partial

Error: The operation was aborted. (Edge Runtime) / fetch failed: aborted

ID: nextjs/edge-runtime-fetch-aborted

Also available as: JSON · Markdown · 中文
80%Fix Rate
85%Confidence
1Evidence
2023-12-15First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
Next.js 14.0.0 active — — —
Next.js 14.1.0 active — — —
Next.js 14.2.0 active — — —
Vercel Edge Runtime 2024 active — — —

Root Cause

A fetch request in the Edge Runtime (middleware or edge function) exceeded the 30-second timeout or was aborted due to a resource limit, causing the request to be terminated prematurely.

generic

中文

边缘运行时（中间件或边缘函数）中的 fetch 请求超过了 30 秒超时或由于资源限制被中止，导致请求提前终止。

Official Documentation

https://nextjs.org/docs/messages/edge-runtime-timeout

Workarounds

  1. 85% success Move the fetch logic to a Server Component or API route that runs on Node.js, which has no 30-second timeout limit. Example: create an API route at app/api/proxy/route.ts that performs the fetch and call it from the edge middleware. 
    Move the fetch logic to a Server Component or API route that runs on Node.js, which has no 30-second timeout limit. Example: create an API route at app/api/proxy/route.ts that performs the fetch and call it from the edge middleware.
  2. 75% success Optimize the fetch target to respond faster (e.g., add caching headers, reduce payload size, or use a CDN). Also ensure the fetch uses a reasonable timeout like { signal: AbortSignal.timeout(25000) } to fail gracefully before the hard limit. 
    Optimize the fetch target to respond faster (e.g., add caching headers, reduce payload size, or use a CDN). Also ensure the fetch uses a reasonable timeout like { signal: AbortSignal.timeout(25000) } to fail gracefully before the hard limit.
  3. 70% success If the fetch is in middleware, use `next: { revalidate: 60 }` in the fetch options to cache the response and reduce repeated calls. 
    If the fetch is in middleware, use `next: { revalidate: 60 }` in the fetch options to cache the response and reduce repeated calls.

中文步骤

  1. 将 fetch 逻辑移到运行在 Node.js 上的服务器组件或 API 路由中，这些组件没有 30 秒超时限制。示例：在 app/api/proxy/route.ts 中创建一个执行 fetch 的 API 路由，然后从边缘中间件调用它。
  2. 优化 fetch 目标以更快响应（例如，添加缓存头、减少负载大小或使用 CDN）。同时确保 fetch 使用合理的超时，如 { signal: AbortSignal.timeout(25000) }，以便在硬限制之前优雅地失败。
  3. 如果 fetch 在中间件中，在 fetch 选项中使用 `next: { revalidate: 60 }` 来缓存响应并减少重复调用。

Dead Ends

Common approaches that don't work:

  1. 90% fail

    The Edge Runtime has a hard 30-second timeout per request that cannot be overridden by client-side timeout options; the platform enforces this limit.

  2. 100% fail

    XMLHttpRequest is not available in the Edge Runtime; only fetch and a subset of Web APIs are supported.

  3. 70% fail

    The underlying timeout or resource limit will still apply on each retry, and infinite retries can exhaust memory or cause cascading failures.