Unsupported image type: unknown in production only

[jaobrown]

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:

1. Can't load image https://media.contra.com/image/upload/jia31bllciyyeeulttkr.jpg: Unsupported image type: unknown
2. 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]

same issus on my prod env, wtf

[farzadso]

Yeah, same issue here.

This is the list of top devices it happens on:

[devrsi0n]

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]

@devrsi0n It did not work for me

[devrsi0n]

@devrsi0n It did not work for me

You need to check if the server is returning a valid image response, if it's not, Satori can't do anything for you.