fix: prevent Worker hangs and fix undefined .includes() crash (#43)

* fix: prevent Worker hangs and fix undefined .includes() crash

- Add MongoDB connection timeouts (serverSelectionTimeoutMS, connectTimeoutMS,
  socketTimeoutMS) to prevent indefinite hangs when DB is unreachable
- Eagerly initialize Payload at module-load time with a 15s timeout guard,
  reducing cold-start penalty on Cloudflare Workers
- Guard against undefined order data in OrderSteps and OrderContainer to
  prevent TypeError: Cannot read properties of undefined (reading 'includes')

* fix: simplify conditional check for order payment status

Author: choden-dev

components/ordercontainer/OrderContainer.tsx

@@ -94,6 +94,11 @@ const OrderContainerInner = () => {
 				const data = await res.json();
 				const order = data.order;
 
+				if (!order?.status) {
+					setResumeChecked(true);
+					return;
+				}
+
 				if (order.status === OrderStatus.EXPIRED) {
 					// Can't resume expired orders
 					setResumeChecked(true);

components/ordercontainer/OrderSteps.tsx

@@ -66,13 +66,13 @@ export default function OrderSteps({
 				const res = await fetch(`/api/shop/${orderId}`);
 				if (res.ok) {
 					const data = await res.json();
-					setOrderDetails(data.order);
+					const order = data.order;
+					if (!order?.status) return;
+
+					setOrderDetails(order);
 
 					// If order is already PAID, jump to pickup
-					if (
-						data.order.status === OrderStatus.PAID &&
-						step === OrderStep.PAYMENT
-					) {
+					if (order.status === OrderStatus.PAID && step === OrderStep.PAYMENT) {
 						onPaymentSuccess();
 					}
 					// If already has a timeslot, jump to complete
@@ -81,7 +81,7 @@ export default function OrderSteps({
 							OrderStatus.AWAITING_PICKUP,
 							OrderStatus.PRINTED,
 							OrderStatus.PICKED_UP,
-						].includes(data.order.status) &&
+						].includes(order.status) &&
 						step !== OrderStep.COMPLETE
 					) {
 						onPickupConfirmed();
@@ -102,7 +102,7 @@ export default function OrderSteps({
 				const res = await fetch(`/api/shop/${orderId}`);
 				if (res.ok) {
 					const data = await res.json();
-					if (data.order.status === OrderStatus.PAID) {
+					if (data.order?.status === OrderStatus.PAID) {
 						clearInterval(interval);
 						setWaitingForStripe(false);
 						onPaymentSuccess();

lib/payload.ts

@@ -2,17 +2,37 @@ import type { Payload } from "payload";
 import { getPayload } from "payload";
 import configPromise from "../payload.config";
 
-let cachedPayload: Payload | null = null;
+/** Timeout (ms) for Payload initialisation — prevents Workers from hanging. */
+const INIT_TIMEOUT_MS = 15_000;
+
+/**
+ * Eagerly start Payload initialization at module-load time.
+ *
+ * On Cloudflare Workers the first request after a cold start must wait for
+ * Payload + MongoDB to initialise. By kicking this off at import time the
+ * connection is established in parallel with request routing, which greatly
+ * reduces (or eliminates) the cold-start penalty for the first request.
+ *
+ * A timeout wrapper ensures the Worker never hangs indefinitely if the
+ * database is unreachable.
+ */
+const payloadPromise: Promise<Payload> = Promise.race([
+	getPayload({ config: configPromise }),
+	new Promise<never>((_, reject) =>
+		setTimeout(
+			() => reject(new Error("Payload initialization timed out")),
+			INIT_TIMEOUT_MS,
+		),
+	),
+]);
 
 /**
  * Returns a cached Payload CMS client instance.
  * Uses the Payload Local API for server-side data fetching.
+ *
+ * The first call awaits the eagerly-started initialisation promise;
+ * subsequent calls return the already-resolved instance immediately.
  */
 export const getPayloadClient = async (): Promise<Payload> => {
-	if (cachedPayload) {
-		return cachedPayload;
-	}
-
-	cachedPayload = await getPayload({ config: configPromise });
-	return cachedPayload;
+	return payloadPromise;
 };

payload.config.ts

@@ -22,6 +22,14 @@ export default buildConfig({
 	secret: process.env.PAYLOAD_SECRET || "CHANGE-ME-IN-PRODUCTION",
 	db: mongooseAdapter({
 		url: process.env.DATABASE_URI || process.env.MONGODB_URI || "",
+		connectOptions: {
+			// Prevent indefinite hangs on Cloudflare Workers (stateless runtime).
+			// Without these, a slow or unreachable MongoDB will cause the Worker
+			// to hang until Cloudflare cancels the request.
+			serverSelectionTimeoutMS: 5000,
+			connectTimeoutMS: 5000,
+			socketTimeoutMS: 10000,
+		},
 	}),
 	editor: lexicalEditor(),
 	collections: [Users, Customers, Orders, Timeslots, AboutSections, Media],