161 lines
3.7 KiB
Markdown
161 lines
3.7 KiB
Markdown
# 🚀 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.
|