Health Check - Proteção contra API Offline
Health Check - Proteção contra API Offline
📋 Visão Geral
Sistema de health check implementado para evitar que o frontend carregue com erros quando a API estiver offline ou em deploy.
🎯 Como Funciona
1. Endpoint de Health na API
- Rota:
GET /api/health - Resposta:
{ "status": "ok", "timestamp": "..." } - Sem autenticação (rota pública)
- Muito rápido (não acessa banco de dados)
2. Plugin de Health Check (Frontend)
Cada frontend (Producer e Supplier) possui um plugin Nuxt que:
- Executa ANTES de carregar a aplicação (
enforce: 'pre') - Tenta conectar na API com timeout de 2 segundos
- Se API estiver OK: Carrega normalmente
- Se API estiver offline: Redireciona para
/maintenance.html
3. Página de Manutenção
- Localização:
apps/producer/public/maintenance.htmleapps/supplier/public/maintenance.html - Auto-reload: Tenta reconectar na API a cada 5 segundos
- Quando API volta: Redireciona automaticamente para a página principal
⚡ Performance
Otimizado para Docker (mesma rede)
- Timeout: 2 segundos (muito curto!)
- URL interna:
http://agrsis_api:8000(comunicação entre containers) - Sem latência de rede externa
Impacto no Carregamento
- API OK: Adiciona ~200-500ms no carregamento inicial
- API offline: Redireciona imediatamente para manutenção (sem erros)
🔧 Arquivos Envolvidos
Backend (API)
apps/api/routes/api.php
├── Linha 32-37: Rota GET /api/health
Frontend Producer
apps/producer/
├── plugins/health-check.client.ts # Plugin de verificação
└── public/maintenance.html # Página de manutenção
Frontend Supplier
apps/supplier/
├── plugins/health-check.client.ts # Plugin de verificação
└── public/maintenance.html # Página de manutenção
🧪 Como Testar
1. Testar API Online (funcionamento normal)
# API deve estar rodando
docker --context orbstack ps | grep agrsis_api
# Acessar frontend normalmente
# - Producer: http://localhost:3003
# - Supplier: http://localhost:3004
# Console do browser deve mostrar:
# 🔍 Health Check: Verificando disponibilidade da API...
# ✅ Health Check: API disponível { status: 'ok', timestamp: '...' }
2. Testar API Offline (página de manutenção)
# Parar container da API
docker --context orbstack stop agrsis_api
# Acessar frontend
# - Producer: http://localhost:3003
# - Supplier: http://localhost:3004
# Deve redirecionar automaticamente para /maintenance.html
# Console do browser deve mostrar:
# 🔍 Health Check: Verificando disponibilidade da API...
# ❌ Health Check: API indisponível ou em manutenção
# Religar API
docker --context orbstack start agrsis_api
# Página de manutenção reconecta automaticamente após ~5 segundos
3. Testar Endpoint Health Diretamente
# Teste manual do endpoint
curl http://localhost:8000/api/health
# Resposta esperada:
# {"status":"ok","timestamp":"2026-01-28T00:42:42.363781Z"}
🚀 Deploy em Produção
VPS - Nginx Proxy Manager
Na VPS, o Nginx Proxy Manager já está configurado para servir página de manutenção quando containers estão down:
# Configuração NPM (já existe)
error_page 502 503 504 /maintenance.html;
location = /maintenance.html {
root /opt/agrsis/maintenance;
internal;
}
Fluxo em Produção
- Deploy inicia → API vai down temporariamente
- NPM detecta → Serve
/opt/agrsis/maintenance/index.html - Usuário vê página de manutenção → Sem erros!
- Deploy termina → API volta
- Página de manutenção reconecta → Redireciona automaticamente
🐛 Troubleshooting
Plugin não está executando
Sintoma: Frontend carrega mesmo com API offline
Solução:
# Verificar se arquivo existe
ls apps/producer/plugins/health-check.client.ts
ls apps/supplier/plugins/health-check.client.ts
# Limpar cache do Nuxt
rm -rf apps/producer/.nuxt
rm -rf apps/supplier/.nuxt
# Reiniciar dev server
docker compose restart agrsis_producer
docker compose restart agrsis_supplier
Redireciona mas página de manutenção não carrega
Sintoma: Redireciona para /maintenance.html mas mostra 404
Solução:
# Verificar se arquivo existe em public/
ls apps/producer/public/maintenance.html
ls apps/supplier/public/maintenance.html
# Se não existir, criar novamente (ver seção "Arquivos")
Timeout muito lento
Sintoma: Demora muito para detectar que API está offline
Solução: Ajustar timeout no plugin (linha 22):
// Reduzir de 2000ms para 1000ms se necessário
const timeoutId = setTimeout(() => controller.abort(), 1000)
Console mostra erro CORS
Sintoma: CORS error ao fazer fetch do health check
Solução: Health check usa fetch nativo, sem passar pelo axios configurado. Verificar se API permite CORS:
# No container da API
docker --context orbstack exec agrsis_api cat config/cors.php | grep paths
📊 Logs de Debug
Console do Browser (Desenvolvimento)
// API OK
🔍 Health Check: Verificando disponibilidade da API...
✅ Health Check: API disponível {status: "ok", timestamp: "2026-01-28T00:42:42.363781Z"}
// API Offline
🔍 Health Check: Verificando disponibilidade da API...
❌ Health Check: API indisponível ou em manutenção Error: Failed to fetch
Logs da API (se quiser adicionar)
# Ver logs da API em tempo real
docker --context orbstack logs agrsis_api -f | grep health
✅ Checklist de Implementação
- Endpoint
/api/healthcriado na API - Plugin
health-check.client.tsno Producer - Plugin
health-check.client.tsno Supplier - Página
maintenance.htmlno Producer - Página
maintenance.htmlno Supplier - Timeout otimizado (2 segundos)
- Auto-reconnect a cada 5 segundos
- Testes locais realizados
- Deploy em produção
- Testar em produção com deploy real
🔄 Próximos Passos (Opcional)
Melhorias Futuras
- Health Check Completo
- Verificar conexão com banco de dados
- Verificar Redis
- Verificar permissões de storage
- Retry com Backoff
- 1ª tentativa: 2s
- 2ª tentativa: 4s
- 3ª tentativa: 8s
- Métricas de Uptime
- Registrar downtime no banco
- Dashboard de status (status.agrsis.com)
- Notificações
- Avisar admin via WhatsApp quando API cair
- Integrar com monitoramento (UptimeRobot)
Última atualização: 2026-01-28 Versão: 1.0 Status: ✅ Implementado e testado