This commit is contained in:
Jeff Emmett 2025-06-21 19:15:17 +02:00
parent 2d0250c178
commit 091067f922
2 changed files with 88 additions and 0 deletions

34
pages/api/health.js Normal file
View File

@ -0,0 +1,34 @@
import { db } from '../../lib/supabase'
export default async function handler(req, res) {
try {
// Test database connection
const users = await db.getUsers()
res.status(200).json({
status: 'healthy',
database: 'connected',
usersCount: Object.keys(users).length,
timestamp: new Date().toISOString(),
environment: {
hasSupabaseUrl: !!process.env.NEXT_PUBLIC_SUPABASE_URL,
hasSupabaseKey: !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
hasPusherKey: !!process.env.NEXT_PUBLIC_PUSHER_APP_KEY,
hasPusherCluster: !!process.env.NEXT_PUBLIC_PUSHER_CLUSTER
}
})
} catch (error) {
console.error('Health check error:', error)
res.status(500).json({
status: 'unhealthy',
error: error.message,
timestamp: new Date().toISOString(),
environment: {
hasSupabaseUrl: !!process.env.NEXT_PUBLIC_SUPABASE_URL,
hasSupabaseKey: !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
hasPusherKey: !!process.env.NEXT_PUBLIC_PUSHER_APP_KEY,
hasPusherCluster: !!process.env.NEXT_PUBLIC_PUSHER_CLUSTER
}
})
}
}

View File

@ -1,5 +1,6 @@
import Head from 'next/head'
import dynamic from 'next/dynamic'
import { useState, useEffect } from 'react'
// Dynamically import the chess app to avoid SSR issues with Pusher
const ChessApp = dynamic(() => import('../components/ChessApp'), {
@ -16,6 +17,59 @@ const ChessApp = dynamic(() => import('../components/ChessApp'), {
})
export default function Home() {
const [healthStatus, setHealthStatus] = useState(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
// Check API health on mount
fetch('/api/health')
.then(res => res.json())
.then(data => {
setHealthStatus(data)
setLoading(false)
})
.catch(error => {
console.error('Health check failed:', error)
setHealthStatus({ status: 'error', error: error.message })
setLoading(false)
})
}, [])
if (loading) {
return (
<div className="min-h-screen bg-gradient-to-b from-green-900 to-gray-900 text-green-100 flex items-center justify-center">
<div className="text-center">
<div className="text-6xl mb-4">🍄</div>
<div>Checking system health...</div>
</div>
</div>
)
}
if (healthStatus?.status === 'unhealthy') {
return (
<div className="min-h-screen bg-gradient-to-b from-red-900 to-gray-900 text-red-100 flex items-center justify-center">
<div className="text-center max-w-md mx-auto p-6">
<div className="text-6xl mb-4"></div>
<h1 className="text-2xl font-bold mb-4">System Error</h1>
<div className="bg-red-800 p-4 rounded mb-4 text-left">
<p className="text-sm mb-2"><strong>Error:</strong> {healthStatus.error}</p>
<p className="text-sm mb-2"><strong>Environment Check:</strong></p>
<ul className="text-xs space-y-1">
<li>Supabase URL: {healthStatus.environment?.hasSupabaseUrl ? '✅' : '❌'}</li>
<li>Supabase Key: {healthStatus.environment?.hasSupabaseKey ? '✅' : '❌'}</li>
<li>Pusher Key: {healthStatus.environment?.hasPusherKey ? '✅' : '❌'}</li>
<li>Pusher Cluster: {healthStatus.environment?.hasPusherCluster ? '✅' : '❌'}</li>
</ul>
</div>
<p className="text-sm text-gray-300">
Please check your environment variables and database setup.
</p>
</div>
</div>
)
}
return (
<>
<Head>