search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.21k stars 26.48k forks source link

Open graph image. SVG data parsing failed cause unknown token at 1:1 #61047

Open rusakovic opened 7 months ago

rusakovic commented 7 months ago

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

  1. Self-hosted NGINX server
  2. Cloudflare CDN
  3. Build app
  4. Upload to self host
  5. Open Dynamic opengraph-image.tsx
/* eslint-disable @next/next/no-img-element */
import supabase from "@/supabase/supabase";
import { ImageResponse } from "next/og";

export const runtime = "edge";

export const dynamic = "force-dynamic"; // Sure, should work without this!!! Temp solution

const LOGO = 'https://site.com/logo.png'

// Image metadata
export const alt = "Alt text";

export const size = {
  width: 1200,
  height: 630,
};

export const contentType = "image/png";

// Image generation
export default async function Image({ params: { slug } }:) {
  try {
    const { data } = await supabase
      .from("table")
      .select(id)
      .match({ slug })
      .single();

    if (!data) {
      return {
        title: "Titl",
      };
    }

    return new ImageResponse(
      (
        // ImageResponse JSX element
        <div
          style={{
            fontFamily: "Inter",
            display: "flex",
            alignItems: "center",
            flexDirection: "column",
            height: "100%",
            width: "100%",
            paddingLeft: "5%",
            paddingRight: "5%",
            background: "linear-gradient(to top right, #F9FAFB, #FFEDD5)",
          }}
        >
          <div
            style={{
              display: "flex",
              height: "20%",
              alignSelf: "flex-start",
              alignItems: "center",
            }}
          >
            <img
              // @ts-ignore because no other instructions https://vercel.com/docs/functions/edge-functions/og-image-generation/og-image-examples#using-a-local-image
              src={LOGO}
              alt="logo"
              style={{
                width: "50px",
                height: "50px",
                objectFit: "cover",
              }}
            />
        </div>
      ),
      // ImageResponse options
      {
        // For convenience, we can re-use the exported opengraph-image
        // size config to also set the ImageResponse's width and height.
        ...size,
        // @ts-ignore
        // fonts: await getFonts(),
      }
    );
  } catch (error) {
    console.error("Failed to fetch logo", error);
    // Handle error or return a default image
  }
}

Current vs. Expected behavior

On the first load of /open-graph the image is generated. But on cached version I got the 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 sendResponse (/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/send-response.js:40:13)
    at async doRender (/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:1363:25)
    at async cacheEntry.responseCache.get.routeKind (/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:1555:28)
    at async NextNodeServer.renderToResponseWithComponentsImpl (/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:1463:28)
    at async NextNodeServer.renderPageComponent (/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:1856:24)
    at async NextNodeServer.renderToResponseImpl (/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:1894:32)
    at async NextNodeServer.pipeImpl (/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:911:25)
    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:271:17) {
  [cause]: Error: SVG data parsing failed cause unknown token at 1:1
      at imports.wbg.__wbg_new_15d3966e9981a196 (file:///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/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:///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/compiled/@vercel/og/index.node.js:18347:12)
      at new Resvg2 (file:///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/compiled/@vercel/og/index.node.js:18563:5)
      at render (file:///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/compiled/@vercel/og/index.node.js:18783:19)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.start (file:///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/compiled/@vercel/og/index.node.js:19006:25)
}

with export const dynamic = "force-dynamic"; I receive the similar 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]: Error: SVG data parsing failed cause unknown token at 1:1
      at e.wbg.__wbg_new_15d3966e9981a196 (/app/.next/server/app/remote-jobs/[slug]/opengraph-image/route.js:88:59785)
      at wasm://wasm/005420d6:wasm-function[515]:0x112c4c
      at wasm://wasm/005420d6:wasm-function[30]:0x3ffde
      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)
}

Update 25.01. I get this error now

 ⨯ 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)
}

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-image

The error from Cloudlfare side, just 502 error, for sure image

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/A

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

HassanIyan commented 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!

rusakovic commented 7 months ago

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)
}
efd1 commented 6 months ago

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

drazik commented 6 months ago

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.

HassanIyan commented 5 months ago

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!

samcx commented 5 months ago

@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.

rusakovic commented 5 months ago

Hello @samcx Thank you for your response. I switched to the official Nexjts Docker Compose implementation -> no memory leaks now.

samcx commented 5 months ago

@rusakovic Good to know!

I will be closing this in the meantime then.

ethteck commented 5 months ago

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

samcx commented 5 months ago

@ethteck Yes—it was likely fixed with this :pr: → https://github.com/vercel/next.js/pull/62955, which is in https://github.com/vercel/next.js/releases/tag/v14.1.3 and above.

ethteck commented 5 months ago

thanks!

ethteck commented 5 months ago

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

mkst commented 5 months ago

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: image

mkst commented 5 months ago

@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: image

jnm733 commented 4 months ago

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.

Captura de pantalla 2024-03-26 a las 9 08 38

samcx commented 4 months ago

@ethteck @mkst We'll need a simple :repro: to take a look at this!

mkst commented 4 months ago

I have created a repo to clearly demonstrate the issue.

First load of the image: image

Load after it's been loaded a number of times: image

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: image

ramzanh commented 4 months ago

I have the same issue on version 14.1.4 when using node runtime to generate openGraph images at build time

HassanIyan commented 3 months ago

any fixes

IRediTOTO commented 2 months ago

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.

thibaultmthh commented 2 months ago

I have the error to, in localhost it work tho

upacyxou commented 1 month ago

bump, very annoying issue

vlkmx commented 1 month ago

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!

ethteck commented 1 month ago

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

ggomaeng commented 1 month ago

also affected 👍

xcrzx commented 4 weeks ago

Are there any known workarounds for this issue? Like increasing available resources or something similar?

nemmtor commented 4 weeks ago

also affected

xcrzx commented 4 weeks ago

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)