Lo schianto silenzioso

Nello sviluppo backend, la gestione degli errori è semplice. Se il tuo server Node.js si blocca, i log in “stderr” urlano “FATAL ERROR”. Il controllo dello stato (ping) ha esito negativo. Kubernetes riavvia il pod. Il cercapersone (PagerDuty) squilla il telefono. Ti rendi subito conto che qualcosa non va.

Nello sviluppo frontend, gli errori sono silenziosi. Immagina un utente sul tuo sito e-commerce. Hanno trascorso 30 minuti a navigare. Hanno articoli per un valore di € 500 nel carrello. Fanno clic su “Procedi alla cassa”. Il motore JavaScript rileva “TypeError: impossibile leggere le proprietà di undefinito (lettura ‘prezzo’)”. Che succede? Lo schermo non esplode. Il browser non si chiude. L’interfaccia utente inevitabilmente si blocca. Lo spinner dei pulsanti gira per sempre. L’utente attende 10 secondi. Fanno nuovamente clic. Niente. Sospirano, chiudono il conto e vanno su Amazon. Tu (lo sviluppatore) non hai nessuna conoscenza di ciò che è successo. I log del tuo server mostrano “200 OK” per il caricamento della pagina. Presumi che il tuo software sia perfetto. In realtà, stai perdendo migliaia di dollari all’ora.

Questo si chiama Volare alla cieca. Monitoraggio degli errori (Sentry, Datadog, LogRocket) è la soluzione. Installa un “Black Box Recorder” (SDK) nel browser di ogni utente. Quando si verifica un arresto anomalo, acquisisce lo stato, lo invia al cloud e ti avvisa.

Perché Maison Code ne parla

Noi di Maison Code crediamo che l’Osservazione sia il primo passo dell’ingegneria. Spesso ereditiamo codebase da clienti che affermano “Il nostro tasso di conversione è diminuito del 20% e non sappiamo perché”. Installiamo Sentry ed entro 10 minuti vediamo migliaia di “CheckoutError: unfined is not an object” provenienti da utenti Safari. Il bug era sempre lì. Il cliente era semplicemente sordo. Implementiamo il monitoraggio non solo per individuare i bug, ma per quantificare la qualità. Aiutiamo i CTO a passare da “Penso che il sito sia stabile” a “Abbiamo una percentuale di sessioni senza arresti anomali del 99,98%”.

Lo strumento: sentinella

Sentry è lo standard indiscusso del settore per il monitoraggio delle prestazioni delle applicazioni (APM) e il monitoraggio degli errori. Supporta tutte le lingue, ma la sua integrazione con JavaScript/TypeScript è particolarmente potente. Non si limita a catturare il messaggio di errore; cattura il Contesto.

Implementazione: integrazione di Sentry in Next.js

Configurare Sentry era difficile. Ora è automatizzato.

Il mago: Esegui npx @sentry/wizard@latest -i nextjs. Questa sceneggiatura è magica.
- Crea un progetto Sentry tramite API.
- Aggiorna next.config.js per caricare le mappe di origine.
- Crea sentry.client.config.ts (Browser), sentry.server.config.ts (Nodo) e sentry.edge.config.ts (Edge Runtime).
Utilizzo (SDK): Sentry si aggancia automaticamente agli eventi globali window.onerror e window.onunhandledrejection. Generalmente non è necessario racchiudere manualmente il codice in try/catch.
Acquisizione manuale: A volte, potresti voler rilevare un errore (in modo che l’app non si blocchi) ma segnalarlo comunque. “dattiloscritto”. importa * come Sentry da “@sentry/nextjs”;

