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