Error "fatal runtime error: failed to initiate panic, error 5" in Docker

[yarin-zhang]

I used @nuxtjs/seo in my Nuxt 3.11.2 project and created ogImages for multiple pages according to the nuxt-og-image documentation.

OGImage can be displayed normally in both development and production environments.

My project was packaged and deployed through Docker.After one of my code updates, the Docker container started randomly reporting errors and crashing and exiting. The final log is as follows:

thread '<unnamed>' panicked at 'called `Option::unwrap()` on a `None` value', /root/.cargo/git/checkouts/resvg-4b7e4ee32ad6d954/3495d87/crates/resvg/src/geom.rs:27:61
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
fatal runtime error: failed to initiate panic, error 5

This error is a Rust error, which is not common in Node projects. Due to the mention of resvg, and the fact that only the nuxt og image project in the entire project relies on resvg, I think my issue should be raised here to see if this is a common error. If this is an upstream error, I think I should go to Resvg to raise an issue.

I am unable to provide a replica as this error occurred randomly three times in Docker, but did not occur in the development environment. And usually after running for a period of time (about a few hours), there is no direct correlation with the performance, disk space, etc. of the host.

My yarn.lock dependencies are as follows:

"@nuxtjs/seo@npm:^2.0.0-rc.9":
  version: 2.0.0-rc.9
  resolution: "@nuxtjs/seo@npm:2.0.0-rc.9"
  dependencies:
    "@nuxt/kit": "npm:^3.10.3"
    "@nuxtjs/sitemap": "npm:^5.1.2"
    defu: "npm:^6.1.4"
    nuxt-link-checker: "npm:^3.0.0-rc.7"
    nuxt-og-image: "npm:^3.0.0-rc.42"
    nuxt-schema-org: "npm:^3.3.6"
    nuxt-seo-experiments: "npm:4.0.0-rc.5"
    nuxt-simple-robots: "npm:^4.0.0-rc.14"
    nuxt-site-config: "npm:^2.2.11"
    nuxt-site-config-kit: "npm:^2.2.11"
    pkg-types: "npm:^1.0.3"
    ufo: "npm:^1.4.0"
  checksum: 10c0/8b2e1a6c726e43af80871be9c30d2e86e90a43771650f9683dc375bd1e1d4c41b7061a93d608f56b9a085e18f95a8133f2b751255833419b258ef11f2ca8d1b4
  languageName: node
  linkType: hard

"nuxt-og-image@npm:^3.0.0-rc.42":
  version: 3.0.0-rc.42
  resolution: "nuxt-og-image@npm:3.0.0-rc.42"
  dependencies:
    "@css-inline/css-inline": "npm:0.13.0"
    "@css-inline/css-inline-wasm": "npm:0.13.0"
    "@iconify-json/noto": "npm:^1.1.18"
    "@nuxt/devtools-kit": "npm:^1.0.8"
    "@nuxt/kit": "npm:^3.10.3"
    "@resvg/resvg-js": "npm:^2.6.0"
    "@resvg/resvg-wasm": "npm:^2.6.0"
    "@unocss/core": "npm:^0.58.5"
    "@unocss/preset-wind": "npm:^0.58.5"
    "@vueuse/core": "npm:^10.9.0"
    chrome-launcher: "npm:^1.1.0"
    defu: "npm:^6.1.4"
    execa: "npm:^8.0.1"
    flatted: "npm:^3.3.1"
    floating-vue: "npm:5.2.2"
    image-size: "npm:^1.1.1"
    json-editor-vue: "npm:^0.12.0"
    nuxt-icon: "npm:^0.6.8"
    nuxt-site-config: "npm:^2.2.10"
    nuxt-site-config-kit: "npm:^2.2.10"
    nypm: "npm:^0.3.8"
    ofetch: "npm:^1.3.3"
    ohash: "npm:^1.1.3"
    pathe: "npm:^1.1.2"
    pkg-types: "npm:^1.0.3"
    playwright-core: "npm:^1.42.1"
    radix3: "npm:^1.1.0"
    satori: "npm:0.10.13"
    satori-html: "npm:^0.3.2"
    shiki: "npm:^1.1.7"
    sirv: "npm:^2.0.4"
    splitpanes: "npm:^3.1.5"
    std-env: "npm:^3.7.0"
    terminate: "npm:^2.6.1"
    ufo: "npm:^1.4.0"
    vanilla-jsoneditor: "npm:^0.22.0"
    yoga-wasm-web: "npm:^0.3.3"
  checksum: 10c0/4b347a8b41791ab63e989e2f20ae3dd43aee1e00a7e1c9930bc23197de2dc64642d4ee1f035032a8e706d2998b8776d253a88ef9e8f9de84da7e44c0c036a54c
  languageName: node
  linkType: hard

[yarin-zhang]

Related issues: https://github.com/yisibl/resvg-js/issues/287

[suparerkk]

Same error with some PNG images

PNG image below is not working

defineOgImageComponent('Default', {
  url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/PNG_Test.png/477px-PNG_Test.png',
})

But PNG image below is working

defineOgImageComponent('Default', {
  url: 'https://images.ctfassets.net/y1cdw1ablpvd/2G9eUljiJXW11zOTpqRSUk/0e41dc83190b8be5d6ea8ec58d83da90/blog_image.png',
})

the component is very simple just img text and a few static text

[n0099]

https://commons.wikimedia.org/wiki/File:PNG_Test.png contains pixels with alpha channel aka transparency.

https://github.com/yisibl/resvg-js/issues/287#issuecomment-1884768882

Also, I don't know if this is related, but even when it doesn't crash, resvg-js never carried over any opacity values to the PNG. I'm using fill-opacity (which is actually a better idea in my case anyway) but that's surely not quite right.