WASM stacktrace

[erikras]

Bug report

[GET] /api/leaderboard-image?isoDateTimeString=2022-12-07T00%3A10%3A01.000-08%3A00&https%3A%2F%2Fcentered.app%2Fapi%2Fleaderboard-image%3FgroupId=welcome-to-centered&range=day
Function Status: N/A
Edge Status: N/A
Duration: N/A
Init Duration: N/A
Memory Used: N/A
ID: vwmbk-1670410642529-a321a45ef015
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
RuntimeError: unreachable
    at wasm://wasm/00417392:wasm-function[72]:0x7a642
    at wasm://wasm/00417392:wasm-function[14]:0x1f5f6
    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

Description / Observed Behavior

Getting s strange WASM error.

Additional Context

Working with <svg> in the generated image.

[shuding]

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!

[amreshtech]

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.

Error

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

Link to Code

https://github.com/amreshtech/amre.sh/blob/main/pages/api/og.tsx

Thanks!

[shuding]

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

[kochie]

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.

[imranbarbhuiya]

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,
		});
	}
};

I use it to generate browser like gradient image from the server side