Skip to main content

​
Vue d’ensemble

Le monitoring de Kit’Asso couvre 3 niveaux :

Frontend

Hostinger logs + Console

Backend

Nhost Dashboard + Hasura Logs

Application

Custom logging + Error tracking

​
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://lucdidion.fr (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