Spaces:
Build error
Build error
File size: 2,826 Bytes
caae15f d9b91ed caae15f f730525 caae15f f730525 caae15f f730525 caae15f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
"use client";
import useSWR from 'swr';
import { Button } from "@nextui-org/react";
import { IconSpinner } from '@/app/components/ui/icons';
// Define the API endpoint
const healthcheck_api = process.env.NEXT_PUBLIC_HEALTHCHECK_API;
const StatusPage = () => {
// Use SWR hook to fetch data with caching and revalidation
const { data, error, isValidating, mutate } = useSWR(healthcheck_api, async (url) => {
try {
// Fetch the data
const response = await fetch(url, {
signal: AbortSignal.timeout(5000), // Abort the request if it takes longer than 5 seconds
});
if (!response.ok) {
throw new Error(response.statusText || 'Unknown Error');
}
const data = await response.json();
return data;
} catch (error: any) {
console.error('Error fetching Backend API Status');
throw error;
}
}, {
revalidateOnFocus: true, // Revalidate when the window gains focus
revalidateIfStale: true, // Revalidate if the data is stale
refreshInterval: 60000, // Revalidate every 60 seconds
});
if (error) {
if (error.name === 'AbortError') {
console.error('[status] Error fetching Backend API Status: Request timed out');
}
else {
console.error('[status] Error fetching Backend API Status:', error.message);
}
}
const apiStatus = error ? '❌' : '✅';
const apiResponse = error ? '❌' : JSON.stringify(data, null, 2);
const checkApiStatus = async () => {
try {
// Invalidate the cache and trigger a revalidation
mutate();
} catch (error: any) {
console.error('Error fetching Backend API Status:', error.message);
}
};
return (
<div className="rounded-xl shadow-xl p-4 max-w-5xl w-full bg-white dark:bg-zinc-700/30">
<div className="max-w-2xl space-y-2 p-4">
<h1 className="text-xl font-bold">Backend API Status</h1>
<p>
<span className="font-bold">Status: </span>
<span>{isValidating ? (
<IconSpinner className="inline ml-2 animate-spin" />
) : apiStatus}</span>
</p>
<p><span className="font-bold">Response Data: </span>{isValidating ? (
<IconSpinner className="inline ml-2 animate-spin" />
) : apiResponse}</p>
<Button
onClick={checkApiStatus}
disabled={isValidating} // Disable the button when isValidating is true
className="flex text-center items-center text-l disabled:bg-orange-400 bg-blue-500 text-white px-6 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-105"
>
{isValidating ? (
<IconSpinner className="mr-2 animate-spin" />
) : null}
Refresh Status
</Button>
</div>
</div>
);
};
export default StatusPage;
|