🔧 PostHog Dashboard Fix - Setup Guide¶

✅ IMPLEMENTADO¶

Foram implementadas as seguintes correções no código:

1. Parsing correto da API PostHog (`src/lib/integrations/posthog-client.ts`)¶

✅ Método getUsers() agora processa resposta da API e calcula DAU/WAU/MAU
✅ Método getEvents() agora busca eventos específicos (code_analyzed, exports, etc.)
✅ Logging detalhado para debug

2. Logging de debug (`src/app/api/metrics/route.ts`)¶

✅ Console logs para cada métrica (Together.ai, Vercel, PostHog)
✅ Identificação clara de erros por serviço

⚠️ AÇÃO NECESSÁRIA: Configurar Variáveis de Ambiente¶

Passo 1: Obter Personal API Key do PostHog¶

Abrir PostHog: https://eu.i.posthog.com/
Clicar no avatar (canto superior direito) → Settings
Menu lateral: Personal API Keys
Clicar em Create Personal API Key
Nome: "CodeSlick Dashboard"
Copiar a key (começa com phx_)

Passo 2: Obter Project ID do PostHog¶

No PostHog, clicar no projeto atual (canto superior esquerdo)
Settings → Project Settings
Copiar o Project ID (número, ex: 12345)

Passo 3: Adicionar ao `.env.local`¶

Adicionar estas linhas ao ficheiro .env.local:

# PostHog Dashboard Integration
POSTHOG_PERSONAL_API_KEY=phx_xxxxxxxxxxxxxxxxxxxxxxx
POSTHOG_PROJECT_ID=12345

IMPORTANTE: - A POSTHOG_PERSONAL_API_KEY é DIFERENTE da NEXT_PUBLIC_POSTHOG_KEY - A Personal API Key é para acesso server-side à API do PostHog - A Public Key (já configurada) é para tracking client-side

🧪 TESTAR¶

Passo 4: Reiniciar Servidor¶

# Parar servidor atual (Ctrl+C)
# Reiniciar
npm run dev

Passo 5: Abrir Dashboard¶

Aceder a: http://localhost:3001/dashboard
Clicar no botão Refresh
Abrir DevTools (F12) → Console

Passo 6: Verificar Logs¶

Deverás ver no console do servidor:

🔍 Fetching dashboard metrics...
PostHog Users API response: { ... }
PostHog parsed users: { dau: X, wau: Y, mau: Z }
PostHog event Code Analyzed (code_analyzed): X
PostHog event PDF Export (export_pdf): Y
...
PostHog parsed events: { total: X, code_analyzed: Y, ... }
✅ PostHog metrics: { users: {...}, events: {...} }
📊 Final dashboard metrics: { ... }

Verificar no Browser¶

No Network tab (DevTools → Network): 1. Procurar request para /api/metrics 2. Ver resposta JSON:

{
  "posthog": {
    "users": {
      "dau": 5,
      "mau": 23,
      "wau": 12
    },
    "events": {
      "total": 50,
      "code_analyzed": 30,
      "exports": 15,
      "api_key_used": 5
    }
  }
}

🚨 TROUBLESHOOTING¶

Problema: Dashboard continua a mostrar zeros¶

Solução 1: Verificar variáveis

# No terminal, verificar se estão definidas:
echo $POSTHOG_PERSONAL_API_KEY
echo $POSTHOG_PROJECT_ID

Solução 2: Verificar logs de erro

# Procurar no console do servidor:
❌ PostHog metrics failed: ...

Erros comuns: - PostHog API error: 401 → API Key inválida - PostHog API error: 404 → Project ID errado - PostHog API key or project ID not configured → Variáveis não definidas

Problema: API retorna dados mas formato é diferente¶

Verificar estrutura da resposta no console:

PostHog Users API response: { result: [...], ... }

Se estrutura for diferente, ajustar parsing em posthog-client.ts linhas 71-79

📋 CHECKLIST FINAL¶

Personal API Key copiada do PostHog
Project ID copiado do PostHog
Variáveis adicionadas ao .env.local
Servidor reiniciado
Dashboard aberto e refrescado
Console do servidor mostra logs de parsing
Números aparecem no Dashboard UI
Network tab mostra JSON com dados corretos

📝 NOTAS¶

Os eventos customizados (code_analyzed, etc.) só aparecem se tiverem sido tracked
Se acabaste de instalar PostHog, pode não haver dados históricos
DAU/WAU/MAU são calculados com base em $pageview events
A Personal API Key tem acesso total ao projeto - guardar com segurança