Debug et Logs

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

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
};

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);

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

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

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

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

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

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

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

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

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
});

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é

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

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

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');
    }
    // ...
  };
};

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

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

• Configuration - Configuration du Provider
• Hooks - Documentation des hooks