> ## Documentation Index
> Fetch the complete documentation index at: https://docs-kit.lucdidion.lu/llms.txt
> Use this file to discover all available pages before exploring further.

# Monitoring & Logs

> Surveillance de la production et gestion des erreurs

## Vue d'ensemble

Le monitoring de Kit'Asso couvre 4 niveaux :

<CardGroup cols={4}>
  <Card title="Analytics" icon="chart-bar">
    Umami (privacy-first)
  </Card>

  <Card title="Frontend" icon="browser">
    Hostinger logs + Console
  </Card>

  <Card title="Backend" icon="database">
    Nhost Dashboard + Hasura Logs
  </Card>

  <Card title="Application" icon="bug">
    Custom logging + Error tracking
  </Card>
</CardGroup>

***

## Analytics (Umami)

Kit'Asso utilise **Umami** pour le suivi des visiteurs, une solution privacy-first et RGPD-compliant (pas de cookies, pas de données personnelles).

### Configuration

Le script Umami est injecté dans `index.html` :

```html theme={null}
<script
  defer
  src="https://cloud.umami.is/script.js"
  data-website-id="your-website-id"
></script>
```

### Métriques disponibles

* **Pages vues** : pages les plus visitées, taux de rebond
* **Visiteurs uniques** : par jour, semaine, mois
* **Référents** : d'où viennent les visiteurs
* **Géolocalisation** : pays et régions
* **Appareils** : desktop vs mobile, navigateurs
* **Événements personnalisés** : actions trackées (quiz complétés, etc.)

### Dashboard

Accédez au dashboard Umami pour consulter les statistiques en temps réel.

<Info>
  Umami ne nécessite pas de bannière de cookies car il ne stocke aucune donnée personnelle et ne dépose aucun cookie.
</Info>

***

## Monitoring Frontend (Hostinger)

### Logs d'accès

Accessibles dans **hPanel** → **Avancé** → **Logs d'accès**

**Informations :**

* Requêtes HTTP avec code de statut
* IPs des visiteurs
* User agents
* Temps de réponse

### Erreurs

**hPanel** → **Avancé** → **Logs d'erreurs**

**Erreurs courantes :**

```bash theme={null}
# 404 sur routes SPA
→ Vérifier le .htaccess (RewriteRule vers index.html)

# 500 Internal Server Error
→ Vérifier les permissions de fichiers (644 pour fichiers, 755 pour dossiers)

# Mixed Content (HTTPS)
→ Vérifier que toutes les URLs utilisent HTTPS
```

***

## Monitoring Backend (Nhost)

### Dashboard Nhost

