Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unsupported image type: unknown in production only #626

Open
jaobrown opened this issue Jun 25, 2024 · 5 comments
Open

Unsupported image type: unknown in production only #626

jaobrown opened this issue Jun 25, 2024 · 5 comments

Comments

@jaobrown
Copy link

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
Copy link

0xRad7 commented Sep 12, 2024

same issus on my prod env, wtf

@devrsi0n devrsi0n mentioned this issue Sep 27, 2024
Open
@farzadso
Copy link

farzadso commented Oct 3, 2024 •
edited
Loading

Yeah, same issue here.

This is the list of top devices it happens on:

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

@devrsi0n
Copy link

devrsi0n commented Oct 9, 2024

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
Copy link

@devrsi0n It did not work for me

@devrsi0n
Copy link

devrsi0n commented Oct 9, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@devrsi0n @farzadso @jaobrown @0xRad7 @minkesh-pidilite