Next.js Discord

Discord Forum

How to catch/handle fetch errors by Next Image?

Unanswered
Capple posted this in #help-forum
Open in Discord
Hello,

I'm pulling images from an external/3rd party website and I assume there's a rate limit so I get errors like this. How can I handle them, so they wouldn't spam my server's console?

TypeError: fetch failed
    at Object.fetch (C:\Users\user\Desktop\test-project\node_modules\next\dist\compiled\undici\index.js:1:26669)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async imageOptimizer (C:\Users\user\Desktop\test-project\node_modules\next\dist\server\image-optimizer.js:521:29)
    at async cacheEntry.imageResponseCache.get.incrementalCache (C:\Users\user\Desktop\test-project\node_modules\next\dist\server\next-server.js:415:72)
    at async C:\Users\user\Desktop\test-project\node_modules\next\dist\server\response-cache\index.js:99:36 {
  cause: Error: connect ECONNREFUSED 111.11.11.11:443
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '111.11.11.11',
    port: 443
  }
}

<Image
            style={{ borderRadius: "inherit", objectFit: "contain" }}
            onError={() => setImageError(true)}
            width={width}
            height={width}
            src={url}
            alt={url}
            sizes="40px"
          />

3 Replies

This is also making my server crash
.