**Accès :** [app.nhost.io](https://app.nhost.io) → Votre projet

**Métriques disponibles :**

<CardGroup cols={2}>
  <Card title="Database Health">
    * CPU Usage
    * Memory Usage
    * Disk Usage
    * Connections actives
  </Card>

  <Card title="API GraphQL">
    * Requêtes par seconde
    * Temps de réponse moyen
    * Taux d'erreurs
    * Top queries (par durée)
  </Card>
</CardGroup>

***

### Hasura Console Logs

**Accès :** Dashboard Nhost → **Hasura** → **Open Console** → Onglet **Monitoring**

**Types de logs :**

* Requêtes GraphQL (query/mutation)
* Erreurs de permissions (rôle public vs admin)
* Slow queries
* Erreurs de validation

**Filtrer les erreurs :**
Dans la console Hasura, cherchez les requêtes avec `status >= 400`.

***

### Query Performance

Dans la console Hasura → **Monitoring** → **Allow List** ou via SQL :

```sql theme={null}
-- Queries lentes (via pg_stat_statements si activé)
SELECT
  query,
  calls,
  total_exec_time,
  mean_exec_time
FROM pg_stat_statements
ORDER BY total_exec_time DESC
LIMIT 20;
```

**Optimisation :**

1. Identifiez la query lente
2. Ajoutez un index si manquant (`CREATE INDEX ...`)
3. Vérifiez l'amélioration avec `EXPLAIN ANALYZE`

***

### Storage Usage

**Dashboard Nhost** → **Storage**

**Métriques :**

* Nombre de fichiers uploadés
* Taille totale utilisée
* Bande passante consommée

***

## Logging Application

### Utility Logger

**Fichier :** `src/utils/logger.ts`

```typescript theme={null}
class Logger {
  private isDev = import.meta.env.DEV;

  info(message: string, context?: Record<string, unknown>) {
    if (this.isDev) console.log(`[INFO]`, message, context || '');
  }

  warn(message: string, context?: Record<string, unknown>) {
    if (this.isDev) console.warn(`[WARN]`, message, context || '');
  }

  error(message: string, context?: Record<string, unknown>) {
    console.error(`[ERROR]`, message, context || '');
    // En prod : envoyer à un service externe (Sentry, etc.)
    if (!this.isDev) this.sendToErrorTracking({ level: 'error', message, context });
  }

  apiCall(endpoint: string, method: string, status: number, duration: number) {
    this.info('API Call', { endpoint, method, status, duration });
  }

  private sendToErrorTracking(entry: any) {
    // Future : Sentry integration
  }
}

export const logger = new Logger();
```

### Usage dans le code

```typescript theme={null}
import { logger } from '@/utils/logger';

// Dans l'API layer
logger.apiCall('/graphql', 'POST', 200, 150);

// En cas d'erreur
logger.error('Failed to fetch tools', { error: error.message });
```

<Warning>
  **Convention projet** : Ne jamais utiliser `console.log` en production.
  Toujours utiliser `logger` de `src/utils/logger.ts`.
</Warning>

***

## Error Tracking (Future)

### Sentry Integration

**Installation :**

```bash theme={null}
npm install @sentry/react @sentry/vite-plugin
```

**Configuration :**

```typescript theme={null}
// src/main.tsx
import * as Sentry from '@sentry/react';

if (import.meta.env.PROD) {
  Sentry.init({
    dsn: import.meta.env.VITE_SENTRY_DSN,
    environment: 'production',
    tracesSampleRate: 0.1,
  });
}
```

***

## Alertes & Uptime

### UptimeRobot (gratuit)

Configuration recommandée :

1. **Monitor type :** HTTP(s)
2. **URL :** `https://kit.lucdidion.lu` (votre domaine)
3. **Interval :** 5 minutes
4. **Alert contacts :** Email

**Alertes recommandées :**

* Site down (> 30s timeout)
* Certificat SSL expiré

***

## Performance Monitoring

### Web Vitals

```typescript theme={null}
// src/utils/reportWebVitals.ts
import { onCLS, onFID, onFCP, onLCP, onTTFB } from 'web-vitals';

export function reportWebVitals() {
  onCLS(console.log);
  onLCP(console.log);
  onFCP(console.log);
}
```

**Seuils cibles :**

* **LCP** (Largest Contentful Paint) : \< 2.5s
* **FID** (First Input Delay) : \< 100ms
* **CLS** (Cumulative Layout Shift) : \< 0.1

### Bundle Size

Analysez la taille du bundle avec :

```bash theme={null}
npm run build
# Vite affiche la taille des chunks dans le terminal
```

**Cible :** \< 500KB gzipped total

***

## Checklist Monitoring

### Quotidien

* [ ] Site accessible (UptimeRobot)
* [ ] Pas d'erreurs critiques dans les logs Nhost

### Hebdomadaire

* [ ] Database Health (CPU, Memory)
* [ ] Slow queries dans Hasura Console
* [ ] Storage usage

### Mensuel

* [ ] Audit des dépendances (`npm audit`)
* [ ] Review des coûts (Nhost, Hostinger)
* [ ] Optimiser les queries lentes
* [ ] Nettoyer les fichiers Storage orphelins

***

## Ressources

<CardGroup cols={2}>
  <Card title="Nhost Dashboard" icon="database" href="https://app.nhost.io">
    Monitoring backend
  </Card>

  <Card title="Hasura Console" icon="chart-line" href="https://hasura.io/docs/latest/observability/">
    Monitoring GraphQL
  </Card>

  <Card title="Web Vitals" icon="gauge" href="https://web.dev/vitals/">
    Core Web Vitals Guide
  </Card>

  <Card title="Sentry Docs" icon="bug" href="https://docs.sentry.io/platforms/javascript/guides/react/">
    Error Tracking
  </Card>
</CardGroup>