Open rusakovic opened 7 months ago
same error for me too. any updates?
Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!
In addition, I get this error
⨯ Error: failed to pipe response
at pipeToNodeResponse (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/pipe-readable.js:111:15)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async NextNodeServer.runEdgeFunction (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:1225:13)
at async NextNodeServer.handleCatchallRenderRequest (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:247:37)
at async NextNodeServer.handleRequestImpl (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:807:17)
at async invokeRender (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:163:21)
at async handleRequest (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:342:24)
at async requestHandlerImpl (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:366:13)
at async Server.requestListener (/app/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/start-server.js:140:13) {
[cause]: RuntimeError: memory access out of bounds
at wasm://wasm/005420d6:wasm-function[30]:0x3d9f3
at new a7 (/app/.next/server/app/remote-jobs/[slug]/opengraph-image/route.js:88:57743)
at new si (/app/.next/server/app/remote-jobs/[slug]/opengraph-image/route.js:88:61382)
at sp (/app/.next/server/app/remote-jobs/[slug]/opengraph-image/route.js:88:65344)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.start (/app/.next/server/app/remote-jobs/[slug]/opengraph-image/route.js:88:68482)
}
I had the same error
⨯ Error: failed to pipe response
at pipeToNodeResponse (/app/node_modules/next/dist/server/pipe-readable.js:111:15)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async NextNodeServer.runEdgeFunction (/app/node_modules/next/dist/server/next-server.js:1221:13)
at async NextNodeServer.handleCatchallRenderRequest (/app/node_modules/next/dist/server/next-server.js:242:37)
at async NextNodeServer.handleRequestImpl (/app/node_modules/next/dist/server/base-server.js:805:17) {
[cause]: Error: SVG data parsing failed cause unknown token at 1:2
at e.wbg.__wbg_new_15d3966e9981a196
…
In my case, I just removed the xml tag from my svg (it was created with Sketch), and I no longer had the error:
<?xml version="1.0" encoding="UTF-8"?>
I only had the error self hosted on a VPS, not on Vercel
I get the same error in the same use case. I don't have the xml
tag in my svg files.
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.
any update?
Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!
@rusakovic Can you verify if you are seeing this with Next.js version 14.1.3
? That version actually had a update with the Edge Runtime that was seeing memory issues.
Hello @samcx Thank you for your response. I switched to the official Nexjts Docker Compose implementation -> no memory leaks now.
@rusakovic Good to know!
I will be closing this in the meantime then.
We're on next 13.5.6 and getting
RuntimeError: memory access out of bounds
at wasm://wasm/005420d6:wasm-function[30]:0x3d9f3
at new o7 (/var/www/decomp.me/repo/frontend/.next/server/app/scratch/[slug]/opengraph-image/route.js:147:58693)
at new ie (/var/www/decomp.me/repo/frontend/.next/server/app/scratch/[slug]/opengraph-image/route.js:147:63111)
at render (/var/www/decomp.me/repo/frontend/.next/server/app/scratch/[slug]/opengraph-image/route.js:147:67140)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Object.start (/var/www/decomp.me/repo/frontend/.next/server/app/scratch/[slug]/opengraph-image/route.js:147:67445)
Am I understanding correctly that the issue is fixed in 14.1.3
(or beyond)? Or if it's still not fixed, would it be helpful for me to open a separate issue? I wasn't sure if the closure of this issue was more about the SVG parsing error or not
@ethteck Yes—it was likely fixed with this
thanks!
Unfortunately on 14.1.4 I'm still seeing this issue:
[cause]: RuntimeError: memory access out of bounds
at wasm://wasm/005420d6:wasm-function[30]:0x3d9f3
at new a9 (/var/www/decomp.me/repo/frontend/.next/server/app/scratch/[slug]/opengraph-image/route.js:83:57761)
at new so (/var/www/decomp.me/repo/frontend/.next/server/app/scratch/[slug]/opengraph-image/route.js:83:61611)
at sd (/var/www/decomp.me/repo/frontend/.next/server/app/scratch/[slug]/opengraph-image/route.js:83:65573)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.start (/var/www/decomp.me/repo/frontend/.next/server/app/scratch/[slug]/opengraph-image/route.js:83:68712)
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
Reproduced locally after running curl for ~20 mins in a while/do loop:
frontend-1 | ⨯ Error: failed to pipe response
frontend-1 | at pipeToNodeResponse (/frontend/node_modules/next/dist/server/pipe-readable.js:111:15)
frontend-1 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
frontend-1 | at async DevServer.runEdgeFunction (/frontend/node_modules/next/dist/server/next-server.js:1214:13)
frontend-1 | at async NextNodeServer.handleCatchallRenderRequest (/frontend/node_modules/next/dist/server/next-server.js:245:37)
frontend-1 | at async DevServer.handleRequestImpl (/frontend/node_modules/next/dist/server/base-server.js:791:17)
frontend-1 | at async /frontend/node_modules/next/dist/server/dev/next-dev-server.js:331:20
frontend-1 | at async Span.traceAsyncFn (/frontend/node_modules/next/dist/trace/trace.js:151:20)
frontend-1 | at async DevServer.handleRequest (/frontend/node_modules/next/dist/server/dev/next-dev-server.js:328:24)
frontend-1 | at async invokeRender (/frontend/node_modules/next/dist/server/lib/router-server.js:174:21)
frontend-1 | at async handleRequest (/frontend/node_modules/next/dist/server/lib/router-server.js:353:24)
frontend-1 | at async requestHandlerImpl (/frontend/node_modules/next/dist/server/lib/router-server.js:377:13)
frontend-1 | at async Server.requestListener (/frontend/node_modules/next/dist/server/lib/start-server.js:140:13) {
frontend-1 | [cause]: Error: SVG data parsing failed cause unknown token at 1:1
frontend-1 | at imports.wbg.__wbg_new_15d3966e9981a196 (webpack-internal:///(app-metadata-route)/./node_modules/next/dist/compiled/@vercel/og/index.edge.js:18473:17)
frontend-1 | at wasm://wasm/005420d6:wasm-function[515]:0x112c4c
frontend-1 | at wasm://wasm/005420d6:wasm-function[30]:0x3ffde
frontend-1 | at new Resvg (webpack-internal:///(app-metadata-route)/./node_modules/next/dist/compiled/@vercel/og/index.edge.js:18355:12)
frontend-1 | at new Resvg2 (webpack-internal:///(app-metadata-route)/./node_modules/next/dist/compiled/@vercel/og/index.edge.js:18571:5)
frontend-1 | at render (webpack-internal:///(app-metadata-route)/./node_modules/next/dist/compiled/@vercel/og/index.edge.js:18789:19)
frontend-1 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
frontend-1 | at async Object.start (webpack-internal:///(app-metadata-route)/./node_modules/next/dist/compiled/@vercel/og/index.edge.js:19007:25)
frontend-1 | }
frontend-1 | GET http://backend:8000/api/scratch/y9Xei
next-server is using a lot of memory:
@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 console.log()
statements to each function inside the RenderedImage
class, I don't see free() being called:
frontend-1 | RenderedImage.__wrap()
frontend-1 | RenderedImage.asPng()
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:
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.
@ethteck @mkst We'll need a simple
I have created a repo to clearly demonstrate the issue.
First load of the image:
Load after it's been loaded a number of times:
After a minute or so, the error occurs:
⨯ Error: failed to pipe response
at pipeToNodeResponse (/og/my-app/node_modules/next/dist/server/pipe-readable.js:111:15)
at async sendResponse (/og/my-app/node_modules/next/dist/server/send-response.js:40:13)
at async doRender (/og/my-app/node_modules/next/dist/server/base-server.js:1347:25)
at async cacheEntry.responseCache.get.routeKind (/og/my-app/node_modules/next/dist/server/base-server.js:1527:40)
at async DevServer.renderToResponseWithComponentsImpl (/og/my-app/node_modules/next/dist/server/base-server.js:1447:28)
at async DevServer.renderPageComponent (/og/my-app/node_modules/next/dist/server/base-server.js:1844:24)
at async DevServer.renderToResponseImpl (/og/my-app/node_modules/next/dist/server/base-server.js:1882:32)
at async DevServer.pipeImpl (/og/my-app/node_modules/next/dist/server/base-server.js:895:25)
at async NextNodeServer.handleCatchallRenderRequest (/og/my-app/node_modules/next/dist/server/next-server.js:269:17)
at async DevServer.handleRequestImpl (/og/my-app/node_modules/next/dist/server/base-server.js:791:17)
at async /og/my-app/node_modules/next/dist/server/dev/next-dev-server.js:331:20
at async Span.traceAsyncFn (/og/my-app/node_modules/next/dist/trace/trace.js:151:20)
at async DevServer.handleRequest (/og/my-app/node_modules/next/dist/server/dev/next-dev-server.js:328:24)
at async invokeRender (/og/my-app/node_modules/next/dist/server/lib/router-server.js:174:21)
at async handleRequest (/og/my-app/node_modules/next/dist/server/lib/router-server.js:353:24) {
[cause]: Error:
at imports.wbg.__wbg_new_15d3966e9981a196 (file:///og/my-app/node_modules/next/dist/compiled/@vercel/og/index.node.js:18465:17)
at wasm://wasm/005420d6:wasm-function[515]:0x112c4c
at wasm://wasm/005420d6:wasm-function[30]:0x3ffde
at new Resvg (file:///og/my-app/node_modules/next/dist/compiled/@vercel/og/index.node.js:18347:12)
at new Resvg2 (file:///og/my-app/node_modules/next/dist/compiled/@vercel/og/index.node.js:18563:5)
at render (file:///og/my-app/node_modules/next/dist/compiled/@vercel/og/index.node.js:18783:19)
at async Object.start (file:///og/my-app/node_modules/next/dist/compiled/@vercel/og/index.node.js:19006:25)
}
I'm running this on a machine with 128GB RAM and it's getting nowhere close to the limit before it stops working:
I have the same issue on version 14.1.4 when using node runtime to generate openGraph images at build time
any fixes
I have this error too but with the image. In my case on localhost, I just need npm run dev again to see error gone.
I have the error to, in localhost it work tho
bump, very annoying issue
Same here
Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!
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): https://github.com/vercel/next.js/issues/54482 https://github.com/vercel/next.js/issues/44685 https://github.com/vercel/next.js/issues/65451 https://github.com/vercel/next.js/issues/66103
also affected 👍
Are there any known workarounds for this issue? Like increasing available resources or something similar?
also affected
After increasing memory limit, I'm now getting this error (next@14.2.5):
⨯ Error: failed to pipe response
at pipeToNodeResponse (/usr/app/node_modules/next/dist/server/pipe-readable.js:126:15)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async NextNodeServer.runEdgeFunction (/usr/app/node_modules/next/dist/server/next-server.js:1250:13)
at async NextNodeServer.handleCatchallRenderRequest (/usr/app/node_modules/next/dist/server/next-server.js:248:37)
at async NextNodeServer.handleRequestImpl (/usr/app/node_modules/next/dist/server/base-server.js:816:17)
at async invokeRender (/usr/app/node_modules/next/dist/server/lib/router-server.js:174:21)
at async handleRequest (/usr/app/node_modules/next/dist/server/lib/router-server.js:353:24)
at async requestHandlerImpl (/usr/app/node_modules/next/dist/server/lib/router-server.js:377:13)
at async Server.requestListener (/usr/app/node_modules/next/dist/server/lib/start-server.js:141:13) {
[cause]: RuntimeError: memory access out of bounds
at wasm://wasm/005420d6:wasm-function[30]:0x3d9f3
at new st (/usr/app/client/.next/server/app/api/experimental/og/route.js:71:57771)
at new sa (/usr/app/client/.next/server/app/api/experimental/og/route.js:71:61621)
at sv (/usr/app/client/.next/server/app/api/experimental/og/route.js:71:65583)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.start (/usr/app/client/.next/server/app/api/experimental/og/route.js:71:68722)
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.tsx
Current vs. Expected behavior
On the first load of
/open-graph
the image is generated. But on cached version I got the errorwith
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-dynamic
to check if it helps) https://likeremote.com/remote-jobs/stripe-remote-job-staff-developer-advocate-developer-relations-7778/opengraph-imageThe error from Cloudlfare side, just 502 error, for sure![image](https://github.com/vercel/next.js/assets/17801144/640ebe71-704b-4906-bbbe-a2d10fcb1716)
Now I use
export const dynamic = "force-dynamic";
not to generate cache version.Expected: The cached open graph image showed correctly
Provide environment information
Which 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