debug: re-add arrayBuffer() pattern to default.png to diagnose remaining issue

Miriad · Miriad · commit e5cb2c4dbb65 · 2026-03-17T01:01:57.000Z
diff --git a/apps/web/src/pages/api/og/default.png.ts b/apps/web/src/pages/api/og/default.png.ts
@@ -1,15 +1,5 @@
 /**
- * Default OG image generation for generic pages.
- *
- * Uses workers-og (Satori + resvg-wasm) to generate 1200x630 PNG images
- * on Cloudflare Workers. Simpler layout — just branding + title + optional subtitle.
- * Used for homepage, author pages, and other generic pages.
- *
- * Usage: /api/og/default.png?title=About+Us&subtitle=Learn+more+about+CodingCat.dev
- *
- * Query params:
- * - title (required): Page title
- * - subtitle (optional): Subtitle text
+ * Default OG image — debug version to surface runtime errors.
  */
 import type { APIRoute } from "astro";
 import { ImageResponse } from "workers-og";
@@ -21,21 +11,55 @@ export const GET: APIRoute = async ({ url }) => {
   try {
     const title = url.searchParams.get("title") || "CodingCat.dev";
     const subtitle = url.searchParams.get("subtitle") || undefined;
-
     const html = generateDefaultOgHtml({ title, subtitle });
+    const fonts = loadFonts();
+
+    // Debug: font info
+    const fontDebug = fonts.map((f: any) => ({
+      name: f.name,
+      weight: f.weight,
+      dataType: typeof f.data,
+      isUint8Array: f.data instanceof Uint8Array,
+      isArrayBuffer: f.data instanceof ArrayBuffer,
+      length: f.data?.byteLength || f.data?.length || 0,
+      constructor: f.data?.constructor?.name,
+      first4Bytes: f.data ? Array.from(new Uint8Array(f.data instanceof ArrayBuffer ? f.data : f.data.buffer || f.data).slice(0, 4)) : null,
+    }));
 
-    const response = new ImageResponse(html, {
+    // Await the body to catch stream errors
+    const ogResponse = new ImageResponse(html, {
       width: 1200,
       height: 630,
-      fonts: loadFonts(),
+      fonts,
     });
 
-    response.headers.set("Cache-Control", OG_CACHE_HEADER);
+    const body = await ogResponse.arrayBuffer();
 
-    return response;
+    if (body.byteLength === 0) {
+      return new Response(
+        JSON.stringify({
+          error: "Empty body from ImageResponse",
+          fontDebug,
+          htmlSnippet: html.slice(0, 500),
+        }),
+        { status: 500, headers: { "Content-Type": "application/json" } }
+      );
+    }
+
+    return new Response(body, {
+      status: 200,
+      headers: {
+        "Content-Type": "image/png",
+        "Content-Length": body.byteLength.toString(),
+      },
+    });
   } catch (error: any) {
     return new Response(
-      JSON.stringify({ error: error.message, stack: error.stack }),
+      JSON.stringify({
+        error: error.message,
+        stack: error.stack,
+        name: error.name,
+      }),
       { status: 500, headers: { "Content-Type": "application/json" } }
     );
   }
