rwsdk
Version:
Build fast, server-driven webapps on Cloudflare with SSR, RSC, and realtime
79 lines (78 loc) • 4.02 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
export const HealthCheckClient = () => {
const [loading, setLoading] = useState(false);
const [lastCheck, setLastCheck] = useState(null);
const runHealthCheck = async () => {
setLoading(true);
try {
// Get current timestamp to verify round-trip
const timestamp = Date.now();
const result = await globalThis.__rw.callServer("__health", [timestamp]);
// Process the result
let status = "error";
let verificationPassed = false;
if (typeof result === "object" && result !== null) {
const typedResult = result;
status = typedResult.status || "error";
verificationPassed = typedResult.timestamp === timestamp;
}
else if (result === "ok") {
status = "ok";
verificationPassed = true;
}
setLastCheck({
status,
verificationPassed,
timestamp,
rawResult: result,
});
}
catch (error) {
setLastCheck({
status: "error",
verificationPassed: false,
timestamp: Date.now(),
error: error instanceof Error ? error.message : String(error),
});
}
finally {
setLoading(false);
}
};
return (_jsxs("div", { className: "health-check-client", style: {
margin: "20px 0",
padding: "15px",
border: "1px solid #ddd",
borderRadius: "4px",
background: "#f9f9f9",
fontFamily: "system-ui, -apple-system, sans-serif",
}, children: [_jsx("h3", { children: "Manual Health Check" }), _jsx("button", { onClick: runHealthCheck, disabled: loading, style: {
padding: "8px 16px",
background: loading ? "#ccc" : "#0070f3",
color: "white",
border: "none",
borderRadius: "4px",
cursor: loading ? "not-allowed" : "pointer",
fontWeight: "bold",
}, children: loading ? "Checking..." : "Run Health Check" }), lastCheck && (_jsx("div", { style: { marginTop: "15px" }, children: _jsxs("div", { style: {
padding: "10px",
borderRadius: "4px",
background: lastCheck.status === "ok" ? "#e6f7ee" : "#ffeded",
border: `1px solid ${lastCheck.status === "ok" ? "#0c9" : "#f44"}`,
}, children: [_jsxs("h4", { style: {
margin: "0 0 10px 0",
color: lastCheck.status === "ok" ? "#0c9" : "#f44",
}, children: ["Status: ", lastCheck.status] }), _jsxs("p", { children: ["Timestamp verification:", " ", lastCheck.verificationPassed ? "Passed ✅" : "Failed ⚠️"] }), lastCheck.error && (_jsxs("p", { style: { color: "#f44" }, children: ["Error: ", lastCheck.error] })), _jsxs("details", { style: { marginTop: "10px" }, children: [_jsx("summary", { children: "Raw Result" }), _jsx("pre", { style: {
background: "#f5f5f5",
padding: "10px",
borderRadius: "4px",
fontSize: "12px",
overflow: "auto",
}, children: JSON.stringify({
timestamp: lastCheck.timestamp,
result: lastCheck.rawResult,
verificationPassed: lastCheck.verificationPassed,
}, null, 2) })] })] }) }))] }));
};