Hello,
I am running into issues with loading next/image
components in my deployed NextJS project and was hoping someone could help me debug.
Issue: I am retrieving a number of image URLs from a third-party website (via my API, also deployed on fly) and rendering them client side using next/image
component.
(e.g.: https://i.scdn.co/image/ab67616d000048519d1381ade1f4138e70fd4df3).
It seems to only partially work as a few images are usually able to be displayed but others fail to load. I am trying to render at most 30 images. I am also seeing error messages in the logs but unfortunately I am not able to decipher them fully.
Logs: It appears like for each image that fails, I get the following logs. These also appear as 500 internal server errors in the browser console.
2023-08-25T15:41:16Z app[17811eedf94389] yyz [info]- ready started server on [::]:3000, url: http://localhost:3000
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]TypeError: fetch failed
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] at Object.fetch (node:internal/deps/undici/undici:11457:11)
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] at async invokeRequest (/app/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] at async invokeRender (/app/node_modules/next/dist/server/lib/router-server.js:254:29)
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] at async handleRequest (/app/node_modules/next/dist/server/lib/router-server.js:447:24)
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] at async requestHandler (/app/node_modules/next/dist/server/lib/router-server.js:464:13)
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] at async Server.<anonymous> (/app/node_modules/next/dist/server/lib/start-server.js:117:13) {
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] cause: Error: connect ECONNREFUSED 127.0.0.1:40911
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] errno: -111,
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] code: 'ECONNREFUSED',
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] syscall: 'connect',
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] address: '127.0.0.1',
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] port: 40911
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info] }
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]}
The app also seems to crash often to due OOM error (only when trying to render the images):
2023-08-25T15:51:20.127 app[17811eedf94389] yyz [info] - ready started server on [::]:3000, url: http://localhost:3000
2023-08-25T15:52:20.514 app[17811eedf94389] yyz [info] [ 61.857323] Out of memory: Killed process 272 (next-router-wor) total-vm:42795500kB, anon-rss:62692kB, file-rss:0kB, shmem-rss:0kB, UID:0 pgtables:1264kB oom_score_adj:0
2023-08-25T15:52:20.524 proxy[17811eedf94389] yyz [error] could not make HTTP request to instance: connection closed before message completed
Attempts: I tried to research the issue and so far I have tried the following:
- Install
sharp
npm package - Added
swap_size_mb = 512
to myfly.toml
file. Otherwise default. - Reduce the quality prop for
next/image
component - Ensure the image link directs to the lowest resolution available (64x64px; ~2kb per image)
So far, none of the above have helped. Unfortunately, I am still a novice dev and this is my first project I’ve tried deploying so I am not sure what to look out for. Any help would be much appreciated! If you require additional information or logs, please let me know.
Thank you,