Monitoring & Logs

<script
  defer
  src="https://cloud.umami.is/script.js"
  data-website-id="your-website-id"
></script>

# 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

-- 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;

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();

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 });

npm install @sentry/react @sentry/vite-plugin

// 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,
  });
}

// 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);
}

npm run build
# Vite affiche la taille des chunks dans le terminal