fix: og-image 500 error in production

[pjmanning]

🐛 The bug

I'm getting a 500 error with both defineOgImageScreenshot() and defineOgImageComponent()

Both show in the Nuxt DevTools ok but the image gets a 500 when deployed.

Deploying to Cloudflare via NuxtHub with @nuxtjs/seo: "2.0.2"

Tried installing "@resvg/resvg-js-linux-x64-gnu": "^2.6.2", #361 but that did not solve the issue

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-62jdmcub?file=package.json

🌈 Expected behavior

• defineOgImageScreenshot() generated image shows in production
• defineOgImageComponent() card shows in production
• /og-image/image/og.png returns 200 image

ℹ️ Additional context

I was getting a node error in stackblitz and wasn't able to run it but the package.json, nuxt.config.ts, and file structure is correct

[harlan-zw]

Hi, I've tried to replicate this without any success. Can you provide the stacktrace for the 500 error you're getting?

[pjmanning]

Hey Harlan happy new year - and thanks for checking into this 🙏

Here is the live URL...
https://wellnesswavesapp.com/

This is the url where the image lives and what error is thrown...
https://wellnesswavesapp.com/__og-image__/image/og.png
[Error] [nuxt] error caught during app initialization
Error: Page not found: /og-image/image/og.png
Ra — Clf9TLW6.js:21:3861
Ma — Clf9TLW6.js:21:4334
(anonymous function) — Clf9TLW6.js:25:30289
runWithContext — Clf9TLW6.js:15:14766
run — Clf9TLW6.js:10:684
(anonymous function) — Clf9TLW6.js:25:30279
(anonymous function) — Clf9TLW6.js:25:30388
runWithContext — Clf9TLW6.js:15:14766
forEach
X — Clf9TLW6.js:25:20933
(anonymous function) — Clf9TLW6.js:25:19828
(anonymous function) (Clf9TLW6.js:19:27676)

If I go to http://localhost:3000/__og-image__/image/og.png while dev is running the image shows correctly. So I assume this is happening during the build.

In Cloudflare Workers I'm not seeing an uploaded image. Below is the assets uploaded...

Assets uploaded

