Monitoring et observabilité

Guide pour surveiller votre application en production.

Métriques essentielles

Disponibilité (Uptime)

Target : 99.5% (max 3,5h downtime/mois)

Outils :

• Vercel Analytics
• Pingdom
• UptimeRobot

Performance

Response time : < 500ms
First Contentful Paint (FCP) : < 2.5s
Cumulative Layout Shift (CLS) : < 0.1

Erreurs

Error rate : < 0.1%
500 errors : < 0.01%

Vercel Analytics

Activer

1. Vercel Dashboard → Project Settings → Analytics
2. Cliquez Enable Analytics
3. Les données collectent automatiquement

Voir les données

1. Vercel Dashboard → Analytics
2. Affiche :
   • Web Vitals (FCP, LCP, CLS, TTFB)
   • Response times
   • Regions

Sauvegarder les logs

Vercel Archive les logs 24h par défaut

Pour plus long : intégrer Datadog ou LogRocket

Erreurs et logs

Voir les logs Vercel

# Terminal
vercel logs --follow
 
# Ou Dashboard → Logs

Exceptions tracking

Intégrez Sentry ou Rollbar :

npm install @sentry/nextjs

Configuration :

// sentry.client.config.ts
import * as Sentry from "@sentry/nextjs"
 
Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV,
})

En .env.production.local :

NEXT_PUBLIC_SENTRY_DSN="https://..."

Logs structurés

// logger.ts
export function logError(msg: string, err: Error) {
  console.error(JSON.stringify({
    timestamp: new Date(),
    level: 'error',
    message: msg,
    error: err.message,
    stack: err.stack,
  }))
}

Base de données

Connexions

Monitor :

SELECT * FROM pg_stat_activity;

Idéal : 10-50 connexions actives Critique : > 100 connexions

Performances

-- Requêtes lentes
SELECT query, mean_time FROM pg_stat_statements
ORDER BY mean_time DESC
LIMIT 10;

Target : < 100ms par requête

Sauvegardes

✅ Automatiques quotidiens (ou plus) ✅ Point-in-time recovery ✅ Testez les restaurations ✅ Gardez au moins 30 jours

Backup Render/Railway

Dashboard → Backups

• Manual backup
• Point-in-time restore

Stripe monitoring

Voir les paiements

Stripe Dashboard → Payments

Vérifiez :

• Paiements réussis
• Remboursements
• Disputes

Webhooks

Vérifiez les événements Stripe :

Stripe → Webhooks → [Endpoint]

• Affiche les événements envoyés
• Response status (2xx = OK)
• Retry count

Alertes

Stripe → Settings → Alerts

Configurez les alertes pour :

• Paiements échoués
• Chargements refusés
• Fraudes détectées

Health checks

Créez un endpoint de health check :

// pages/api/health.ts
export default async function handler(req, res) {
  try {
    // Ping database
    await prisma.$executeRaw`SELECT 1`
    
    return res.status(200).json({
      status: 'healthy',
      timestamp: new Date(),
    })
  } catch (err) {
    return res.status(503).json({
      status: 'unhealthy',
      error: err.message,
    })
  }
}

Pingez régulièrement :

curl https://monsite.com/api/health

Alertes

UptimeRobot

1. UptimeRobot.com → Create Monitor
2. URL : https://monsite.com/api/health
3. Interval : 5 minutes
4. Slack notification

Vercel Alerts

Vercel envoie des alertes pour :

• Deploy failures
• High error rates
• Performance degradation

Dashboard de monitoring

Crée un dashboard Grafana :

CPU usage
Memory usage
Request count
Error rate
Response time
Database connections

Monitoring production checklist

• ✅ Analytics Vercel activé
• ✅ Endpoint /api/health
• ✅ Uptime monitoring (UptimeRobot)
• ✅ Error tracking (Sentry)
• ✅ Database backups configurées
• ✅ Logs archivés
• ✅ Alertes Stripe
• ✅ Notifications Slack

Incidents

Procédure

1. Déctecter l’incident via alerts
2. Cliquer sur le lien d’alerte
3. Ouvrir les logs
4. Identifier la cause
5. Déployer un fix
6. Vérifier la résolution
7. Post-mortem (si critique)

Rollback rapide

# Vercel
vercel rollback
 
# Ou manuellement
git revert <commit>
git push

Performance tuning

Analyze bundle

npm install -D @next/bundle-analyzer
 
# next.config.mjs
const withBundleAnalyzer = require('@next/bundle-analyzer')()
 
module.exports = withBundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
})
 
# Puis
ANALYZE=true npm run build

Database optimization

• Ajouter des indexes
• Revoir les queries lentes
• Connection pooling (PgBouncer)

Caching

// pages/api/expensive.ts
export default async function handler(req, res) {
  res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate=300')
  return res.status(200).json({ ... })
}

Coûts

Vercel Analytics

• Gratuit jusqu’à 1000 events/jour
• Payant après

Sentry

• Gratuit jusqu’à 5k events/mois
• $29/mois après

UptimeRobot

• Gratuit (50 monitors)
• $9.99/mois pour plus

Prochaines étapes

→ Troubleshooting