Evitare log rumorosi o con dati sensibili

Questa lezione appartiene al Modulo 20 — Logging e osservabilità minima.

Obiettivo della lezione

Distinguere log utili da log rumorosi nel Registro del laboratorio, rimuovere console.log di debug lasciati per sbaglio, e non esporre dati personali degli studenti nella console del browser.

Alla fine avrai una regola chiara su cosa può essere loggato, cosa non deve esserlo, e il codice ripulito dai log problematici.

Perché serve nel percorso

Durante lo sviluppo si aggiungono console.log per capire cosa succede. Prima della presentazione — e prima della consegna — questi log diventano rumore che rende impossibile leggere la console, e in alcuni casi espongono informazioni che non dovrebbero apparire (nomi di studenti, note sui guasti, dettagli tecnici interni).

Nel Registro del laboratorio

Considera questo scenario: un docente apre la console del browser mentre usa il Registro. Cosa vede?

Scenario 1 — log rumorosi (da evitare):

// src/application/registraPrestito.js
function registraPrestito({ strumentoId, studenteId }, archivio) {
  console.log("registraPrestito chiamata");              // rumore: ovvio
  console.log("strumentoId:", strumentoId);              // dettaglio tecnico inutile
  console.log("studenteId:", studenteId);                // PROBLEMA: dati personali
  const strumento = archivio.trovaPerId(strumentoId);
  console.log("strumento trovato:", strumento);          // PROBLEMA: oggetto completo con dati
  console.log("stato:", strumento.stato);                // rumore
  // ... logica ...
  console.log("prestito salvato");                       // rumore
}

Questo log espone studenteId (nome o numero dello studente) nella console — visibile a chiunque apra gli strumenti di sviluppo del browser.

Scenario 2 — log accettabili:

// src/application/registraPrestito.js
import { logger } from "../infrastructure/logger.js";

function registraPrestito({ strumentoId, studenteId }, archivio) {
  const strumento = archivio.trovaPerId(strumentoId);
  if (!strumento) {
    logger.warn("strumento_non_trovato", { strumentoId });  // id anonimo, ok
    throw new Error("STRUMENTO_NON_TROVATO");
  }
  // ... logica ...
  logger.info("prestito_registrato", { strumentoId, prestitoId: prestito.id });
  // NON logghiamo studenteId — non serve per il debug tecnico
}

Procedura guidata

1. Apri la console del browser e usa il Registro normalmente per 2 minuti.
2. Annota tutti i messaggi che vedi: quanti sono? Quanti contengono dati personali?
3. Cerca in tutti i file JS console.log con il comando grep -r "console\.log" src/ e salva l’elenco.
4. Classifica ogni console.log trovato in: debug temporaneo / informazione utile / dato sensibile.
5. Rimuovi tutti quelli di debug temporaneo.
6. Sostituisci quelli utili con logger.info o logger.warn.
7. Rimuovi o anonimizza quelli con dati sensibili.

Attività in classe

Analizza questi log e classifica ognuno:

console.log("Form submit ricevuto");                           // ??
console.log("studente:", form.studenteId.value);               // ??
console.log("ERRORE:", error.message);                         // ??
console.log("localStorage keys:", Object.keys(localStorage));  // ??
console.log("strumento:", JSON.stringify(strumento));           // ??
console.log("array prestiti:", prestiti);                      // ??
console.log("ok");                                             // ??

Per ogni riga scrivi: rimuovi / tieni come logger.info / tieni come logger.warn / rimuovi perché espone dati.

Poi compila la scheda:

## Audit dei log nel Registro

File analizzati:

Log trovati con grep:

Log rimossi (motivo):

Log convertiti a logger:

Dati sensibili rimossi:

Verifica: console pulita dopo le modifiche?

Spiegazione guidata per studiare

I dati sensibili in un registro scolastico non sono solo password o codici fiscali. Anche questi possono essere problematici:

• il nome completo di uno studente (identificativo);
• l’elenco di tutti i prestiti di uno studente (comportamento);
• le note su un guasto che descrivono un errore dell’utente;
• i dettagli interni degli errori (stack trace) mostrati direttamente in UI.

La regola pratica è questa: logga gli ID, non i nomi. Un log tecnico ha bisogno di sapere quale strumento (ID) è stato prestato, non chi lo ha preso (nome studente). Se devi ricostruire l’evento completo, puoi usare l’ID per cercare il dato in un secondo momento.

