@ethercorps/sveltekit-og 4.3.0-next.1 → 4.3.0-next.2

package/dist/helpers/create.js

@@ -3,14 +3,12 @@ import { default_fonts, DEFAULT_WIDTH } from "../helpers/defaults.js";
 import { useResvg, useSatori } from "../providers/instances.js";
 import { createVNode } from "./toJSX.js";
 import { logger } from "./logger.js";
+import { handleAsyncAll, handleAsync, ErrorCodes } from "./error-handler.js";
 export async function createSvg(element, imageOptions, componentOptions) {
-    const [satori, vnodes] = await Promise.all([
-        useSatori(),
-        createVNode(element, componentOptions),
-    ]);
+    const [satori, vnodes] = await handleAsyncAll([() => useSatori(), () => Promise.resolve(createVNode(element, componentOptions))], ErrorCodes.SATORI_RENDER_FAILED, "Failed to initialize Satori or create VNode");
     const satoriOptions = structuredClone(imageOptions);
     if (!Object.hasOwn(satoriOptions, "fonts")) {
-        satoriOptions["fonts"] = await default_fonts();
+        satoriOptions["fonts"] = await handleAsync(() => default_fonts(), ErrorCodes.FONT_LOAD_FAILED, "Failed to load default fonts for Satori");
     }
     satoriOptions["loadAdditionalAsset"] = loadDynamicAsset({
         emoji: imageOptions.emoji,
@@ -18,12 +16,12 @@ export async function createSvg(element, imageOptions, componentOptions) {
     logger.debug("Generating SVG with Satori");
     logger.info("VNode provided to satori:", JSON.stringify(vnodes, null, 2), "\n");
     logger.info("Options provided to satori:", imageOptions);
-    return satori(vnodes, satoriOptions);
+    return handleAsync(() => satori(vnodes, satoriOptions), ErrorCodes.SATORI_RENDER_FAILED, "Failed to render SVG with Satori");
 }
 export async function createPng(element, imageOptions, componentOptions) {
-    const svg = await createSvg(element, imageOptions, componentOptions);
+    const svg = await handleAsync(() => createSvg(element, imageOptions, componentOptions), ErrorCodes.SATORI_RENDER_FAILED, "Failed to create SVG for PNG rendering");
     logger.debug("SVG generated by satori for ReSVG: \n", svg, "\n");
-    const resvg_instance = await useResvg();
+    const resvg_instance = await handleAsync(() => useResvg(), ErrorCodes.RESVG_INIT_FAILED, "Failed to initialize ReSVG");
     const resvg_options = {
         fitTo: {
             mode: "width",
@@ -32,7 +30,9 @@ export async function createPng(element, imageOptions, componentOptions) {
     };
     logger.debug("Rendering PNG with ReSVG");
     logger.info("Options provided to ReSVG:", resvg_options, "\n");
-    const resvg = new resvg_instance(svg, resvg_options);
-    const png_data = resvg.render();
-    return png_data.asPng();
+    return handleAsync(async () => {
+        const resvg = new resvg_instance(svg, resvg_options);
+        const png_data = resvg.render();
+        return png_data.asPng();
+    }, ErrorCodes.RESVG_RENDER_FAILED, "Failed to render PNG with ReSVG");
 }

package/dist/helpers/defaults.js

@@ -1,16 +1,13 @@
+import { handleAsyncAll, validateResponse, ErrorCodes } from "./error-handler.js";
 export async function default_fonts() {
-    const [noto_sans_regular_font_resp, noto_sans_bold_font_reps] = await Promise.all([
-        fetch("https://cdn-sveltekit-og.ethercorps.io/NotoSans-Regular.ttf"),
-        fetch("https://cdn-sveltekit-og.ethercorps.io/NotoSans-Bold.ttf"),
-    ]);
-    if (!(noto_sans_bold_font_reps.ok || noto_sans_bold_font_reps.ok)) {
-        console.error("Not able to load default fonts");
-        throw new Error("Not able to load default fonts");
-    }
-    const [noto_sans_regular_font, noto_sans_bold_font] = await Promise.all([
-        noto_sans_regular_font_resp.arrayBuffer(),
-        noto_sans_bold_font_reps.arrayBuffer(),
-    ]);
+    const [noto_sans_regular_font_resp, noto_sans_bold_font_reps] = await handleAsyncAll([
+        () => fetch("https://cdn-sveltekit-og.ethercorps.io/NotoSans-Regular.ttf"),
+        () => fetch("https://cdn-sveltekit-og.ethercorps.io/NotoSans-Bold.ttf"),
+    ], ErrorCodes.FONT_LOAD_FAILED, "Failed to fetch default fonts");
+    const [noto_sans_regular_font, noto_sans_bold_font] = await handleAsyncAll([
+        () => validateResponse(noto_sans_regular_font_resp, ErrorCodes.FONT_LOAD_FAILED, "Failed to validate regular font response"),
+        () => validateResponse(noto_sans_bold_font_reps, ErrorCodes.FONT_LOAD_FAILED, "Failed to validate bold font response"),
+    ], ErrorCodes.FONT_LOAD_FAILED, "Failed to process font responses");
     return [
         {
             data: noto_sans_regular_font,

package/dist/helpers/emoji.js

@@ -1,4 +1,5 @@
 import { DEFAULT_EMOJI_PROVIDER } from "../helpers/defaults.js";
+import { handleAsync, ErrorCodes } from "./error-handler.js";
 // Code stolen from @vercel/og and https://github.com/fineshopdesign/cf-wasm
 const U200D = String.fromCharCode(8205);
 const UFE0Fg = /\uFE0F/g;
@@ -37,24 +38,28 @@ const emoji_apis = {
         code.toLowerCase() +
         "_flat.svg",
 };
-function loadEmoji(code, type) {
-    if (!type || !emoji_apis[type]) {
-        type = DEFAULT_EMOJI_PROVIDER;
-    }
-    const api = emoji_apis[type];
-    if (typeof api === "function") {
-        return fetch(api(code));
-    }
-    return fetch(`${api}${code.toUpperCase()}.svg`);
+async function loadEmoji(code, type) {
+    return handleAsync(async () => {
+        if (!type || !emoji_apis[type]) {
+            type = DEFAULT_EMOJI_PROVIDER;
+        }
+        const api = emoji_apis[type];
+        if (typeof api === "function") {
+            return fetch(api(code));
+        }
+        return fetch(`${api}${code.toUpperCase()}.svg`);
+    }, ErrorCodes.EMOJI_LOAD_FAILED, `Failed to load emoji for code: ${code}`);
 }
 export const loadDynamicAsset = ({ emoji }) => {
     const fn = async (code, text) => {
         if (code === "emoji") {
-            const iconCode = getIconCode(text);
-            const emojiResponse = await loadEmoji(iconCode, emoji);
-            const svgText = await emojiResponse.text();
-            const base64Data = btoa(svgText);
-            return `data:image/svg+xml;base64,` + base64Data;
+            return handleAsync(async () => {
+                const iconCode = getIconCode(text);
+                const emojiResponse = await loadEmoji(iconCode, emoji);
+                const svgText = await emojiResponse.text();
+                const base64Data = btoa(svgText);
+                return `data:image/svg+xml;base64,` + base64Data;
+            }, ErrorCodes.EMOJI_LOAD_FAILED, `Failed to process emoji: ${text}`);
         }
     };
     return async (...args) => {

package/dist/helpers/error-handler.d.ts

@@ -0,0 +1,33 @@
+export declare class ImageResponseError extends Error {
+    code: string;
+    originalError?: Error | undefined;
+    constructor(message: string, code: string, originalError?: Error | undefined);
+}
+export declare const ErrorCodes: {
+    readonly FONT_LOAD_FAILED: "FONT_LOAD_FAILED";
+    readonly VNODE_CREATION_FAILED: "VNODE_CREATION_FAILED";
+    readonly SATORI_RENDER_FAILED: "SATORI_RENDER_FAILED";
+    readonly RESVG_INIT_FAILED: "RESVG_INIT_FAILED";
+    readonly RESVG_RENDER_FAILED: "RESVG_RENDER_FAILED";
+    readonly SATORI_INIT_FAILED: "SATORI_INIT_FAILED";
+    readonly EMOJI_LOAD_FAILED: "EMOJI_LOAD_FAILED";
+    readonly UNKNOWN_ERROR: "UNKNOWN_ERROR";
+};
+/**
+ * Wraps an async operation with error handling and logging
+ */
+export declare function handleAsync<T = unknown>(operation: () => Promise<T>, errorCode: string, errorMessage: string): Promise<T>;
+/**
+ * Wraps a sync operation with error handling and logging
+ */
+export declare function handleSync<T>(operation: () => T, errorCode: string, errorMessage: string): T;
+/**
+ * Wraps multiple async operations with error handling
+ */
+export declare function handleAsyncAll<T extends readonly unknown[]>(operations: {
+    readonly [K in keyof T]: () => Promise<T[K]>;
+}, errorCode: string, errorMessage: string): Promise<T>;
+/**
+ * Validates a response and throws if not ok
+ */
+export declare function validateResponse(response: Response, errorCode: string, errorMessage: string): Promise<ArrayBuffer>;

package/dist/helpers/error-handler.js

@@ -0,0 +1,71 @@
+import { logger } from "./logger.js";
+export class ImageResponseError extends Error {
+    code;
+    originalError;
+    constructor(message, code, originalError) {
+        super(message);
+        this.code = code;
+        this.originalError = originalError;
+        this.name = "ImageResponseError";
+    }
+}
+export const ErrorCodes = {
+    FONT_LOAD_FAILED: "FONT_LOAD_FAILED",
+    VNODE_CREATION_FAILED: "VNODE_CREATION_FAILED",
+    SATORI_RENDER_FAILED: "SATORI_RENDER_FAILED",
+    RESVG_INIT_FAILED: "RESVG_INIT_FAILED",
+    RESVG_RENDER_FAILED: "RESVG_RENDER_FAILED",
+    SATORI_INIT_FAILED: "SATORI_INIT_FAILED",
+    EMOJI_LOAD_FAILED: "EMOJI_LOAD_FAILED",
+    UNKNOWN_ERROR: "UNKNOWN_ERROR",
+};
+/**
+ * Wraps an async operation with error handling and logging
+ */
+export async function handleAsync(operation, errorCode, errorMessage) {
+    try {
+        return await operation();
+    }
+    catch (error) {
+        const err = error instanceof Error ? error : new Error(String(error));
+        logger.error(`${errorMessage}:`, err.message);
+        throw new ImageResponseError(errorMessage, errorCode, err);
+    }
+}
+/**
+ * Wraps a sync operation with error handling and logging
+ */
+export function handleSync(operation, errorCode, errorMessage) {
+    try {
+        return operation();
+    }
+    catch (error) {
+        const err = error instanceof Error ? error : new Error(String(error));
+        logger.error(`${errorMessage}:`, err.message);
+        throw new ImageResponseError(errorMessage, errorCode, err);
+    }
+}
+/**
+ * Wraps multiple async operations with error handling
+ */
+export async function handleAsyncAll(operations, errorCode, errorMessage) {
+    try {
+        return (await Promise.all(operations.map((op) => op())));
+    }
+    catch (error) {
+        const err = error instanceof Error ? error : new Error(String(error));
+        logger.error(`${errorMessage}:`, err.message);
+        throw new ImageResponseError(errorMessage, errorCode, err);
+    }
+}
+/**
+ * Validates a response and throws if not ok
+ */
+export async function validateResponse(response, errorCode, errorMessage) {
+    if (!response.ok) {
+        logger.error(`${errorMessage}: HTTP ${response.status} ${response.statusText}`);
+        throw new ImageResponseError(`${errorMessage} (HTTP ${response.status})`, errorCode);
+    }
+    const buffer = await response.arrayBuffer();
+    return buffer;
+}

package/dist/helpers/toJSX.js

@@ -1,11 +1,14 @@
 import { render } from "svelte/server";
 import { html } from "satori-html";
+import { handleSync, ErrorCodes } from "./error-handler.js";
 function svelteComponentToHTML(component, props = {}) {
-    const { body, head } = render(component, { props });
-    return html(body + head);
+    return handleSync(() => {
+        const { body, head } = render(component, { props });
+        return html(body + head);
+    }, ErrorCodes.VNODE_CREATION_FAILED, "Failed to render Svelte component to HTML");
 }
 export function createVNode(element, componentOptions) {
-    return typeof element === "string"
+    return handleSync(() => typeof element === "string"
         ? html(element.replaceAll("\n", "").trim())
-        : svelteComponentToHTML(element, componentOptions?.props);
+        : svelteComponentToHTML(element, componentOptions?.props), ErrorCodes.VNODE_CREATION_FAILED, "Failed to create VNode");
 }

package/dist/helpers/utils.d.ts

@@ -0,0 +1 @@
+export declare const formatBytes: (bytes: number, decimals?: number) => string;

package/dist/helpers/utils.js

@@ -0,0 +1,9 @@
+const sizeFormats = ['Bytes', 'KB', 'MB', 'GB'];
+const kbSize = 1024;
+export const formatBytes = (bytes, decimals = 2) => {
+    if (bytes === 0)
+        return '0 Bytes';
+    const decimalPoint = decimals < 0 ? 0 : decimals;
+    const sizeIndex = Math.min(Math.floor(Math.log(bytes) / Math.log(kbSize)), 3);
+    return parseFloat((bytes / Math.pow(kbSize, sizeIndex)).toFixed(decimalPoint)) + ' ' + sizeFormats[sizeIndex];
+};

package/dist/image-response.js

@@ -1,6 +1,8 @@
 import { DEFAULT_OPTIONS, DEFAULT_STATUS_CODE, DEFAULT_STATUS_TEXT } from "./helpers/defaults.js";
 import { createPng, createSvg } from "./helpers/create.js";
 import { isDebugEnabled, logger, setDebug } from "./helpers/logger.js";
+import { handleAsync, ImageResponseError, ErrorCodes } from "./helpers/error-handler.js";
+import { formatBytes } from "./helpers/utils.js";
 export class ImageResponse extends Response {
     constructor(element, options, props) {
         const extended_options = Object.assign({ ...DEFAULT_OPTIONS }, options);
@@ -9,11 +11,22 @@ export class ImageResponse extends Response {
         const create_image_function = extended_options.format === "png" ? createPng : createSvg;
         const body = new ReadableStream({
             async start(controller) {
-                const buffer = await create_image_function(element, extended_options, {
-                    props,
-                });
-                controller.enqueue(buffer);
-                controller.close();
+                try {
+                    const buffer = (await handleAsync(() => create_image_function(element, extended_options, {
+                        props,
+                    }), ErrorCodes.UNKNOWN_ERROR, `Failed to generate ${extended_options.format?.toUpperCase()}`));
+                    logger.debug(buffer.length.toLocaleString());
+                    logger.info(`Generated ${extended_options.format.toUpperCase()}: ${formatBytes(buffer.length)}`);
+                    controller.enqueue(buffer);
+                    controller.close();
+                }
+                catch (error) {
+                    const err = error instanceof ImageResponseError
+                        ? error
+                        : new ImageResponseError(error instanceof Error ? error.message : String(error), ErrorCodes.UNKNOWN_ERROR, error instanceof Error ? error : new Error(String(error)));
+                    logger.error("Failed to create image response:", err.message);
+                    controller.error(err);
+                }
             },
         });
         super(body, {

package/dist/providers/instances.js

@@ -1,5 +1,6 @@
 import { isEdgeLight, isWorkerd } from "std-env";
 import { logger } from "../helpers/logger.js";
+import { handleAsync, ErrorCodes } from "../helpers/error-handler.js";
 // we keep instances alive to avoid re-importing them on every request, maybe not needed but
 // also helps with type inference
 // Code from vue-og-images
@@ -16,9 +17,17 @@ export async function useResvg() {
     logger.debug("Initializing Resvg WASM");
     const isWorkerLikeRuntime = isEdgeLight || isWorkerd;
     logger.info(`Detected runtime: ${isWorkerLikeRuntime ? "Edge Light or Workerd" : "Node.js"}`);
-    const moduleImport = isWorkerLikeRuntime ? import(`./resvg/edge.js`) : import("./resvg/node.js");
-    resvgInstance.instance = await moduleImport.then((m) => m.default);
-    await resvgInstance.instance.initWasmPromise;
+    const moduleImport = await handleAsync(async () => {
+        if (isWorkerLikeRuntime) {
+            return import("./resvg/edge.js");
+        }
+        return import("./resvg/node.js");
+    }, ErrorCodes.RESVG_INIT_FAILED, "Failed to import ReSVG module");
+    resvgInstance.instance = await handleAsync(async () => {
+        const mod = await moduleImport;
+        return mod.default;
+    }, ErrorCodes.RESVG_INIT_FAILED, "Failed to load ReSVG default export");
+    await handleAsync(async () => resvgInstance.instance.initWasmPromise, ErrorCodes.RESVG_INIT_FAILED, "Failed to initialize ReSVG WASM");
     return resvgInstance.instance.Resvg;
 }
 export async function useSatori() {
@@ -26,7 +35,10 @@ export async function useSatori() {
         return satoriInstance.instance.satori;
     }
     logger.debug("Initializing Satori WASM");
-    satoriInstance.instance = await import(`./satori/node.js`).then((m) => m.default);
-    await satoriInstance.instance.initWasmPromise;
+    satoriInstance.instance = await handleAsync(async () => {
+        const mod = await import("./satori/node.js");
+        return mod.default;
+    }, ErrorCodes.SATORI_INIT_FAILED, "Failed to load Satori module");
+    await handleAsync(async () => satoriInstance.instance.initWasmPromise, ErrorCodes.SATORI_INIT_FAILED, "Failed to initialize Satori WASM");
     return satoriInstance.instance.satori;
 }

package/dist/providers/resvg/edge.js

@@ -4,6 +4,7 @@ export default {
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore
 	initWasmPromise: initWasm(
+		// @ts-ignore
 		import("@resvg/resvg-wasm/index_bg.wasm?module").then((r) => r.default || r)
 	),
 	Resvg: _Resvg,

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { SatoriOptions } from "satori/wasm";
+import type { SatoriOptions } from "satori";
 import type { EmojiType } from "./helpers/emoji.js";
 export type Font = SatoriOptions["fonts"][number];
 export type Fonts = Font[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethercorps/sveltekit-og",
-  "version": "4.3.0-next.1",
+  "version": "4.3.0-next.2",
   "license": "MIT",
   "homepage": "https://sveltekit-og.dev",
   "repository": "github:ethercorps/sveltekit-og",
@@ -97,14 +97,11 @@
   "peerDependencies": {
     "@sveltejs/kit": ">=2.0.0"
   },
-  "engines": {
-    "node": ">=22.16.0"
-  },
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
     "build:examples": "pnpm -F \"./examples/**\" --parallel --color build",
-    "check:examples": "pnpm -F \"./examples/**\" --parallel --color i",
+    "check:examples": "pnpm install -r",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",