# 🚀 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 :

```typescript
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** :
```javascript
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** :
```python
@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

```bash
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

```json
{
  "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 :

```typescript
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` :

```typescript
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](./README-logging.md) - Documentation complète
- 📋 [LOGGING_IMPLEMENTATION.md](../LOGGING_IMPLEMENTATION.md) - Résumé d'implémentation

## Support

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