// src/infrastructure/logger.js
export const logger = {
  info(evento, dati = {}) {
    // In produzione: sostituisci con un sistema di log reale
    // In sviluppo: console.info è accettabile
    if (import.meta.env?.DEV) {
      console.info(`[INFO] ${evento}`, dati);
    }
  },
  warn(evento, dati = {}) {
    console.warn(`[WARN] ${evento}`, dati);
  },
  error(evento, dati = {}) {
    console.error(`[ERROR] ${evento}`, dati);
  }
};

Con questo wrapper puoi disabilitare i log di info in produzione senza toccare il resto del codice.

Passo per passo nel progetto

1. Esegui grep -r "console\." src/ e salva l’output.
2. Conta: quanti console.log, quanti console.error, quanti console.warn.
3. Apri src/infrastructure/logger.js (crea il file se non esiste).
4. Sostituisci i console.log informativi con logger.info.
5. Sostituisci i console.error con logger.error.
6. Rimuovi tutti i console.log che contengono: nomi di studenti, oggetti completi di strumenti o prestiti, variabili di debug senza contesto.
7. Apri la console del browser dopo le modifiche: verifica che sia leggibile.

Esempio da leggere lentamente

// Prima — rumoroso e con dati sensibili
function chiudiPrestito({ prestitoId }, archivio) {
  console.log("chiudiPrestito", prestitoId);
  const prestito = archivio.trovaPerId(prestitoId);
  console.log("prestito:", prestito);  // espone studenteId, date, tutto
  if (!prestito) {
    console.log("prestito non trovato");
    throw new Error("PRESTITO_NON_TROVATO");
  }
  if (prestito.chiusura) {
    console.log("già chiuso");
    throw new Error("PRESTITO_GIA_CHIUSO");
  }
  const chiuso = { ...prestito, chiusura: new Date() };
  archivio.aggiorna(chiuso);
  console.log("fatto");
}

// Dopo — pulito
import { logger } from "../infrastructure/logger.js";

function chiudiPrestito({ prestitoId }, archivio) {
  const prestito = archivio.trovaPerId(prestitoId);
  if (!prestito) {
    logger.warn("chiudi_prestito_non_trovato", { prestitoId });
    throw new Error("PRESTITO_NON_TROVATO");
  }
  if (prestito.chiusura) {
    logger.warn("chiudi_prestito_gia_chiuso", { prestitoId });
    throw new Error("PRESTITO_GIA_CHIUSO");
  }
  const chiuso = { ...prestito, chiusura: new Date() };
  archivio.aggiorna(chiuso);
  logger.info("prestito_chiuso", { prestitoId });
}

Prova di comprensione

• Perché è problematico loggare studenteId nella console del browser?
• Qual è la differenza tra un log di debug e un log di osservabilità?
• Come si disabilita logger.info in produzione senza modificare il codice che lo chiama?
• Cosa dovresti loggare quando uno strumento non viene trovato?

Errori da evitare

• lasciare console.log("ok") o console.log("qui") — non hanno contesto e non spiegano nulla;
• loggare l’intero oggetto strumento o prestito — contiene dati personali e appesantisce la console;
• usare console.log direttamente nei casi d’uso invece del logger — rende impossibile disabilitare il logging;
• non rimuovere i log di debug prima della presentazione — la console rumorosa fa cattiva impressione.

Prodotto da consegnare

Il file src/infrastructure/logger.js con il wrapper, tutti i console.log di debug rimossi dai file JS, e la console del browser pulita quando si usa il Registro normalmente.

Checklist di chiusura

• grep -r "console\.log" src/ restituisce zero risultati (o solo quelli intenzionali nel logger)
• nessun log contiene nomi di studenti o oggetti completi con dati personali
• il logger ha almeno info, warn e error
• i log rimasti hanno tutti un nome evento e dati minimi
• la console del browser è leggibile dopo 5 minuti di uso normale del Registro

Risultato atteso

Ho analizzato i console.log nel Registro e rimosso quelli di debug.
Ho creato src/infrastructure/logger.js con wrapper info/warn/error.
Ho sostituito i log informativi utili con logger.info e logger.warn.
Ho rimosso i log che esponevano studenteId o oggetti completi.
La console del browser mostra ora solo eventi significativi con ID anonimizzati.