Open erikras opened 1 year ago
Hey @erikras could you also provide the component that you are trying to render? Because I think it's a specific part causing the error, and an example helps me to reproduce it. Thanks!
In the same boat. Somehow for my repo it works on a single blog, but not the rest. This code does work locally though. It only fails when on Vercel.
TEST OG The Conundrum of Atomic CSS https://images.unsplash.com/photo-1542831371-29b0f74f9713
RuntimeError: unreachable
at wasm://wasm/00417392:wasm-function[14]:0x141ca
at wasm://wasm/00417392:wasm-function[11]:0xc4f
at wasm://wasm/00417392:wasm-function[91]:0x84ee4
at wasm://wasm/00417392:wasm-function[11]:0xdec
at wasm://wasm/00417392:wasm-function[91]:0x84ee4
at wasm://wasm/00417392:wasm-function[11]:0xbe2
at wasm://wasm/00417392:wasm-function[317]:0xc675d
at wasm://wasm/00417392:wasm-function[21]:0x381cc
at node_modules/@resvg/resvg-wasm/index.mjs:147:11
at node_modules/@vercel/og/dist/index.js:1:2950
https://github.com/amreshtech/amre.sh/blob/main/pages/api/og.tsx
Thanks!
I guess it's probably due to a large image being rendered and caused some memory problem. Still haven't got any clue but you can try providing smaller images (e.g. it doesn't make sense to render a 4K image on a 1k canvas).
I've just had a similar issue with @vercel/og using edge functions.
RuntimeError: unreachable
at (wasm://wasm/005420d6:1:1228433)
at (wasm://wasm/005420d6:1:757213)
at (wasm://wasm/005420d6:1:160563)
at (wasm://wasm/005420d6:1:41072)
at (wasm://wasm/005420d6:1:845084)
at (wasm://wasm/005420d6:1:41479)
at (wasm://wasm/005420d6:1:845084)
at (wasm://wasm/005420d6:1:40925)
at (wasm://wasm/005420d6:1:1141293)
at (wasm://wasm/005420d6:1:819242)
@shuding your idea of shrinking the image seems to be right, I first tried to shrink the image file size by reducing the quality and that did not work, but actually reducing the pixel count did fix the problem.
I'm also getting the same error. For me, my code works fine for 5-7days then after 5-7days uptime, it starts to throw this error. Restarting the process fixes it.
My code is
import { ImageResponse } from 'next/server';
import { getBg } from '../edit/[name]/getBg';
import type { NextRequest } from 'next/server';
export const GET = (request: NextRequest) => {
try {
const colors = request.nextUrl.searchParams.get('colors')?.split(',');
const angle = Number(request.nextUrl.searchParams.get('angle'));
const variant = request.nextUrl.searchParams.get('variant');
if (!colors || !variant) throw new Error('invalid query params');
if (colors.length !== 2) throw new Error('invalid colors');
if (!['linear-gradient', 'radial-gradient'].includes(variant)) throw new Error('invalid variant');
if (variant === 'linear-gradient' && Number.isNaN(angle)) throw new Error('angle is required for linear-gradient');
return new ImageResponse(
(
<div
style={{
height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
...getBg({
colors,
angle,
variant: variant as 'linear-gradient' | 'radial-gradient',
}),
}}
/>
),
{
width: 1_818,
height: 1_316,
},
);
} catch (error) {
return new Response((error as Error).message, {
headers: { 'Content-Type': 'application/json' },
status: 500,
});
}
};
⨯ Error: failed to pipe response
at pipeToNodeResponse ([path-to-file]/node_modules/next/dist/server/pipe-readable.js:126:15)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async sendResponse ([path-to-file]/node_modules/next/dist/server/send-response.js:40:13)
at async doRender ([path-to-file]/node_modules/next/dist/server/base-server.js:1407:25)
at async cacheEntry.responseCache.get.routeKind ([path-to-file]/node_modules/next/dist/server/base-server.js:1599:28)
at async NextNodeServer.renderToResponseWithComponentsImpl ([path-to-file]/node_modules/next/dist/server/base-server.js:1507:28)
at async NextNodeServer.renderPageComponent ([path-to-file]/node_modules/next/dist/server/base-server.js:1931:24)
at async NextNodeServer.renderToResponseImpl ([path-to-file]/node_modules/next/dist/server/base-server.js:1969:32)
at async NextNodeServer.pipeImpl ([path-to-file]/node_modules/next/dist/server/base-server.js:920:25)
at async NextNodeServer.handleCatchallRenderRequest ([path-to-file]/node_modules/next/dist/server/next-server.js:272:17) {
[cause]: RuntimeError: unreachable
at wasm://wasm/005420d6:wasm-function[795]:0x12be90
at wasm://wasm/005420d6:wasm-function[192]:0xc7d94
at Resvg.render (file://[path-to-file]/node_modules/next/dist/compiled/@vercel/og/index.node.js:18370:12)
at render (file://[path-to-file]/node_modules/next/dist/compiled/@vercel/og/index.node.js:18789:18)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.start (file://[path-to-file]/node_modules/next/dist/compiled/@vercel/og/index.node.js:19006:25)
2|Website | }
⨯ Error: failed to pipe response
at pipeToNodeResponse ([path-to-file]/node_modules/next/dist/server/pipe-readable.js:126:15)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async sendResponse ([path-to-file]/node_modules/next/dist/server/send-response.js:40:13)
at async doRender ([path-to-file]/node_modules/next/dist/server/base-server.js:1407:25)
at async cacheEntry.responseCache.get.routeKind ([path-to-file]/node_modules/next/dist/server/base-server.js:1599:28)
at async NextNodeServer.renderToResponseWithComponentsImpl ([path-to-file]/node_modules/next/dist/server/base-server.js:1507:28)
at async NextNodeServer.renderPageComponent ([path-to-file]/node_modules/next/dist/server/base-server.js:1931:24)
at async NextNodeServer.renderToResponseImpl ([path-to-file]/node_modules/next/dist/server/base-server.js:1969:32)
at async NextNodeServer.pipeImpl ([path-to-file]/node_modules/next/dist/server/base-server.js:920:25)
at async NextNodeServer.handleCatchallRenderRequest ([path-to-file]/node_modules/next/dist/server/next-server.js:272:17) {
[cause]: RuntimeError: unreachable
at wasm://wasm/005420d6:wasm-function[795]:0x12be90
at wasm://wasm/005420d6:wasm-function[192]:0xc7d94
at Resvg.render (file://[path-to-file]/node_modules/next/dist/compiled/@vercel/og/index.node.js:18370:12)
at render (file://[path-to-file]/node_modules/next/dist/compiled/@vercel/og/index.node.js:18789:18)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.start (file://[path-to-file]/node_modules/next/dist/compiled/@vercel/og/index.node.js:19006:25)
2|Website | }
I use it to generate browser like gradient image from the server side
Bug report
Description / Observed Behavior
Getting s strange WASM error.
Additional Context
Working with
<svg>
in the generated image.