nuxt-og-image 6.4.2 → 6.4.4

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.16.0"
   },
   "configKey": "ogImage",
-  "version": "6.4.2",
+  "version": "6.4.4",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -7,7 +7,7 @@ import 'nuxt-site-config/kit';
 import 'ohash';
 import 'pathe';
 import 'pkg-types';
-export { m as default } from './shared/nuxt-og-image.BK0-aZom.mjs';
+export { m as default } from './shared/nuxt-og-image.Cr3WHMk1.mjs';
 import 'nuxtseo-shared/kit';
 import '../dist/runtime/logger.js';
 import 'node:crypto';

package/dist/runtime/app/client-utils.js

@@ -1,9 +1,28 @@
 import { componentNames } from "#build/nuxt-og-image/components.mjs";
 import { defu } from "defu";
-import { useHead, useRuntimeConfig } from "nuxt/app";
+import { injectHead, useHead, useRuntimeConfig } from "nuxt/app";
 import { joinURL, withQuery } from "ufo";
 import { toValue } from "vue";
 import { buildOgImageUrl, generateMeta, separateProps } from "../shared.js";
+const clientEntriesByHead = /* @__PURE__ */ new WeakMap();
+function registerClientOgHead(ogKey, input, options) {
+  let entries;
+  try {
+    const head = injectHead();
+    if (head) {
+      entries = clientEntriesByHead.get(head);
+      if (!entries) {
+        entries = /* @__PURE__ */ new Map();
+        clientEntriesByHead.set(head, entries);
+      }
+    }
+  } catch {
+  }
+  entries?.get(ogKey)?.dispose();
+  const entry = useHead(input, options);
+  if (entry && entries)
+    entries.set(ogKey, entry);
+}
 function resolveReactiveOptions(input) {
   const options = toValue(input);
   if (options === false)
@@ -56,16 +75,16 @@ export function clientProcessOgImageOptions(input, route, basePath) {
     }
     if (route.query)
       validOptions._query = route.query;
+    const ogKey = validOptions.key || "og";
     if (validOptions.url) {
       const url = validOptions.url;
-      useHead({ meta: generateMeta(url, validOptions) }, { tagPriority: "high" });
+      registerClientOgHead(ogKey, { meta: generateMeta(url, validOptions) }, { tagPriority: "high" });
       paths.push(url);
       continue;
     }
     if (publicCfg.hasServerRuntime) {
-      const ogKey = validOptions.key || "og";
       const finalUrl2 = buildResolverUrl(baseURL, basePath, ogKey, route.query);
-      useHead({ meta: generateMeta(finalUrl2, validOptions) }, { tagPriority: 35 });
+      registerClientOgHead(ogKey, { meta: generateMeta(finalUrl2, validOptions) }, { tagPriority: 35 });
       paths.push(finalUrl2);
       continue;
     }
@@ -79,7 +98,7 @@ export function clientProcessOgImageOptions(input, route, basePath) {
     const result = buildOgImageUrl(urlOpts, extension, true, defaults, void 0);
     const resolvedUrl = joinURL("/", baseURL, result.url);
     const finalUrl = opts._query && Object.keys(opts._query).length ? withQuery(resolvedUrl, { _query: opts._query }) : resolvedUrl;
-    useHead({ meta: generateMeta(finalUrl, opts) }, { processTemplateParams: true, tagPriority: 35 });
+    registerClientOgHead(ogKey, { meta: generateMeta(finalUrl, opts) }, { processTemplateParams: true, tagPriority: 35 });
     paths.push(finalUrl);
   }
   return paths;

package/dist/runtime/server/og-image/bindings/font-assets/cloudflare.js

@@ -1,27 +1,18 @@
 import { useRuntimeConfig } from "nitropack/runtime";
 import { withBase } from "ufo";
+import { getCloudflareAssets } from "../../../util/cloudflareAssets.js";
+import { fetchLocalAsset } from "../../../util/fetchLocalAsset.js";
+import { getFetchTimeout } from "../../../util/fetchTimeout.js";
+import { useOgImageRuntimeConfig } from "../../../utils.js";
 export async function resolve(event, font) {
   const path = font.src || font.localPath;
   const { app } = useRuntimeConfig();
   const fullPath = withBase(path, app.baseURL);
-  const assets = event.context.cloudflare?.env?.ASSETS || event.context.ASSETS;
-  if (assets && typeof assets.fetch === "function") {
-    const origin = event.context.cloudflare?.request?.url || `https://${event.headers.get("host") || "localhost"}`;
-    const url = new URL(fullPath, origin).href;
-    const res = await assets.fetch(url).catch(() => null);
-    if (res?.ok) {
-      return Buffer.from(await res.arrayBuffer());
-    }
-  }
-  if (typeof event.fetch === "function") {
-    const origin = event.context.cloudflare?.request?.url || `https://${event.headers.get("host") || "localhost"}`;
-    const url = new URL(fullPath, origin).href;
-    const res = await event.fetch(url).catch(() => null);
-    if (res?.ok) {
-      return Buffer.from(await res.arrayBuffer());
-    }
-  }
-  if (!assets && !event.context._ogImageWarnedMissingAssets) {
+  const timeout = getFetchTimeout(useOgImageRuntimeConfig());
+  const ab = await fetchLocalAsset(event, fullPath, { fetchTimeout: timeout });
+  if (ab)
+    return Buffer.from(ab);
+  if (!getCloudflareAssets(event) && !event.context._ogImageWarnedMissingAssets) {
     event.context._ogImageWarnedMissingAssets = true;
     console.warn(
       `[Nuxt OG Image] No ASSETS binding found on Cloudflare Workers. Font loading will fail. To fix this, add \`nitro: { cloudflare: { deployConfig: true } }\` to your nuxt.config and deploy with \`npx wrangler --cwd .output deploy\` instead of using the --assets flag.`

package/dist/runtime/server/og-image/bindings/font-assets/dev-prerender.js

@@ -4,6 +4,8 @@ import { getRequestURL } from "h3";
 import { useRuntimeConfig } from "nitropack/runtime";
 import { join } from "pathe";
 import { withBase } from "ufo";
+import { getFetchTimeout } from "../../../util/fetchTimeout.js";
+import { useOgImageRuntimeConfig } from "../../../utils.js";
 let fontUrlMapping;
 async function loadFontUrlMapping() {
   if (fontUrlMapping)
@@ -14,6 +16,7 @@ async function loadFontUrlMapping() {
 }
 export async function resolve(event, font) {
   const path = font.src || font.localPath;
+  const timeout = getFetchTimeout(useOgImageRuntimeConfig());
   if (font.absolutePath) {
     const data = await readFile(font.absolutePath).catch(() => null);
     if (data?.length)
@@ -33,7 +36,7 @@ export async function resolve(event, font) {
         return cached;
       const mapping = await loadFontUrlMapping();
       if (mapping[filename2]) {
-        const res = await fetch(mapping[filename2]).catch(() => null);
+        const res = await fetch(mapping[filename2], { signal: AbortSignal.timeout(timeout) }).catch(() => null);
         if (res?.ok)
           return Buffer.from(await res.arrayBuffer());
       }
@@ -54,7 +57,7 @@ export async function resolve(event, font) {
     const filename = path.slice("/_fonts/".length);
     const mapping = await loadFontUrlMapping();
     if (mapping[filename]) {
-      const res = await fetch(mapping[filename]).catch(() => null);
+      const res = await fetch(mapping[filename], { signal: AbortSignal.timeout(timeout) }).catch(() => null);
       if (res?.ok)
         return Buffer.from(await res.arrayBuffer());
     }
@@ -70,14 +73,15 @@ export async function resolve(event, font) {
     const reqUrl = getRequestURL(event);
     const origin = `${reqUrl.protocol}//${reqUrl.host}`;
     const url = new URL(withBase(path, app.baseURL), origin).href;
-    const res = await fetch(url).catch(() => null);
+    const res = await fetch(url, { signal: AbortSignal.timeout(timeout) }).catch(() => null);
     if (res?.ok) {
       return Buffer.from(await res.arrayBuffer());
     }
   }
   const fullPath = withBase(path, app.baseURL);
   const arrayBuffer = await event.$fetch(fullPath, {
-    responseType: "arrayBuffer"
+    responseType: "arrayBuffer",
+    timeout
   });
   return Buffer.from(arrayBuffer);
 }

package/dist/runtime/server/og-image/bindings/font-assets/node.js

@@ -1,17 +1,21 @@
 import { getNitroOrigin } from "#site-config/server/composables";
 import { useRuntimeConfig } from "nitropack/runtime";
 import { withBase } from "ufo";
+import { getFetchTimeout } from "../../../util/fetchTimeout.js";
+import { useOgImageRuntimeConfig } from "../../../utils.js";
 export async function resolve(event, font) {
   const path = font.src || font.localPath;
   const { app } = useRuntimeConfig();
   const fullPath = withBase(path, app.baseURL);
   const origin = getNitroOrigin(event);
-  const res = await fetch(new URL(fullPath, origin).href).catch(() => null);
+  const timeout = getFetchTimeout(useOgImageRuntimeConfig());
+  const res = await fetch(new URL(fullPath, origin).href, { signal: AbortSignal.timeout(timeout) }).catch(() => null);
   if (res?.ok) {
     return Buffer.from(await res.arrayBuffer());
   }
   const arrayBuffer = await event.$fetch(fullPath, {
-    responseType: "arrayBuffer"
+    responseType: "arrayBuffer",
+    timeout
   });
   return Buffer.from(arrayBuffer);
 }

package/dist/runtime/server/og-image/browser/screenshot.d.ts

@@ -1,4 +1,4 @@
 import type { Buffer } from 'node:buffer';
 import type { Browser } from 'playwright-core';
 import type { OgImageRenderEventContext } from '../../../types.js';
-export declare function createScreenshot({ basePath, e, options, extension }: OgImageRenderEventContext, browser: Browser): Promise<Buffer>;
+export declare function createScreenshot({ basePath, e, options, extension, timings }: OgImageRenderEventContext, browser: Browser): Promise<Buffer>;

package/dist/runtime/server/og-image/browser/screenshot.js

@@ -2,6 +2,7 @@ import { getNitroOrigin } from "#site-config/server/composables";
 import { withQuery } from "ufo";
 import { toValue } from "vue";
 import { buildOgImageUrl } from "../../../shared.js";
+import { getFetchTimeout } from "../../util/fetchTimeout.js";
 import { logger } from "../../util/logger.js";
 import { useOgImageRuntimeConfig } from "../../utils.js";
 function isPlaywrightPage(page) {
@@ -53,8 +54,9 @@ async function takeScreenshot(page, selector, options) {
   }
   return await page.screenshot(puppeteerOptions);
 }
-export async function createScreenshot({ basePath, e, options, extension }, browser) {
-  const { colorPreference, defaults, security } = useOgImageRuntimeConfig();
+export async function createScreenshot({ basePath, e, options, extension, timings }, browser) {
+  const runtimeConfig = useOgImageRuntimeConfig();
+  const { colorPreference, defaults, security } = runtimeConfig;
   const path = options.component === "PageScreenshot" ? basePath : buildOgImageUrl(options, "html", false, defaults, security?.secret || void 0).url;
   let page;
   if (typeof browser.newPage === "function" && browser.newPage.length === 0) {
@@ -75,7 +77,7 @@ export async function createScreenshot({ basePath, e, options, extension }, brow
       logger.warn("The `html` option is deprecated and will be removed in the next major version. Use a Vue component instead.");
     }
     if (import.meta.prerender && !options.html) {
-      options.html = await e.$fetch(path).catch(() => void 0);
+      options.html = await timings.measure("html-fetch", () => e.$fetch(path, { timeout: getFetchTimeout(runtimeConfig) }).catch(() => void 0));
     }
     await setViewport(
       page,
@@ -112,7 +114,7 @@ export async function createScreenshot({ basePath, e, options, extension }, brow
           el.style.display = "none";
       }, _options.mask);
     }
-    return await takeScreenshot(page, _options.selector, screenshotOptions);
+    return await timings.measure("render-browser", () => takeScreenshot(page, _options.selector, screenshotOptions));
   } finally {
     await page.close();
   }

package/dist/runtime/server/og-image/context.js

@@ -12,6 +12,7 @@ import { decodeOgImageParams, extractEncodedSegment, sanitizeProps, separateProp
 import { autoEjectCommunityTemplate } from "../util/auto-eject.js";
 import { createNitroRouteRuleMatcher } from "../util/kit.js";
 import { normaliseOptions } from "../util/options.js";
+import { createTimings, TIMING_CTX_KEY } from "../util/timings.js";
 import { useOgImageRuntimeConfig } from "../utils.js";
 import { getBrowserRenderer, getSatoriRenderer, getTakumiRenderer } from "./instances.js";
 const RE_HASH_MODE = /^o_([a-z0-9]+)$/i;
@@ -186,6 +187,8 @@ export async function resolveContext(e) {
       statusMessage: `[Nuxt OG Image] Renderer "${rendererType}" is not available. Component "${normalised.component?.pascalName}" requires the ${rendererType} renderer but it's not bundled for this preset.`
     });
   }
+  const timings = e.context[TIMING_CTX_KEY] || createTimings();
+  e.context[TIMING_CTX_KEY] = timings;
   const ctx = {
     e,
     key,
@@ -196,6 +199,7 @@ export async function resolveContext(e) {
     extension,
     basePath,
     options: normalised.options,
+    timings,
     _nitro: useNitroApp()
   };
   await ctx._nitro.hooks.callHook("nuxt-og-image:context", ctx);

package/dist/runtime/server/og-image/core/plugins/imageSrc.js

@@ -3,6 +3,8 @@ import { useStorage } from "nitropack/runtime";
 import { withBase, withoutLeadingSlash } from "ufo";
 import { toBase64Image } from "../../../../shared.js";
 import { decodeHtml } from "../../../util/encoding.js";
+import { fetchLocalAsset } from "../../../util/fetchLocalAsset.js";
+import { getFetchTimeout } from "../../../util/fetchTimeout.js";
 import { logger } from "../../../util/logger.js";
 import { getImageDimensions } from "../../utils/image-detector.js";
 import { defineTransformer } from "../plugins.js";
@@ -58,6 +60,7 @@ function isBlockedUrl(url) {
 }
 const RE_URL_LEADING = /^url\(['"]?/;
 const RE_URL_TRAILING = /['"]?\)$/;
+const SUBREQUEST_HEADERS = { "x-nuxt-og-image": "1" };
 async function resolveLocalFilePathImage(publicStoragePath, src) {
   const normalizedSrc = withoutLeadingSlash(
     src.replace("_nuxt/@fs/", "").replace("_nuxt/", "").replace("./", "")
@@ -66,125 +69,129 @@ async function resolveLocalFilePathImage(publicStoragePath, src) {
   if (await useStorage().hasItem(key))
     return await useStorage().getItemRaw(key);
 }
+function toBufferSourceAsBase64(buf) {
+  const ab = buf instanceof ArrayBuffer ? buf : ArrayBuffer.isView(buf) ? buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength) : buf;
+  return toBase64Image(ab);
+}
+const renderCaches = /* @__PURE__ */ new WeakMap();
+function getRenderCache(e) {
+  let cache = renderCaches.get(e);
+  if (!cache) {
+    cache = /* @__PURE__ */ new Map();
+    renderCaches.set(e, cache);
+  }
+  return cache;
+}
+function resolveSrcToBuffer(src, kind, ctx) {
+  const cache = getRenderCache(ctx.e);
+  const existing = cache.get(src);
+  if (existing)
+    return existing;
+  const promise = doResolveSrcToBuffer(src, kind, ctx);
+  cache.set(src, promise);
+  return promise;
+}
+async function doResolveSrcToBuffer(src, kind, { e, publicStoragePath, runtimeConfig, timings }) {
+  const fetchTimeout = getFetchTimeout(runtimeConfig);
+  const logFailure = (url, err) => {
+    logger.debug(`[og-image] ${kind} fetch failed (${url}): ${err?.message || err}`);
+  };
+  if (src.startsWith("/")) {
+    let buffer2;
+    if (import.meta.prerender || import.meta.dev) {
+      const srcWithoutBase = src.replace(runtimeConfig.app.baseURL, "/");
+      buffer2 = await resolveLocalFilePathImage(publicStoragePath, srcWithoutBase);
+    }
+    if (!buffer2 && !import.meta.prerender) {
+      const ab = await timings.measure("image-fetch", () => fetchLocalAsset(e, src, {
+        fetchTimeout,
+        headers: SUBREQUEST_HEADERS,
+        includeExternalFallback: true,
+        onStepFailure: logFailure
+      }));
+      if (ab)
+        buffer2 = new Uint8Array(ab);
+    }
+    return buffer2 ? { buffer: buffer2 } : {};
+  }
+  const decodedSrc = decodeHtml(src);
+  if (!import.meta.dev && isBlockedUrl(decodedSrc)) {
+    logger.warn(`Blocked internal ${kind} fetch: ${decodedSrc}`);
+    return { blocked: true };
+  }
+  const end = timings.start("image-fetch");
+  const buffer = await $fetch(decodedSrc, {
+    responseType: "arrayBuffer",
+    timeout: fetchTimeout
+  }).catch((err) => {
+    logFailure(decodedSrc, err);
+  }).finally(end);
+  return buffer ? { buffer } : {};
+}
+function applyImageDimensions(node, buffer) {
+  if (typeof node.props.width === "string")
+    node.props.width = Number(node.props.width) || void 0;
+  if (typeof node.props.height === "string")
+    node.props.height = Number(node.props.height) || void 0;
+  if (node.props.width && node.props.height)
+    return;
+  const view = buffer instanceof Uint8Array ? buffer : ArrayBuffer.isView(buffer) ? new Uint8Array(buffer.buffer, buffer.byteOffset, buffer.byteLength) : new Uint8Array(buffer);
+  const dimensions = getImageDimensions(view);
+  if (!dimensions?.width || !dimensions?.height)
+    return;
+  const naturalAspectRatio = dimensions.width / dimensions.height;
+  if (node.props.width && !node.props.height) {
+    node.props.height = Math.round(node.props.width / naturalAspectRatio);
+  } else if (node.props.height && !node.props.width) {
+    node.props.width = Math.round(node.props.height * naturalAspectRatio);
+  } else {
+    node.props.width = dimensions.width;
+    node.props.height = dimensions.height;
+  }
+}
 export default defineTransformer([
   // fix <img src="">
   {
     filter: (node) => node.type === "img" && node.props?.src,
-    transform: async (node, { e, publicStoragePath, runtimeConfig }) => {
+    transform: async (node, ctx) => {
       let src = node.props.src;
-      const isRelative = src.startsWith("/");
-      let dimensions;
-      let imageBuffer;
+      if (src.startsWith("data:"))
+        return;
       if (src.endsWith(".webp")) {
         logger.warn("Using WebP images with Satori is not supported. Please consider switching image format or use the chromium renderer.", src);
       }
-      if (isRelative) {
-        if (import.meta.prerender || import.meta.dev) {
-          const srcWithoutBase = src.replace(runtimeConfig.app.baseURL, "");
-          imageBuffer = await resolveLocalFilePathImage(publicStoragePath, srcWithoutBase);
-        }
-        if (!imageBuffer) {
-          imageBuffer = await e.$fetch(src, { responseType: "arrayBuffer" }).catch(() => {
-          });
-          if (!imageBuffer && !import.meta.prerender) {
-            imageBuffer = await e.$fetch(src, {
-              baseURL: getNitroOrigin(e),
-              responseType: "arrayBuffer"
-            }).catch(() => {
-            });
-          }
-        }
-        if (imageBuffer) {
-          const buffer = imageBuffer instanceof ArrayBuffer ? imageBuffer : imageBuffer.buffer;
-          node.props.src = toBase64Image(buffer);
-        }
-      } else if (!src.startsWith("data:")) {
-        src = decodeHtml(src);
-        if (!import.meta.dev && isBlockedUrl(src)) {
-          logger.warn(`Blocked internal image fetch: ${src}`);
-          delete node.props.src;
-        } else {
-          node.props.src = src;
-          imageBuffer = await $fetch(src, {
-            responseType: "arrayBuffer"
-          }).catch(() => {
-          });
-          if (imageBuffer) {
-            const buffer = imageBuffer instanceof ArrayBuffer ? imageBuffer : imageBuffer.buffer;
-            node.props.src = toBase64Image(buffer);
-          }
-        }
-      }
-      if (typeof node.props.width === "string")
-        node.props.width = Number(node.props.width) || void 0;
-      if (typeof node.props.height === "string")
-        node.props.height = Number(node.props.height) || void 0;
-      if (imageBuffer && (!node.props.width || !node.props.height)) {
-        dimensions = getImageDimensions(imageBuffer);
-        if (dimensions?.width && dimensions?.height) {
-          const naturalAspectRatio = dimensions.width / dimensions.height;
-          if (node.props.width && !node.props.height) {
-            node.props.height = Math.round(node.props.width / naturalAspectRatio);
-          } else if (node.props.height && !node.props.width) {
-            node.props.width = Math.round(node.props.height * naturalAspectRatio);
-          } else if (!node.props.width && !node.props.height) {
-            node.props.width = dimensions.width;
-            node.props.height = dimensions.height;
-          }
-        }
+      const isRelative = src.startsWith("/");
+      if (!isRelative)
+        src = node.props.src = decodeHtml(src);
+      const result = await resolveSrcToBuffer(src, "image", ctx);
+      if (result.blocked) {
+        delete node.props.src;
+        return;
       }
-      if (typeof node.props.src === "string" && node.props.src.startsWith("/")) {
-        if (imageBuffer) {
-          const buffer = imageBuffer instanceof ArrayBuffer ? imageBuffer : imageBuffer.buffer;
-          node.props.src = toBase64Image(buffer);
-        } else {
-          node.props.src = `${withBase(src, `${getNitroOrigin(e)}`)}?${Date.now()}`;
-        }
+      if (result.buffer) {
+        node.props.src = toBufferSourceAsBase64(result.buffer);
+        applyImageDimensions(node, result.buffer);
+        return;
       }
+      if (isRelative)
+        node.props.src = withBase(src, `${getNitroOrigin(ctx.e)}`);
     }
   },
   // fix style="background-image: url('')"
   {
     filter: (node) => node.props?.style?.backgroundImage?.includes("url("),
-    transform: async (node, { e, publicStoragePath, runtimeConfig }) => {
+    transform: async (node, ctx) => {
       const backgroundImage = node.props.style.backgroundImage;
       const src = backgroundImage.replace(RE_URL_LEADING, "").replace(RE_URL_TRAILING, "");
       if (src.startsWith("data:"))
         return;
-      const isRelative = src?.startsWith("/");
-      let imageBuffer;
-      if (isRelative) {
-        if (import.meta.prerender || import.meta.dev) {
-          const srcWithoutBase = src.replace(runtimeConfig.app.baseURL, "/");
-          imageBuffer = await resolveLocalFilePathImage(publicStoragePath, srcWithoutBase);
-        }
-        if (!imageBuffer) {
-          imageBuffer = await e.$fetch(src, { responseType: "arrayBuffer" }).catch(() => {
-          });
-          if (!imageBuffer && !import.meta.prerender) {
-            imageBuffer = await e.$fetch(src, {
-              baseURL: getNitroOrigin(e),
-              responseType: "arrayBuffer"
-            }).catch(() => {
-            });
-          }
-        }
-      } else {
-        const decodedSrc = decodeHtml(src);
-        if (!import.meta.dev && isBlockedUrl(decodedSrc)) {
-          logger.warn(`Blocked internal background-image fetch: ${decodedSrc}`);
-          delete node.props.style.backgroundImage;
-        } else {
-          imageBuffer = await $fetch(decodedSrc, {
-            responseType: "arrayBuffer"
-          }).catch(() => {
-          });
-        }
-      }
-      if (imageBuffer) {
-        const buffer = imageBuffer instanceof ArrayBuffer ? imageBuffer : imageBuffer.buffer;
-        node.props.style.backgroundImage = `url(${toBase64Image(buffer)})`;
+      const result = await resolveSrcToBuffer(src, "background-image", ctx);
+      if (result.blocked) {
+        delete node.props.style.backgroundImage;
+        return;
       }
+      if (result.buffer)
+        node.props.style.backgroundImage = `url(${toBufferSourceAsBase64(result.buffer)})`;
     }
   }
 ]);

package/dist/runtime/server/og-image/core/transforms/emojis/fetch.js

@@ -1,5 +1,6 @@
 import { emojiCache } from "#og-image-cache";
 import { $fetch } from "ofetch";
+import { getFetchTimeout } from "../../../../util/fetchTimeout.js";
 import { getEmojiCodePoint, getEmojiIconNames } from "./emoji-utils.js";
 export async function getEmojiSvg(ctx, emojiChar) {
   const emojiSet = ctx.options.emojis;
@@ -15,21 +16,31 @@ export async function getEmojiSvg(ctx, emojiChar) {
     }
   }
   if (!svg) {
-    for (const iconName of possibleNames) {
-      try {
-        svg = await $fetch(`https://api.iconify.design/${emojiSet}/${iconName}.svg`, {
-          responseType: "text",
-          retry: 2,
-          retryDelay: 500
-        });
-        if (svg && svg !== "404") {
-          const key = ["1", emojiSet, iconName].join("|");
-          await emojiCache.setItem(key, svg);
+    const timeout = getFetchTimeout(ctx.runtimeConfig);
+    const deadline = AbortSignal.timeout(timeout);
+    const endTiming = ctx.timings.start("emoji-fetch");
+    try {
+      for (const iconName of possibleNames) {
+        if (deadline.aborted)
           break;
+        try {
+          svg = await $fetch(`https://api.iconify.design/${emojiSet}/${iconName}.svg`, {
+            responseType: "text",
+            retry: 0,
+            signal: deadline,
+            timeout
+          });
+          if (svg && svg !== "404") {
+            const key = ["1", emojiSet, iconName].join("|");
+            await emojiCache.setItem(key, svg);
+            break;
+          }
+        } catch {
+          svg = null;
         }
-      } catch {
-        svg = null;
       }
+    } finally {
+      endTiming();
     }
   }
   if (svg) {

package/dist/runtime/server/og-image/satori/renderer.js

@@ -23,7 +23,7 @@ function withWarningCapture(fn) {
   });
 }
 export async function createSvg(event) {
-  const { options } = event;
+  const { options, timings } = event;
   const { satoriOptions: _satoriOptions } = useOgImageRuntimeConfig();
   const { fontFamilyOverride, defaultFont } = getDefaultFontFamily(options);
   const [satori, vnodes] = await Promise.all([
@@ -32,13 +32,13 @@ export async function createSvg(event) {
   ]);
   const codepoints = extractCodepoints(vnodes);
   const hasCustomFonts = Array.isArray(options.fonts) && options.fonts.length > 0;
-  const fonts = await loadFontsForRenderer(event, {
+  const fonts = await timings.measure("font-load", () => loadFontsForRenderer(event, {
     supportedFormats: /* @__PURE__ */ new Set(["ttf", "otf", "woff"]),
     component: options.component,
     fontFamilyOverride: fontFamilyOverride || defaultFont,
     codepoints,
     fontDefs: options.fonts
-  });
+  }));
   await event._nitro.hooks.callHook("nuxt-og-image:satori:vnodes", vnodes, event);
   const satoriFonts = !hasCustomFonts && _satoriFontCache.get(fonts) || fonts.map((f) => ({ ...f, name: f.family }));
   if (!hasCustomFonts)
@@ -80,9 +80,9 @@ export async function createSvg(event) {
     width: options.width,
     height: options.height
   });
-  const { result, warnings } = await withWarningCapture(
+  const { result, warnings } = await timings.measure("render-satori", () => withWarningCapture(
     () => satori(vnodes, satoriOptions)
-  );
+  ));
   return { svg: result, warnings, fonts };
 }
 async function createPng(event) {
@@ -92,14 +92,16 @@ async function createPng(event) {
     throw new Error("Failed to create SVG");
   const options = defu(event.options.resvg, resvgOptions);
   const Resvg = await getResvg();
-  const resvg = new Resvg(svg, options);
-  const pngData = resvg.render();
-  const png = pngData.asPng();
-  if (typeof pngData.free === "function")
-    pngData.free();
-  if (typeof resvg.free === "function")
-    resvg.free();
-  return png;
+  return event.timings.measure("render-resvg", () => {
+    const resvg = new Resvg(svg, options);
+    const pngData = resvg.render();
+    const png = pngData.asPng();
+    if (typeof pngData.free === "function")
+      pngData.free();
+    if (typeof resvg.free === "function")
+      resvg.free();
+    return png;
+  });
 }
 async function createJpeg(event) {
   const { sharpOptions } = useOgImageRuntimeConfig();
@@ -115,7 +117,7 @@ async function createJpeg(event) {
     throw new Error("Sharp dependency could not be loaded. Please check you have it installed and are using a compatible runtime.");
   });
   const options = defu(event.options.sharp, sharpOptions);
-  return sharp(svgBuffer, options).jpeg(options).toBuffer();
+  return event.timings.measure("render-sharp", () => sharp(svgBuffer, options).jpeg(options).toBuffer());
 }
 function rewriteVNodeFontFamilies(node, subsetChains) {
   const style = node.props?.style;