funzione asincrona processoPagamento() { prova { attendono stripe.confirmPayment(); } cattura (errore) { // Accedi a Sentry, ma mostra un’interfaccia utente gradevole all’utente Sentry.captureException(errore); toast.error(“Pagamento fallito, riprova.”); } }

Mappe di origine: la stele di Rosetta

Il JavaScript di produzione è minimizzato e uglificato. Rimuove gli spazi bianchi, rinomina le variabili in a, b, c e si scrolla di dosso il codice morto. Questo è ottimo per le prestazioni, ma terribile per il debug.

L’orrore: “testo”. Errore: undefinito non è una funzione a (app-123.js:1:432) in b (app-123.js:1:890)

Questo non ti dice nulla.

**La soluzione**: mappe sorgente (`.js.map`).
Questi file riconducono il codice minimizzato all'origine TypeScript originale.
Quando Sentry riceve una segnalazione di arresto anomalo, cerca la mappa sorgente corrispondente.
Di fatto "rimuove la minimizzazione" dell'analisi dello stack.

**Il risultato**:
"testo".
TypeError: user.address non è definito
  su calcolaSpedizione (src/utils/shipping.ts:45:12)
  su CheckoutForm (src/components/Checkout.tsx:102:4)

Ora sai esattamente che la riga 45 di shipping.ts è il colpevole.

Il contesto è re

Sapere dove si è verificato l’arresto anomalo è il passaggio 1. Sapere per chi si è verificato l’arresto anomalo è il passaggio 2. Sentry ti consente di arricchire l’evento di errore con tag personalizzati e dati utente.

“dattiloscritto”. // Nel tuo AuthProvider o Layout useEffect(() => { se (utente) { Sentry.setUser({ id: id.utente, email: user.email, // Fai attenzione alle PII (GDPR) segmento: utente.isVIP ? “VIP”: “Standard” }); } }, [utente]);


Nella dashboard di Sentry ora puoi eseguire query potenti:
* "Mostrami tutti gli arresti anomali che interessano gli utenti **VIP**."
* "Mostrami tutti gli arresti anomali su **iOS 17**."

## Avviso di stanchezza: il ragazzo che gridava al lupo

Il pericolo più grande con il monitoraggio degli errori è il **rumore**.
Se il tuo canale Slack `#alerts-prod` emette un ping ogni 5 minuti con "Caricamento immagine non riuscito", gli sviluppatori disattiveranno il canale.
Quindi, quando il database non funziona, nessuno se ne accorge.
Questo è **Avviso fatica**.

**Strategia per il rapporto segnale-rumore**:
1. **Ignora errori benigni**:
    Configura `ignoreErrors` in `sentry.client.config.ts` (ad esempio `ResizeObserver loop limit`).
2. **Protezione dai picchi**:
    Non avvisare in caso di *un* errore.
    Avvisa se: "**Più di 50 utenti** riscontrano questo errore in **5 minuti**."

## Riproduzione della sessione: l'opzione nucleare

A volte l'analisi dello stack non è sufficiente.
"L'utente dice di aver fatto clic sul pulsante ma non è successo nulla. Nessun errore registrato."
**Session Replay** (LogRocket / Sentry Replay) registra una riproduzione simile a un video della sessione dell'utente.
Registra le mutazioni DOM, i movimenti del mouse e i clic.
Puoi letteralmente guardare lo schermo dell'utente.
"Ah, hanno cliccato tre volte sul pulsante 'Indietro' mentre la finestra modale si stava aprendo."

**Privacy (GDPR/CCPA)**:
Questo è delicato.
È NECESSARIO mascherare i campi di input (Password, Carte di credito).
Sentry lo fa per impostazione predefinita (`maskAllText: true`), trasformando il testo in `****`.
Verificare manualmente questa configurazione.

## 7. Tracciamento delle prestazioni (transazioni di sentinella)

Gli errori sono arresti anomali. **Le transazioni** sono lente.
Sentry traccia l'intero ciclo di vita della richiesta.
1. L'utente fa clic su "Acquista".
2. Browser (`recupera /api/acquista`) -> 100 ms.
3. Server Next.js (`db.insert Orders`) -> 500 ms.
4. API Stripe ("carica") -> 2000 ms.
Totale: 2,6 secondi.
Se monitori solo gli errori, pensi che vada tutto bene.
Ma 2.6s è inaccettabile.
Sentry ti mostra la "Waterfall" della richiesta, evidenziando che Stripe è il collo di bottiglia.
**Correzione**: non aspettare Stripe. Usa una coda.

## 8. Il widget per il feedback degli utenti

Quando si verifica un arresto anomalo, Sentry può visualizzare automaticamente una finestra di dialogo.
"Sembra che ci siamo schiantati. Raccontaci cosa è successo."
Tipi di utente: "Ho fatto clic due volte su 'Applica coupon'."
Questo è oro.
Collega lo "Stack Trace" (tecnico) con l'"intento dell'utente" (aziendale).
Abilitalo per consentire agli utenti verificati di creare un rapporto.

## 10. Integrità del rilascio: fiducia nella distribuzione

Distribuisci la versione 2.0.
Gli errori aumentano o diminuiscono?
Sentry **Release Health** tiene traccia delle "Sessioni senza arresti anomali".
v1.0: 99,9% senza arresti anomali.
v2.0: 98,0% senza arresti anomali.
Ciò attiva un avviso automatico: **"Regressione rilevata nella v2.0"**.
Puoi eseguire un rollback istantaneo prima che i clienti si lamentino.
Questo è il ciclo di feedback che consente "Distribuzione venerdì".

## 11. Sicurezza della mappa sorgente

Il caricamento delle mappe di origine semplifica il debug.
Ma espone anche il tuo codice sorgente al pubblico (se lo carichi sul CDN).
I concorrenti possono rubare i tuoi algoritmi.
**Correzione**: caricamento delle mappe di origine sugli **artefatti sentinella** (privato).
Non caricare file `.map` sul tuo CDN pubblico.
Configura Sentry per recuperare le mappe internamente.
Ora ottieni stack trace completi, ma il mondo vede il codice offuscato.

## 12. Conclusione

Non puoi aggiustare ciò che non puoi vedere.
Il monitoraggio trasforma gli errori da "Storie di fantasmi" in "Ticket utilizzabili".
Ti consente di chiamare un cliente e dire:
"Abbiamo notato che hai riscontrato un errore durante il pagamento. Lo abbiamo risolto. Ecco un coupon del 10%."
È così che trasformi un fallimento in lealtà.

## Stanco del debug cieco?

Se il tuo team passa ore a rincorrere bug non riproducibili, **Maison Code** può aiutarti.
Implementiamo stack di osservabilità che ti offrono una visione a raggi X nel tuo ambiente di produzione.

---


<hr style="margin: 1rem 0" />

### Volare alla cieca?
Integriamo stack di monitoraggio Sentry/Datadog con mappe di origine e arricchimento del contesto.
**[Assumi i nostri architetti](/contact)**.