debug: add try/catch to OG endpoints to surface runtime errors

OG endpoints return 200 with image/png headers but 0-byte body.
Adding error handling to blog.png and default.png to capture the
actual WASM/font error from workers-og at runtime on CF Workers.

Co-authored-by: seniordeveloper <seniordeveloper@miriad.systems>

Author: Miriad

apps/web/src/pages/api/og/blog.png.ts

@@ -18,19 +18,34 @@ import { generateOgHtml, loadFonts, OG_CACHE_HEADER } from "../../../lib/og-util
 export const prerender = false;
 
 export const GET: APIRoute = async ({ url }) => {
-  const title = url.searchParams.get("title") || "CodingCat.dev";
-  const author = url.searchParams.get("author") || "CodingCat.dev";
-  const type = url.searchParams.get("type") || "Blog";
+  try {
+    const title = url.searchParams.get("title") || "CodingCat.dev";
+    const author = url.searchParams.get("author") || "CodingCat.dev";
+    const type = url.searchParams.get("type") || "Blog";
 
-  const html = generateOgHtml({ title, author, type });
+    const html = generateOgHtml({ title, author, type });
+    const fonts = loadFonts();
 
-  const response = new ImageResponse(html, {
-    width: 1200,
-    height: 630,
-    fonts: loadFonts(),
-  });
+    const response = new ImageResponse(html, {
+      width: 1200,
+      height: 630,
+      fonts,
+    });
 
-  response.headers.set("Cache-Control", OG_CACHE_HEADER);
+    response.headers.set("Cache-Control", OG_CACHE_HEADER);
 
-  return response;
+    return response;
+  } catch (error: any) {
+    return new Response(
+      JSON.stringify({
+        error: error.message,
+        stack: error.stack,
+        name: error.name,
+      }),
+      {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
 };

apps/web/src/pages/api/og/default.png.ts

@@ -18,18 +18,32 @@ import { generateDefaultOgHtml, loadFonts, OG_CACHE_HEADER } from "../../../lib/
 export const prerender = false;
 
 export const GET: APIRoute = async ({ url }) => {
-  const title = url.searchParams.get("title") || "CodingCat.dev";
-  const subtitle = url.searchParams.get("subtitle") || undefined;
+  try {
+    const title = url.searchParams.get("title") || "CodingCat.dev";
+    const subtitle = url.searchParams.get("subtitle") || undefined;
 
-  const html = generateDefaultOgHtml({ title, subtitle });
+    const html = generateDefaultOgHtml({ title, subtitle });
 
-  const response = new ImageResponse(html, {
-    width: 1200,
-    height: 630,
-    fonts: loadFonts(),
-  });
+    const response = new ImageResponse(html, {
+      width: 1200,
+      height: 630,
+      fonts: loadFonts(),
+    });
 
-  response.headers.set("Cache-Control", OG_CACHE_HEADER);
+    response.headers.set("Cache-Control", OG_CACHE_HEADER);
 
-  return response;
+    return response;
+  } catch (error: any) {
+    return new Response(
+      JSON.stringify({
+        error: error.message,
+        stack: error.stack,
+        name: error.name,
+      }),
+      {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
 };