62 Files uploaded
File name
apple-icon.png
favicon.ico
icon.png
_fonts
2-c39J9j0IaUMQZwAJyJaOX1UUnf3GLnYjA5sTNd-Y1tPUkhysb.woff
2-c39J9j0IaUMQZwAJyJaOX1UUnf3GLnYjALsTNd-8hysQyR5q6.woff
2-c39J9j0IaUMQZwAJyJaOX1UUnf3GLnYjCLtjNd-Gi90qbHzl3.woff
2-c39J9j0IaUMQZwAJyJaOX1UUnf3GLnYjDVtjNd-vV3ZJz3vp8.woff
2-c39J9j0IaUMQZwAJyJaOX1UUnf3GLnYjDstjNd-IDI0Tv17uM.woff
2-ci9J9j0IaUMQZwAJyJQubdoLNAb2XKYw-cYfWtAYeu0.woff2
2-ci9J9j0IaUMQZwAJyJQufdoLNAb2XKYw-AmmejKZsGL.woff2
2-ci9J9j0IaUMQZwAJyJQundoLNAb2U-Wh4pzOPNDs.woff2
2-ci9J9j0IaUMQZwAJyJQvvdoLNAb2XKYw-LDmBnom44K.woff2
6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkBgv18I-F6n5JDJ0BN.woff
6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkCEv18I-yh47Y5kS4J.woff
6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkKEo18I-6OMfC9OdUK.woff
6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkM0o18I-tWKQkXuPuR.woff
6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o18I-fukpPCNZCA.woff
6xKtdSZaM9iE8KbpRA_hJFQNYuDyP7bh-90i5XxLpNq.woff2
6xKtdSZaM9iE8KbpRA_hJVQNYuDyP7bh-U0BVMJ0M3d.woff2
6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw-S6zd23of5R.woff2
UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L0UUMbndwVgHU-65EHupo1eE.woff2
UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L1UUMbndwVgHU-qH7ATOX08m.woff2
UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L2UUMbndwVgHU-dUAjfz9vRP.woff2
UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L3UUMbndwVgHU-AqFQoE4dmC.woff2
UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUMbndwV-pgdKO9ZKgu.woff2
UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L6UUMbndwVgHU-QGpAKkWaRW.woff2
UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L9UUMbndwVgHU-NhITM010QG.woff2
UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU-dhQPbMoiPv.woff2
UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw-D8rjOS3fnY.woff2
UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU-sGaaRn4DAV.woff2
UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU-RqiMbhqjR3.woff2
UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU-KVPO7qQakV.woff2
UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU-F30FOQT0Pw.woff2
UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU-lsYHSK6K6k.woff2
UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc2dphjg-yc9Sc53FFE.woff
UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc2dthjg-Cghfr3Mro7.woff
UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc69thjg-9Gz4DM1G4W.woff
UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcB9xhjg-io7FNUyPjT.woff
UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcPtxhjg-IvzPBD7f1q.woff
UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcWdthjg-uKvhBPXFuv.woff
UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcWdxhjg-ZlaHUsm4JN.woff
UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTccNxhjg-11AqZvIeQZ.woff
UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTch9thjg-uRdt8wXlMN.woff
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYMZs-uM0pOraRMj.woff
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZs-GhuC9bNp0d.woff
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyfMZs-mesapiiH4F.woff
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZs-6xY2YA4tKL.woff
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZs-hqV6ZTaH7p.woff
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZs-eCVSWtm5ex.woff
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyeMZs-oMIw0BKr1g.woff
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZs-1nnSLxpIaT.woff
UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfMZs-ppaBBMhPkF.woff
_nuxt
BIyhaLuC.js
Clf9TLW6.js
DD8JPrf5.js
DnUWCbZR.js
DsBzwNoj.js
entry.CA-QUGnb.css
index.Zui38rS6.css
z5ZNZeFR.js
builds

[harlan-zw]

I've tried to replicate this on my test Cloudflare workers instance and it seems to be working fine.

(https://playground.harlanzw.workers.dev/__og-image__/image/satori/wave/og.png)

Debugging this is a bit difficult so what I'd recommend is to prerender your home page (if possible) which will automatically have this home page og image pre-rendered as well. The zero runtime mode was made for Cloudflare workers as they have some quirks and limited size for the worker.

I'm in the process of some heavy internal improvements that should improve the stability and debugging of Cloudflare workers but likely ~1 week away from being released.

[pjmanning]

Thanks again 🙏

So I deployed a million times with different settings (thanks Nuxthub for the easy auto deploys 😆).

When I set the zero runtime config and the pre-render routes I got stuck in an infinite loop of redirects to the main domain (https://wellnesswavesapp.com). I also noticed the preview domains did not work - they redirected to the main domain.

Once I removed the redirectToCanonicalSiteUrl line it worked (both SSR and zero runtime mode).
seo: {
redirectToCanonicalSiteUrl: true,
}

Could this be due the DNS settings? I only have a CNAME record pointing to the root domain

Update:

I added another CNAME record with www and tried with the redirectToCanonicalSiteUrl set to true. This produced the same redirect loop.

I then removed the redirectToCanonicalSiteUrl setting and used the Cloudflare redirect rules template Redirect from WWW to Root https://developers.cloudflare.com/rules/url-forwarding/. This is working so I will use this for the time being.

[shidaizaiweixiao]

so ，must i delete this：seo: {
redirectToCanonicalSiteUrl: true,
}， my project's ogimage dont work in production too when i use defineogimagecomponent

[pjmanning]

Not sure of your exact instance @shidaizaiweixiao but if you previously had that setting set to true, try to remove it and redeploy to see if your issue was the same as mine.