jaobrown commented 4 months ago

Bug report

Description / Observed Behavior

Encountering intermittent issues with Satori in production when generating open-graph cards. Errors logged in Sentry indicate problems with image loading:

Can't load image https://media.contra.com/image/upload/jia31bllciyyeeulttkr.jpg: Unsupported image type: unknown
Error: Image size cannot be determined. Please provide the width and height of the image.

Despite these errors, the image URL functions as expected when accessed directly. The issue does not occur in local environments or consistently in production, making it challenging to reproduce.

Expected Behavior

Satori should load and process the images without errors, consistently generating the open-graph cards with the provided images from Cloudinary.

Reproduction

Unable to reproduce the issue locally or intentionally in production—the issue is intermittently throwing and only production environment.

Here is an example URL where the error has been thrown: http://contra.com/@internal/open-graph-card/user/blesscreatics

Additional Context

Satori version: ^0.10.13
Using Cloudinary for images embedded into generated SVG.
The error seems to occur randomly and not on every request.
The image dimensions are fixed and provided in the code, but Satori still throws an error regarding the image size.

0xRad7 commented 2 months ago

same issus on my prod env, wtf

farzadso commented 1 month ago

Yeah, same issue here.

This is the list of top devices it happens on:

CleanShot 2024-10-03 at 13 44 41@2x

devrsi0n commented 1 month ago

I had the same error. It seems Vercel server returns a 403 error when fetching an image url with plain fetch request which is the same as Satori's implemention. You need to fetch the url with a proper User-Agent header to make it work. Here is my simple solution:

async function fetchImageAsBase64(url: string): Promise<string> {
  const response = await fetch(url, {
    headers: {
      'User-Agent':
        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
    },
    cache: 'force-cache',
  });
  const arrayBuffer = await response.arrayBuffer();
  const base64 = Buffer.from(arrayBuffer).toString('base64');
  const type = response.headers.get('content-type');
  return `data:${type || 'image/png'};base64,${base64}`;
}

minkesh-pidilite commented 1 month ago

@devrsi0n It did not work for me