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

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