feat(don): widget resilience

ts will never fail

app/api/donate/hb/route.ts

@@ -6,38 +6,47 @@ import { and, asc, not, sql } from "drizzle-orm";
 import type { NextRequest } from "next/server";
 import { getPostHogClient } from "@/lib/posthog-server";
 
+async function runResume() {
+  const [havent] = await db
+    .select()
+    .from(donations)
+    .where(
+      and(
+        not(donations.sent),
+        sql`${donations.lastPing} < NOW() - INTERVAL '2 minutes'`,
+      ),
+    )
+    .limit(1)
+    .orderBy(asc(donations.id));
+  if (!havent) return;
+  getPostHogClient().capture({
+    distinctId: String(havent.id),
+    event: "donation_resent",
+    properties: { donation_id: havent.id, amount: havent.amount },
+  });
+  const result = {
+    ...havent,
+    message: havent.message ?? "",
+    image: havent.image
+      ? await fileToDataUrl(new File([Buffer.from(havent.image)], "abc.jpeg"))
+      : undefined,
+  };
+  sse.donate.pub("ping", result);
+  return result;
+}
+
 export async function PATCH(req: NextRequest) {
   const tag = Number(req.nextUrl.searchParams.get("tag") ?? "abc");
+  const resume = req.nextUrl.searchParams.get("resume") === "true";
   if (Number.isNaN(tag))
     return Response.json({ error: "Invalid Tag" }, { status: 400 });
 
-  queueMicrotask(async () => {
-    const [havent] = await db
-      .select()
-      .from(donations)
-      .where(
-        and(
-          not(donations.sent),
-          sql`${donations.lastPing} < NOW() - INTERVAL '2 minutes'`,
-        ),
-      )
-      .limit(1)
-      .orderBy(asc(donations.id));
-    if (!havent) return;
-    getPostHogClient().capture({
-      distinctId: String(havent.id),
-      event: "donation_resent",
-      properties: { donation_id: havent.id, amount: havent.amount },
-    });
-    sse.donate.pub("ping", {
-      ...havent,
-      message: havent.message ?? "",
-      image: havent.image
-        ? await fileToDataUrl(new File([Buffer.from(havent.image)], "abc.jpeg"))
-        : undefined,
-    });
-  });
+  if (!resume) queueMicrotask(runResume);
 
   sse.donate.pub("heartbeat", tag);
+  if (resume) {
+    const res = await runResume();
+    if (res) return Response.json(res, { status: 302 });
+  }
   return Response.json({ success: true });
 }

app/widget/donate/page.tsx

@@ -27,6 +27,7 @@ export default function () {
   const queue = useRef<Promise<void>>(Promise.resolve());
 
   function enqueue(data: DonateData) {
+    if (!data) return;
     if (onQueue.current.includes(data.id)) return;
     onQueue.current.push(data.id);
     queue.current = queue.current.then(() => ping(data).catch(console.error));
@@ -45,7 +46,9 @@ export default function () {
     const ttsAvailable = await new Promise(
       (r) => (
         (tts.onloadeddata = () => r(true)),
-        (tts.onerror = () => r(false))
+        (tts.onerror = () => r(false)),
+        // longest and most complex text takes at most a minute and a half to generate
+        setTimeout(() => r(false), 120000)
       ),
     );
     if (!ttsAvailable)
@@ -96,10 +99,16 @@ export default function () {
       const promise = new Promise(
         (r, j) => ((pendingHeartbeat[tag] = r), setTimeout(j, 30000)),
       );
-      await fetch(`/api/donate/hb?tag=${tag}`, {
-        method: "PATCH",
-      }).catch(() => {});
       try {
+        const res = await fetch(
+          `/api/donate/hb?tag=${tag}${failed > 6 ? "&resume=true" : ""}`,
+          {
+            method: "PATCH",
+            signal: AbortSignal.timeout(15000),
+          },
+        ).catch(() => {});
+        if (failed > 6 && res)
+          queueMicrotask(() => res.status === 302 && res.json().then(enqueue));
         await promise;
         console.log("Heartbeat OK");
         setFailed(0);
@@ -109,7 +118,18 @@ export default function () {
         posthog.capture("donation_widget_heartbeat_failure", {
           fail_count: failed + 1,
         });
-        if (failed > 12) location.reload();
+        if (failed > 12)
+          fetch("/widget/donate", {
+            signal: AbortSignal.timeout(30000),
+            method: "HEAD",
+          })
+            .then(({ ok }) => {
+              if (!ok) throw "NOT OK";
+              location.reload();
+            })
+            .catch(() =>
+              console.warn("Wants to reload, but not safe. Retrying later."),
+            );
       }
     }, 10000);
     return () => {