# Debug et Logs

SmartCommon fournit un système de logs colorés pour faciliter le debug de votre application.

## Activer le mode debug

Dans la configuration du Provider :

```
const config = {
  debug: true, // Active les logs globalement
  api: {
    debug: true // Active les logs API spécifiquement
  }
};
```

En développement, utilisez la variable d'environnement :

```
const config = {
  debug: import.meta.env.DEV // true en dev, false en prod
};
```

## Utilitaire log

SmartCommon exporte un utilitaire ''log'' avec des méthodes colorées :

```
import { log } from '@cap-rel/smartcommon';

// Logs d'état
log.state('Changement d\'état:', newState);
log.globalState('État global mis à jour:', globalState);

// Logs de cycle de vie
log.effect('useEffect déclenché');
log.page('Page chargée: /dashboard');

// Logs de statut
log.success('Opération réussie');
log.error('Une erreur est survenue:', error);
log.warning('Attention:', message);
log.info('Information:', data);

// Logs API
log.apiLoading('GET', '/api/items');
log.apiSuccess('GET - 200', '/api/items');
log.apiError('GET - 404', '/api/items');

// Logs base de données
log.db('INSERT:', item);

// Logs de localisation
log.location('Navigation vers:', path);

// Log personnalisé
log.custom('MON_TAG', 'purple', 'Mon message', data);
```

## Couleurs des logs

Chaque type de log a une couleur distincte dans la console :

^ Méthode ^ Couleur ^ Usage ^
| ''log.state'' | Bleu | Changements d'état local |
| ''log.globalState'' | Cyan foncé | Changements d'état global |
| ''log.effect'' | Violet | Effets React (useEffect) |
| ''log.page'' | Orange | Chargement de pages |
| ''log.success'' | Vert | Opérations réussies |
| ''log.error'' | Rouge | Erreurs |
| ''log.warning'' | Doré | Avertissements |
| ''log.info'' | Gris | Informations |
| ''log.apiLoading'' | Gris | Requête API en cours |
| ''log.apiSuccess'' | Vert | Requête API réussie |
| ''log.apiError'' | Rouge | Requête API échouée |
| ''log.db'' | Bleu nuit | Opérations IndexedDB |
| ''log.location'' | Rose | Navigation |

## createLogger - Logger avec namespace

Pour les projets plus complexes, ''createLogger'' permet de créer un logger avec un namespace dédié. Les logs peuvent être filtrés par namespace via ''localStorage.LOG_FILTER''.

```
import { createLogger } from '@cap-rel/smartcommon';

const logger = createLogger('MyModule');

logger.info('Module initialisé');
logger.success('Données chargées');
logger.error('Échec du chargement');
logger.warning('Données périmées');
logger.state('Changement local:', newState);
logger.globalState('Changement global:', data);
logger.effect('useEffect déclenché');
logger.page('/dashboard');
logger.db('INSERT', item);

// API (premier paramètre = label dynamique)
logger.apiLoading('GET /items');
logger.apiSuccess('GET /items', data);
logger.apiError('GET /items', error);

// Personnalisé
logger.custom('PERF', 'orange', 'Rendu en 12ms');

// Groupes
logger.group('Initialisation');
logger.info('Étape 1');
logger.info('Étape 2');
logger.groupEnd();
```

### Filtrer par namespace

Dans la console du navigateur :

```
localStorage.LOG_FILTER = 'MyModule,Auth';  // Affiche uniquement ces namespaces
localStorage.LOG_LEVEL = 'warn';            // debug | info | warn | error
```

## DebugConsole - Console intégrée

Le composant ''DebugConsole'' affiche les logs SmartCommon directement dans l'application. Il est automatiquement inclus par le ''Provider'' en mode développement.

### Props

^ Prop ^ Type ^ Défaut ^ Description ^
| ''defaultOpen'' | boolean | false | Console ouverte au démarrage |
| ''position'' | string | "bottom" | Position : "bottom", "top", "left", "right" |
| ''height'' | string/number | "40vh" | Hauteur de la console |
| ''maxLogs'' | number | 500 | Nombre maximum de logs conservés |
| ''showFab'' | boolean | true | Afficher le bouton flottant ">_" |

### Utilisation manuelle

```
import { DebugConsole } from '@cap-rel/smartcommon';

// Inclus automatiquement par Provider en mode DEV
// Pour un usage manuel :
<DebugConsole defaultOpen={true} position="bottom" maxLogs={200} />
```

La console peut être détachée dans une fenêtre séparée via le bouton de détachement. Les logs sont partagés entre les fenêtres via ''BroadcastChannel''.

## Logs automatiques

Quand ''debug: true'' est activé, SmartCommon log automatiquement :

### useStates

```
const st = useStates({
  initialStates: { count: 0 },
  debug: true // Active les logs pour ce hook
});

st.set('count', 1);
// Console: [STATE] SET count => 1
```

### useGlobalStates

```
const gst = useGlobalStates();
gst.local.set('user', userData);
// Console: [GLOBAL STATE] SET user => {...}
```

### useDb

```
const db = useDb({
  name: 'myApp',
  stores: { items: 'id++' },
  debug: true
});

await db.items.add({ name: 'Item' });
// Console: [DB] CREATE key = 1, item = {...}
```

### useApi

```
// Avec api.debug: true dans la config

api.private.get('items');
// Console: [GET - LOADING] https://api.example.com/items
// Console: [GET - 200] https://api.example.com/items
```

## Debug conditionnel

Activez le debug uniquement pour certains hooks :

```
// Debug global désactivé
const config = { debug: false };

// Mais debug activé pour un hook spécifique
const st = useStates({
  initialStates: { ... },
  debug: true // Override la config globale
});
```

## Console du navigateur

Les logs SmartCommon utilisent des styles CSS dans la console. Pour les voir correctement :

1. Ouvrez les DevTools (F12)
2. Allez dans l'onglet "Console"
3. Assurez-vous que le filtre "Verbose" est activé

### Filtrer les logs

Dans la console, utilisez le filtre pour afficher uniquement certains types :

  * Tapez ''STATE'' pour voir les logs d'état
  * Tapez ''API'' pour voir les logs API
  * Tapez ''DB'' pour voir les logs base de données

## Bonnes pratiques

### Désactiver en production

```
const config = {
  debug: import.meta.env.DEV,
  api: {
    debug: import.meta.env.DEV
  }
};
```

### Logs personnalisés dans vos composants

```
import { log } from '@cap-rel/smartcommon';
import { useLibConfig } from '@cap-rel/smartcommon';

const MyComponent = () => {
  const { debug } = useLibConfig();

  const handleClick = () => {
    if (debug) {
      log.custom('MY_COMPONENT', 'teal', 'Button clicked');
    }
    // ...
  };
};
```

### Ne pas logger de données sensibles

```
// Mauvais
log.info('User logged in:', { password: user.password });

// Bon
log.info('User logged in:', { id: user.id, email: user.email });
```

## Voir aussi

  * [[configuration|Configuration]] - Configuration du Provider
  * [[hooks|Hooks]] - Documentation des hooks