Social Image API fails to Generate

[pijush41]

Description Even after the implementation of https://github.com/transitive-bullshit/nextjs-notion-starter-kit/pull/383 social images are not coming as expected. Only a blank white background webpage is coming if you click on the below-mentioned social-image URL.

Notion Test Page ID Web site: https://yogchitralaya.com/ Page ID: 0b1d7e63b2dd42e490ddabbcc61d798a Github Repo: https://github.com/pijush41/yogchitralaya

Social Image URL https://yogchitralaya.com/api/social-image?id=0b1d7e63b2dd42e490ddabbcc61d798a

[transitive-bullshit]

Hmmm, seems to be a bug with @vercel/og or satori or possibly a bug getting the page's JSON data in that serverless handler.

1. Can you see if there are any errors in the Vercel logs when generating a new social image?
2. Are social images working for you locally w/ the dev server?

[skybird-dev]

@transitive-bullshit Travis, I've included the errors I get in Vercel for Social Image sharing:

/api/social-image?id=a0dc2cd9-e2e2-43c3-b24c-2e9d68e45845
10:26:50:98
ID:
lbr5k-1673461608830-6a24bc1a56d8
Error: Can't load image https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F38c8af74-b174-4df5-b9c8-91561fe24ac8%2F210.jpeg?table=block&id=a0dc2cd9-e2e2-43c3-b24c-2e9d68e45845&cache=v2: Unsupported image type: unknown
    at node_modules/satori/dist/index.wasm.js:5:2790
/api/social-image?id=a0dc2cd9-e2e2-43c3-b24c-2e9d68e45845
10:26:50:98
ID:
lbr5k-1673461608830-6a24bc1a56d8
Error: Can't load image https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F38c8af74-b174-4df5-b9c8-91561fe24ac8%2F210.jpeg?table=block&id=a0dc2cd9-e2e2-43c3-b24c-2e9d68e45845&cache=v2: Unsupported image type: unknown
    at worker.js:18:2815
    at worker.js:56:11409

In the past, social image sharing worked perfectly regardless of image origin (i.e., user-uploaded cover images via Notion or Unsplash.com). But it stopped working at some point, and I'm still troubleshooting.

Currently, I have two different builds: one uses KY, and the other does not.

With KY, Unspash.com cover images render in iMessage and Facebook-based sharing (i.e. WhatsApp), whereas the one without KY renders Unsplash.com images only in iMessage. Neither method will render an image that I upload to Notion. I won't show without KY, as it would be redundant. Note that the same errors are given (but if you need further confirmation, please ask).

The article I just wrote for testing purposes is available at https://www.skybird.science/social-media-microbiome It does not render the user-uploaded cover image on WhatsApp (Facebook based):

Nor iMessage:

With Unsplash.com covers versus without:

The URLs for the articles: https://www.skybird.science/motor-neuron-disease https://www.skybird.science/diabetes

If you have some insights, Travis, we would appreciate it.

[sonngdev]

I also get this error.

1. The error log only shows up occasionally on Vercel even when I repeatedly visit the social-image API and always get a blank page.
2. Social images are working fine locally. I use Node 18, and the Node runtime of my Vercel app is configured to Node 18 as well.

[abhidadhaniya23]

Hi everyone,

I found a solution for unauthorized response which are getting in production while hitting the social image endpoint. I've mentioned here.

[ChiaYuSu]

@abhidadhaniya23 It's work, thank you.