ObsiViewer/docs/LOGGING_QUICK_START.md

🚀 Logging System - Quick Start Guide

Installation

Le système de logging est déjà intégré dans ObsiViewer. Aucune installation supplémentaire n'est nécessaire.

Démarrage Rapide

1. Vérifier la Configuration

Ouvrir src/core/logging/environment.ts et vérifier :

export const environment = {
  logging: {
    enabled: true,        // ✅ Activé
    endpoint: '/api/log', // ✅ Endpoint correct
  },
};

2. Implémenter le Backend

Créer l'endpoint /api/log dans votre backend :

Node.js/Express :

app.post('/api/log', express.json(), (req, res) => {
  const logs = Array.isArray(req.body) ? req.body : [req.body];
  
  logs.forEach(log => {
    console.log(`[${log.event}]`, log.data);
  });
  
  res.json({ ok: true });
});

Python/Flask :

@app.route('/api/log', methods=['POST'])
def log():
    logs = request.json if isinstance(request.json, list) else [request.json]
    
    for log in logs:
        print(f"[{log['event']}] {log.get('data', {})}")
    
    return {'ok': True}

3. Démarrer l'Application

npm run dev

4. Tester

1. Ouvrir DevTools → Network → Filter /api/log
2. Effectuer des actions :
   • Naviguer entre les vues
   • Effectuer une recherche
   • Ouvrir les bookmarks
   • Changer le thème
3. Observer : Les requêtes POST vers /api/log

Exemple de Log Reçu

{
  "ts": "2025-10-05T14:21:33.123Z",
  "level": "info",
  "app": "ObsiViewer",
  "sessionId": "9b2c8f1f-7e2f-4d6f-9f5b-0e3e1c9f7c3a",
  "userAgent": "Mozilla/5.0...",
  "context": {
    "route": "/search?q=test",
    "vault": "Main",
    "theme": "dark",
    "version": "0.0.0"
  },
  "event": "SEARCH_EXECUTED",
  "data": {
    "query": "test",
    "queryLength": 4
  }
}

Événements Disponibles

Événement	Quand	Données
APP_START	Au démarrage	viewport dimensions
APP_STOP	Avant fermeture	timestamp
NAVIGATE	Changement de route	from, to
SEARCH_EXECUTED	Recherche effectuée	query, queryLength
BOOKMARKS_OPEN	Ouverture bookmarks	-
BOOKMARKS_MODIFY	Ajout/suppression bookmark	action, path
GRAPH_VIEW_OPEN	Ouverture graph view	-
GRAPH_VIEW_SETTINGS_CHANGE	Modification settings graph	changes
CALENDAR_SEARCH_EXECUTED	Recherche calendrier	resultsCount
THEME_CHANGE	Changement de thème	from, to

Ajouter des Logs Personnalisés

Dans n'importe quel composant :

import { inject } from '@angular/core';
import { LogService } from './core/logging/log.service';

export class MyComponent {
  private logService = inject(LogService);

  onCustomAction(): void {
    this.logService.log('CUSTOM_EVENT', {
      action: 'button_click',
      buttonId: 'submit',
    });
  }
}

Désactiver le Logging

Dans src/core/logging/environment.ts :

export const environment = {
  logging: {
    enabled: false, // ❌ Désactivé
  },
};

Troubleshooting

Logs non envoyés ?

1. ✅ Vérifier environment.logging.enabled = true
2. ✅ Vérifier que /api/log existe
3. ✅ Vérifier que l'endpoint retourne status 2xx
4. ✅ Vérifier la console pour erreurs

Circuit breaker ouvert ?

• Attendre 30 secondes
• Vérifier la disponibilité du backend
• Vérifier les logs backend pour erreurs

Documentation Complète

Pour plus de détails, voir :

• 📖 README-logging.md - Documentation complète
• 📋 LOGGING_IMPLEMENTATION.md - Résumé d'implémentation

Support

Pour toute question ou problème, consulter la documentation ou ouvrir une issue.