Replies: 37 comments 7 replies
This comment was marked as off-topic.
This comment was marked as off-topic.
-
|
In addition, I get this error |
Beta Was this translation helpful? Give feedback.
-
|
I had the same error In my case, I just removed the xml tag from my svg (it was created with Sketch), and I no longer had the error: I only had the error self hosted on a VPS, not on Vercel |
Beta Was this translation helpful? Give feedback.
-
|
I get the same error in the same use case. I don't have the The error also seems to occur randomly. At least there is doesn't occurs everytime and I can't see a clear pattern for now. I am hosting on a VPS. |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
|
@rusakovic Can you verify if you are seeing this with Next.js version |
Beta Was this translation helpful? Give feedback.
-
|
Hello @samcx Thank you for your response. I switched to the official Nexjts Docker Compose implementation -> no memory leaks now. |
Beta Was this translation helpful? Give feedback.
-
|
@rusakovic Good to know! I will be closing this in the meantime then. |
Beta Was this translation helpful? Give feedback.
-
|
We're on next 13.5.6 and getting Am I understanding correctly that the issue is fixed in |
Beta Was this translation helpful? Give feedback.
-
|
@ethteck Yes—it was likely fixed with this |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately on 14.1.4 I'm still seeing this issue: I see 5.5/7.58G of memory used on the device, so I don't think this is due to memory scarcity, but I'm not 100% sure edit: after restarting the next.js server, memory usage dropped to only 200MB from the 2000+ it was using earlier. this seems like a memory leak |
Beta Was this translation helpful? Give feedback.
-
|
Reproduced locally after running curl for ~20 mins in a while/do loop: next-server is using a lot of memory: |
Beta Was this translation helpful? Give feedback.
-
|
@samcx, please can this issue be reopened so the root cause of the memory leak can be investigated? For some reason, resvg/resvg2 is being given garbage data to try to parse. I think it's tricky to debug, I also don't know where this code lives (besides looking at index.edge.js on npmjs). Could it be that the image data is never free'd? The memory usage seemed to raise around 5mb per request... Edit: I tried adding some It's fair to say I'm just hacking around, but if I call free here, the memory usage is much more sensible (it grows at maybe 500kb/request): --- node_modules/next/dist/compiled/@vercel/og/index.edge.js.orig 2024-03-24 19:43:50.664334383 +0000
+++ node_modules/next/dist/compiled/@vercel/og/index.edge.js 2024-03-24 19:44:02.624426590 +0000
@@ -18784,7 +18784,10 @@
value: options.width
}
});
- return resvgJS.render().asPng();
+ const image = resvgJS.render();
+ const png = image.asPng();
+ image.free();
+ return png;
}
// src/figma/index.tsx}Been running curl on a loop for 20+ minutes and memory is significantly lower than without this change: |
Beta Was this translation helpful? Give feedback.
-
|
I have the same problem in 14.1.3 When I use an SVG in an OG ImageResponse, it generates memory leaks and errors in a short period of time. Error: SVG data parsing failed cause unknown token at 1:1 Edit: I have the problem without using SVG too.
|
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
|
Could we get an update on this? It seems several others are affected by the memory leak. Related issues (I think these are all the same root problem): |
Beta Was this translation helpful? Give feedback.
-
|
also affected 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Are there any known workarounds for this issue? Like increasing available resources or something similar? |
Beta Was this translation helpful? Give feedback.
-
|
also affected |
Beta Was this translation helpful? Give feedback.
-
|
After increasing memory limit, I'm now getting this error ([email protected]): |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
|
@mkst Thanks for sharing. Have you tried removing the The If anybody else has a recent |
Beta Was this translation helpful? Give feedback.
-
|
There's a repro here https://github.com/orgs/vercel/discussions/6117 - someone else raising the same thing (and saying how you guys don't appear to be free-ing the allocated memory) |
Beta Was this translation helpful? Give feedback.
-
|
@mkst Thanks for sharing. I was able to confirm the issue to be with the package and not with Next.js. I will be converting this issue to a discussion in the meantime. |
Beta Was this translation helpful? Give feedback.
-
|
So, who is ultimately responsible for fixing the issue? Where is the repo for |
Beta Was this translation helpful? Give feedback.
-
|
@mkst We are—we own I've already notified the team about the status on it! |
Beta Was this translation helpful? Give feedback.
-
|
@samcx any updates? |
Beta Was this translation helpful? Give feedback.
-
|
@mixeden
|
Beta Was this translation helpful? Give feedback.
-
|
@samcx I updated to 0.6.4 and no longer see the issue. |
Beta Was this translation helpful? Give feedback.
-
|
Also affected |
Beta Was this translation helpful? Give feedback.
-
|
One silly thing that I just noticed, Vercel Authentication (in Project Settings/Deployment Protection) on Preview deployments (which is enabled by default) causes my open graph image rendering route handlers to silently 500. Disabling that toggle fixes this issue, in case it helps anyone else. |
Beta Was this translation helpful? Give feedback.
-
|
I had to diff @vercel/og's code manually because I couldn't find a changelog, but it appears that 0.6.3 may have fixed the issue: Left is 0.6.2 and right is 0.6.3. It seems they used @mizdra 's patch here: https://github.com/mizdra/repro-vercel-og-memory-leak/blob/fix-memory-leak/patches/%40vercel%2Bog%2B0.6.2.patch So presumably, the memory leak is gone in 0.6.3. However, 0.6.4 is out now as well, and that introduced many changes, so I can't really speak to the newest version. |
Beta Was this translation helpful? Give feedback.
-
|
OK so this is fixed in next v14.2.13, no need to update See: https://github.com/vercel/next.js/releases/tag/v14.2.13
|
Beta Was this translation helpful? Give feedback.
-
|
I have the same problem in nexjts 15.0.4 when adding a img element into my |
Beta Was this translation helpful? Give feedback.
-
|
I was able to fix this issue by converting the images to base64 and jpeg I will write a snippet here -> export async function GET(req: Request) {
const size = {
width: 1200,
height: 630,
}
const previewImageBase64 = await Promise.all(
imagesUrls.map(async (imageUrl) => {
try {
const response = await fetch(imageUrl)
const arrayBuffer = await response.arrayBuffer()
const processedBuffer = await sharp(Buffer.from(arrayBuffer))
.resize(100, 100, { fit: 'cover', background: 'white' })
.jpeg({ quality: 100 })
.toBuffer()
return `data:image/jpeg;base64,${processedBuffer.toString('base64')}`
} catch (error) {
console.error('Error processing image:', error)
return null
}
})
)
return new ImageResponse(
(
<div style={{ display: 'flex', gap: '4px' }}>
{previewImageBase64.map((image, index) => (
<img
key={index}
style={{ objectFit: 'contain' }}
width="200"
height="200"
src={image || ''}
alt={`Imagen ${index + 1}`}
/>
))}
</div>
),
{
...size,
}
)
}Maybe it helps someone! 🫶 |
Beta Was this translation helpful? Give feedback.
-
|
Latest update: #70091 (reply in thread) |
Beta Was this translation helpful? Give feedback.
and others
-
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/amazing-easley-s8cw85?file=%2Fapp%2F%5Bslug%5D%2Fopengraph-image.tsx%3A48%2C18
To Reproduce
opengraph-image.tsxCurrent vs. Expected behavior
On the first load of
/open-graphthe image is generated.But on cached version I got the error
with
export const dynamic = "force-dynamic";I receive the similar error.Update 25.01. I get this error now
Live check (could work when you open, because I use
force-dynamicto check if it helps)https://likeremote.com/remote-jobs/stripe-remote-job-staff-developer-advocate-developer-relations-7778/opengraph-image
The error from Cloudlfare side, just 502 error, for sure
Now I use
export const dynamic = "force-dynamic";not to generate cache version.Expected: The cached open graph image showed correctly
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:53:18 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6000 Binaries: Node: 20.10.0 npm: 10.2.3 Yarn: 1.22.19 pnpm: 8.10.5 Relevant Packages: next: 14.1.0 eslint-config-next: 14.0.4 react: 18.2.0 react-dom: 18.2.0 typescript: 5.2.2 Next.js Config: output: N/AWhich area(s) are affected? (Select all that apply)
Dynamic imports (next/dynamic), Image optimization (next/image, next/legacy/image), Middleware / Edge (API routes, runtime)
Which stage(s) are affected? (Select all that apply)
Other (Deployed)
Additional context
No response
Beta Was this translation helpful? Give feedback.
All reactions