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

⨯ 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