Skip to main content

​
Vue d’ensemble

Le monitoring de Kit’Asso couvre 4 niveaux :

Analytics

Umami (privacy-first)

Frontend

Hostinger logs + Console

Backend

Nhost Dashboard + Hasura Logs

Application

Custom logging + Error tracking

​
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 : 
<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.
Umami ne nécessite pas de bannière de cookies car il ne stocke aucune donnée personnelle et ne dépose aucun cookie.

​
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 : 
# 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 → Votre projet Métriques disponibles :

Database Health

  • CPU Usage
  • Memory Usage
  • Disk Usage
  • Connections actives

API GraphQL

  • Requêtes par seconde
  • Temps de réponse moyen
  • Taux d’erreurs
  • Top queries (par durée)

​
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 : 
-- 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 
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

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 });
Convention projet : Ne jamais utiliser console.log en production. Toujours utiliser logger de src/utils/logger.ts.

​
Error Tracking (Future)

​
Sentry Integration

Installation : 
npm install @sentry/react @sentry/vite-plugin
Configuration : 
// 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

// 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 : 
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

Nhost Dashboard

Monitoring backend

Hasura Console

Monitoring GraphQL

Web Vitals

Core Web Vitals Guide

Sentry Docs

Error Tracking