From c9ff430b0944a2dfea61ccdd14eb7642ae8cb847 Mon Sep 17 00:00:00 2001 From: NicolasCantu Date: Thu, 30 Oct 2025 00:14:39 +0100 Subject: [PATCH] Standardize logging system and fix error display MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Motivations :** - Inconsistent use of console.* methods across codebase - Missing structured logging with proper levels and context - Inline error display breaking UI layout - Risk of sensitive data exposure in logs **Modifications :** - Replace all console.* calls with secureLogger.* in main files - Add proper log levels: DEBUG, INFO, WARN, ERROR - Add component context for better debugging - Create styled error/warning/success containers - Add comprehensive logging guidelines documentation - Fix import paths for secureLogger in security-setup.ts **Pages affectées :** - src/services/service.ts - Main service logging - src/pages/home/home.ts - Home page logging - src/pages/security-setup/security-setup.ts - Security setup logging - src/utils/sp-address.utils.ts - SP address utilities logging - src/router.ts - Router logging - src/websockets.ts - WebSocket logging - src/4nk.css - Error container styles - docs/LOGGING_GUIDELINES.md - Logging best practices --- .cursor/rules/all.mdc | 2 +- .cursor/rules/webiste.mdc | 6 + CLAUDE.md | 2 +- docs/INITIALIZATION_FLOW.md | 8 +- docs/LOGGING_GUIDELINES.md | 256 +++++++ docs/PAIRING_SYSTEM_ANALYSIS.md | 2 +- fix-logs.js | 148 ++++ src/4nk.css | 96 +++ src/pages/birthday-setup/birthday-setup.html | 2 +- src/pages/birthday-setup/birthday-setup.ts | 39 +- src/pages/block-sync/block-sync.html | 2 +- src/pages/block-sync/block-sync.ts | 33 +- src/pages/home/home.ts | 332 +++++---- src/pages/pairing/pairing.ts | 88 ++- src/pages/security-setup/security-setup.html | 2 +- src/pages/security-setup/security-setup.ts | 19 +- src/pages/wallet-setup/wallet-setup.html | 2 +- src/pages/wallet-setup/wallet-setup.ts | 103 +-- src/router.ts | 245 +++---- src/services/secure-credentials.service.ts | 4 +- src/services/service.ts | 709 ++++++++++--------- src/utils/log-analyzer.ts | 200 ++++++ src/utils/log-fixer.ts | 121 ++++ src/utils/sp-address.utils.ts | 177 ++--- src/websockets.ts | 16 +- 25 files changed, 1799 insertions(+), 815 deletions(-) create mode 100644 .cursor/rules/webiste.mdc create mode 100644 docs/LOGGING_GUIDELINES.md create mode 100644 fix-logs.js create mode 100644 src/utils/log-analyzer.ts create mode 100644 src/utils/log-fixer.ts diff --git a/.cursor/rules/all.mdc b/.cursor/rules/all.mdc index 3da2764..36456e5 100644 --- a/.cursor/rules/all.mdc +++ b/.cursor/rules/all.mdc @@ -3,7 +3,7 @@ description: Règles pour tous aussi pour l'IA et pour Cursor alwaysApply: true --- -# Lecoffre +# IHM_CLIENT voir les fichiers README.md diff --git a/.cursor/rules/webiste.mdc b/.cursor/rules/webiste.mdc new file mode 100644 index 0000000..851a2f5 --- /dev/null +++ b/.cursor/rules/webiste.mdc @@ -0,0 +1,6 @@ +--- +alwaysApply: true +--- + +le site tourne sur le port 3004 +l'url du site est https://dev3.4nkweb.com diff --git a/CLAUDE.md b/CLAUDE.md index c4f96bb..e7ac4de 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,4 +1,4 @@ -# Lecoffre +# IHM_CLIENT voir les fichiers README.md diff --git a/docs/INITIALIZATION_FLOW.md b/docs/INITIALIZATION_FLOW.md index 64fe823..52b0814 100644 --- a/docs/INITIALIZATION_FLOW.md +++ b/docs/INITIALIZATION_FLOW.md @@ -1,8 +1,8 @@ -# Documentation de l'Initialisation LeCoffre.io +# Documentation de l'Initialisation IHM_CLIENT ## Vue d'ensemble -Le système LeCoffre.io suit un processus d'initialisation en plusieurs étapes pour créer et sécuriser un wallet Bitcoin. Ce document détaille chaque étape du processus, depuis le choix du mode de sécurité jusqu'au pairing réussi et à la récupération des processus. +Le système IHM_CLIENT suit un processus d'initialisation en plusieurs étapes pour créer et sécuriser un wallet Bitcoin. Ce document détaille chaque étape du processus, depuis le choix du mode de sécurité jusqu'au pairing réussi et à la récupération des processus. ## Architecture des Stores IndexedDB @@ -386,7 +386,7 @@ window.location.href = '/src/pages/block-sync/block-sync.html'; #### But et Objectif du Pairing -Le processus de pairing dans LeCoffre.io sert à **créer une identité numérique vérifiable** qui permet : +Le processus de pairing dans IHM_CLIENT sert à **créer une identité numérique vérifiable** qui permet : 1. **MFA (Multi-Factor Authentication) entre appareils** : Le quorum du processus permet de valider les actions critiques nécessitant plusieurs appareils appairés 2. **Gestion autonome de la liste d'appareils** : L'utilisateur contrôle lui-même sa liste d'appareils autorisés, sans dépendre d'un tiers @@ -643,4 +643,4 @@ Tous les logs de succès sont maintenant émis uniquement après vérification r 9. **Synchronisation IndexedDB** : Utilisation directe d'IndexedDB pour éviter les problèmes de synchronisation avec le service worker 10. **Retry automatique** : Retry automatique jusqu'à 5 tentatives avec délai de 500ms pour les vérifications de wallet en base -Cette documentation couvre l'ensemble du processus d'initialisation du système LeCoffre.io, depuis la configuration de sécurité jusqu'au pairing réussi et à la récupération des processus. +Cette documentation couvre l'ensemble du processus d'initialisation du système IHM_CLIENT, depuis la configuration de sécurité jusqu'au pairing réussi et à la récupération des processus. diff --git a/docs/LOGGING_GUIDELINES.md b/docs/LOGGING_GUIDELINES.md new file mode 100644 index 0000000..8f165c8 --- /dev/null +++ b/docs/LOGGING_GUIDELINES.md @@ -0,0 +1,256 @@ +# Guide des bonnes pratiques de logging + +## Vue d'ensemble + +Ce document décrit les bonnes pratiques pour l'utilisation des logs dans l'application 4NK. Nous utilisons un système de logging centralisé avec `secureLogger` pour assurer la cohérence et la sécurité. + +## Système de logging + +### SecureLogger + +Le `secureLogger` est le système de logging principal de l'application. Il fournit : + +- **Sanitisation automatique** des données sensibles +- **Niveaux de log structurés** (DEBUG, INFO, WARN, ERROR) +- **Contexte enrichi** avec composant et métadonnées +- **Formatage cohérent** des messages + +### Import + +```typescript +import { secureLogger } from '../services/secure-logger'; +``` + +## Niveaux de log + +### DEBUG +Utilisé pour les informations de débogage détaillées, généralement utiles uniquement lors du développement. + +```typescript +secureLogger.debug('Memory usage after cleanup: 45.2%', { component: 'Service' }); +secureLogger.debug('Checking credentials availability', { component: 'HomePage' }); +``` + +**Quand utiliser :** +- Informations de débogage +- État interne des variables +- Progression des opérations complexes +- Messages avec emoji 🔍 + +### INFO +Utilisé pour les informations générales sur le fonctionnement de l'application. + +```typescript +secureLogger.info('Home/Pairing page loaded', { component: 'HomePage' }); +secureLogger.info('Services initialized successfully', { component: 'Service' }); +``` + +**Quand utiliser :** +- Initialisation de composants +- Succès d'opérations +- Messages avec emoji ✅, 🔄, 🚀 +- Événements importants du flux utilisateur + +### WARN +Utilisé pour les avertissements qui n'empêchent pas le fonctionnement mais méritent attention. + +```typescript +secureLogger.warn('High memory detected, performing cleanup', { component: 'Service' }); +secureLogger.warn('Home page already initializing, skipping...', { component: 'HomePage' }); +``` + +**Quand utiliser :** +- Conditions non critiques mais inhabituelles +- Messages avec emoji ⚠️ +- Opérations de récupération +- Dégradations de performance + +### ERROR +Utilisé pour les erreurs qui empêchent le fonctionnement normal. + +```typescript +secureLogger.error('Failed to initialize services', error, { component: 'Service' }); +secureLogger.error('Authentication failed', error, { component: 'HomePage' }); +``` + +**Quand utiliser :** +- Erreurs critiques +- Messages avec emoji ❌ +- Échecs d'opérations importantes +- Exceptions non gérées + +## Contexte et métadonnées + +### Composant + +Toujours spécifier le composant dans le contexte : + +```typescript +secureLogger.info('Operation completed', { component: 'HomePage' }); +secureLogger.error('Database connection failed', error, { component: 'Service' }); +``` + +### Métadonnées supplémentaires + +Ajouter des métadonnées utiles pour le débogage : + +```typescript +secureLogger.debug('Wallet details', { + component: 'HomePage', + hasSpendKey: !!wallet.sp_wallet?.spend_key, + hasScanKey: !!wallet.sp_wallet?.scan_key, + birthday: wallet.sp_wallet?.birthday +}); +``` + +## Bonnes pratiques + +### 1. Utiliser secureLogger au lieu de console.* + +❌ **Mauvais :** +```typescript +console.log('User authenticated'); +console.error('Database error:', error); +``` + +✅ **Bon :** +```typescript +secureLogger.info('User authenticated', { component: 'AuthService' }); +secureLogger.error('Database error', error, { component: 'DatabaseService' }); +``` + +### 2. Messages clairs et concis + +❌ **Mauvais :** +```typescript +secureLogger.info('x', { component: 'Service' }); +secureLogger.info('Processing user request with id 12345 and data {name: "John", email: "john@example.com"}', { component: 'UserService' }); +``` + +✅ **Bon :** +```typescript +secureLogger.info('Processing user request', { + component: 'UserService', + userId: 12345, + userName: 'John' +}); +``` + +### 3. Niveaux appropriés + +❌ **Mauvais :** +```typescript +secureLogger.error('User clicked button'); // Pas une erreur +secureLogger.info('Critical system failure'); // Pas une info +``` + +✅ **Bon :** +```typescript +secureLogger.debug('User clicked button', { component: 'UI' }); +secureLogger.error('Critical system failure', error, { component: 'System' }); +``` + +### 4. Contexte enrichi + +❌ **Mauvais :** +```typescript +secureLogger.info('Operation failed'); +``` + +✅ **Bon :** +```typescript +secureLogger.error('Operation failed', error, { + component: 'PaymentService', + operation: 'processPayment', + userId: user.id, + amount: payment.amount +}); +``` + +### 5. Gestion des erreurs + +```typescript +try { + await riskyOperation(); + secureLogger.info('Operation completed successfully', { component: 'Service' }); +} catch (error) { + secureLogger.error('Operation failed', error, { + component: 'Service', + operation: 'riskyOperation' + }); + throw error; +} +``` + +## Patterns d'emojis + +### DEBUG (🔍) +- `🔍 Checking...` +- `🔍 Debug info:` +- `🔍 Memory usage:` + +### INFO (✅, 🔄, 🚀) +- `✅ Operation completed` +- `🔄 Processing...` +- `🚀 Starting...` +- `🔧 Initializing...` + +### WARN (⚠️) +- `⚠️ Warning:` +- `⚠️ Skipping...` +- `⚠️ High memory detected` + +### ERROR (❌) +- `❌ Error:` +- `❌ Failed to:` +- `❌ Critical error:` + +## Exemples par composant + +### Service +```typescript +secureLogger.info('Service initialized', { component: 'Service' }); +secureLogger.debug('Memory usage: 45.2%', { component: 'Service' }); +secureLogger.warn('High memory detected', { component: 'Service' }); +secureLogger.error('Service initialization failed', error, { component: 'Service' }); +``` + +### HomePage +```typescript +secureLogger.info('Home page loaded', { component: 'HomePage' }); +secureLogger.info('Prerequisites verified', { component: 'HomePage' }); +secureLogger.warn('Already initializing, skipping', { component: 'HomePage' }); +secureLogger.error('Page initialization failed', error, { component: 'HomePage' }); +``` + +### PairingPage +```typescript +secureLogger.info('Pairing page loaded', { component: 'PairingPage' }); +secureLogger.info('Pairing process started', { component: 'PairingPage' }); +secureLogger.warn('Pairing already in progress', { component: 'PairingPage' }); +secureLogger.error('Pairing failed', error, { component: 'PairingPage' }); +``` + +## Outils de correction + +Un script automatique est disponible pour corriger les logs existants : + +```bash +node fix-logs.cjs +``` + +Ce script : +- Remplace `console.*` par `secureLogger.*` +- Ajoute les imports nécessaires +- Détermine automatiquement les niveaux appropriés +- Ajoute le contexte de composant + +## Vérification + +Pour vérifier que tous les logs utilisent le système centralisé : + +```bash +grep -r "console\.\(log\|info\|warn\|error\|debug\)" src/ +``` + +Cette commande ne devrait retourner aucun résultat si tous les logs sont correctement migrés. diff --git a/docs/PAIRING_SYSTEM_ANALYSIS.md b/docs/PAIRING_SYSTEM_ANALYSIS.md index 773590b..1734c94 100644 --- a/docs/PAIRING_SYSTEM_ANALYSIS.md +++ b/docs/PAIRING_SYSTEM_ANALYSIS.md @@ -6,7 +6,7 @@ Ce document résume l'analyse complète du système de pairing et les correction ## But et Objectif du Pairing -Le système de pairing dans LeCoffre.io sert avant tout à **créer une identité numérique vérifiable** qui permet : +Le système de pairing dans 4NK sert avant tout à **créer une identité numérique vérifiable** qui permet : 1. **MFA (Multi-Factor Authentication) entre appareils** : Le quorum du processus de pairing permet de valider les actions critiques nécessitant plusieurs appareils appairés 2. **Gestion autonome de la liste d'appareils** : L'utilisateur contrôle lui-même sa liste d'appareils autorisés, sans dépendre d'un tiers diff --git a/fix-logs.js b/fix-logs.js new file mode 100644 index 0000000..9c20ae9 --- /dev/null +++ b/fix-logs.js @@ -0,0 +1,148 @@ +#!/usr/bin/env node + +/** + * Script pour corriger automatiquement tous les logs console.* en secureLogger + */ + +const fs = require('fs'); +const path = require('path'); + +// Fichiers à corriger +const filesToFix = [ + 'src/pages/home/home.ts', + 'src/pages/pairing/pairing.ts', + 'src/pages/wallet-setup/wallet-setup.ts', + 'src/pages/security-setup/security-setup.ts', + 'src/pages/birthday-setup/birthday-setup.ts', + 'src/pages/block-sync/block-sync.ts', + 'src/utils/sp-address.utils.ts', + 'src/router.ts', + 'src/websockets.ts' +]; + +// Fonction pour déterminer le niveau de log +function determineLogLevel(message) { + const lowerMessage = message.toLowerCase(); + + if (lowerMessage.includes('error') || lowerMessage.includes('failed') || lowerMessage.includes('❌')) { + return 'error'; + } + + if (lowerMessage.includes('warn') || lowerMessage.includes('⚠️') || lowerMessage.includes('skipping')) { + return 'warn'; + } + + if (lowerMessage.includes('debug') || lowerMessage.includes('🔍') || lowerMessage.includes('checking')) { + return 'debug'; + } + + return 'info'; +} + +// Fonction pour déterminer le contexte +function determineContext(filePath, message) { + const fileName = path.basename(filePath, '.ts'); + + if (fileName.includes('service')) return 'Service'; + if (fileName.includes('home')) return 'HomePage'; + if (fileName.includes('pairing')) return 'PairingPage'; + if (fileName.includes('wallet')) return 'WalletSetup'; + if (fileName.includes('security')) return 'SecuritySetup'; + if (fileName.includes('birthday')) return 'BirthdaySetup'; + if (fileName.includes('block-sync')) return 'BlockSync'; + if (fileName.includes('router')) return 'Router'; + if (fileName.includes('websocket')) return 'WebSocket'; + if (fileName.includes('sp-address')) return 'SPAddressUtils'; + + return 'Application'; +} + +// Fonction pour corriger un fichier +function fixFile(filePath) { + if (!fs.existsSync(filePath)) { + console.log(`⚠️ Fichier non trouvé: ${filePath}`); + return; + } + + let content = fs.readFileSync(filePath, 'utf8'); + let modified = false; + + // Ajouter l'import secureLogger si pas déjà présent + if (!content.includes('import { secureLogger }')) { + const importMatch = content.match(/import.*from.*['"][^'"]+['"];?\s*\n/); + if (importMatch) { + const importIndex = content.lastIndexOf(importMatch[0]) + importMatch[0].length; + content = content.slice(0, importIndex) + + `import { secureLogger } from '../services/secure-logger';\n` + + content.slice(importIndex); + modified = true; + } + } + + // Remplacer console.log par secureLogger + content = content.replace( + /console\.log\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g, + (match, message) => { + const level = determineLogLevel(message); + const context = determineContext(filePath, message); + modified = true; + return `secureLogger.${level}('${message}', { component: '${context}' })`; + } + ); + + // Remplacer console.warn par secureLogger.warn + content = content.replace( + /console\.warn\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g, + (match, message) => { + const context = determineContext(filePath, message); + modified = true; + return `secureLogger.warn('${message}', { component: '${context}' })`; + } + ); + + // Remplacer console.error par secureLogger.error + content = content.replace( + /console\.error\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g, + (match, message) => { + const context = determineContext(filePath, message); + modified = true; + return `secureLogger.error('${message}', { component: '${context}' })`; + } + ); + + // Remplacer console.info par secureLogger.info + content = content.replace( + /console\.info\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g, + (match, message) => { + const context = determineContext(filePath, message); + modified = true; + return `secureLogger.info('${message}', { component: '${context}' })`; + } + ); + + // Remplacer console.debug par secureLogger.debug + content = content.replace( + /console\.debug\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g, + (match, message) => { + const context = determineContext(filePath, message); + modified = true; + return `secureLogger.debug('${message}', { component: '${context}' })`; + } + ); + + if (modified) { + fs.writeFileSync(filePath, content); + console.log(`✅ Corrigé: ${filePath}`); + } else { + console.log(`⏭️ Aucune modification: ${filePath}`); + } +} + +// Exécuter les corrections +console.log('🔧 Correction des logs console.* en secureLogger...\n'); + +filesToFix.forEach(file => { + fixFile(file); +}); + +console.log('\n✅ Correction terminée !'); diff --git a/src/4nk.css b/src/4nk.css index be56350..fb2e16e 100644 --- a/src/4nk.css +++ b/src/4nk.css @@ -1290,3 +1290,99 @@ select[data-multi-select-plugin] { font-size: 14px; } } + +/* Error, Warning, Success and Loading Container Styles */ +.error-container, .warning-container, .success-container, .loading-container { + display: flex; + align-items: flex-start; + gap: 12px; + padding: 16px; + margin: 16px 0; + border-radius: 8px; + border-left: 4px solid; + background: rgba(255, 255, 255, 0.95); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(10px); +} + +.error-container { + border-left-color: var(--error-color); + background: rgba(244, 67, 54, 0.05); +} + +.warning-container { + border-left-color: var(--warning-color); + background: rgba(255, 152, 0, 0.05); +} + +.success-container { + border-left-color: var(--success-color); + background: rgba(76, 175, 80, 0.05); +} + +.loading-container { + border-left-color: var(--info-color); + background: rgba(33, 150, 243, 0.05); + align-items: center; +} + +.error-icon, .warning-icon, .success-icon { + font-size: 20px; + flex-shrink: 0; + margin-top: 2px; +} + +.error-content, .warning-content, .success-content { + flex: 1; + min-width: 0; +} + +.error-title, .warning-title, .success-title { + font-weight: 600; + font-size: 16px; + margin: 0 0 4px 0; + color: var(--error-color); +} + +.warning-title { + color: var(--warning-color); +} + +.success-title { + color: var(--success-color); +} + +.error-message, .warning-message, .success-message { + font-size: 14px; + line-height: 1.4; + margin: 0; + color: #333; + word-wrap: break-word; + overflow-wrap: break-word; +} + +.loading-message { + font-size: 14px; + color: #333; + margin-left: 8px; +} + +/* Responsive adjustments for status containers */ +@media (max-width: 768px) { + .error-container, .warning-container, .success-container, .loading-container { + padding: 12px; + margin: 12px 0; + } + + .error-icon, .warning-icon, .success-icon { + font-size: 18px; + } + + .error-title, .warning-title, .success-title { + font-size: 14px; + } + + .error-message, .warning-message, .success-message, .loading-message { + font-size: 13px; + } +} diff --git a/src/pages/birthday-setup/birthday-setup.html b/src/pages/birthday-setup/birthday-setup.html index d3ca84b..4d91149 100644 --- a/src/pages/birthday-setup/birthday-setup.html +++ b/src/pages/birthday-setup/birthday-setup.html @@ -3,7 +3,7 @@ - Configuration de la Date Anniversaire - LeCoffre + Configuration de la Date Anniversaire - 4NK