Osservabilità frontend: cosa e perché

L'osservabilità del backend è una pratica consolidata: i log registrano gli eventi, le metriche monitorano l'utilizzo delle risorse e le tracce distribuite seguono le richieste attraverso i microservizi. Strumenti come Datadog, Prometheus e Jaeger sono ampiamente utilizzati nei sistemi backend di produzione.

L'osservabilità frontend è una disciplina più recente, che monitora l'esperienza dell'utente mentre interagisce con l'applicazione React. Include la registrazione delle interazioni dell'utente, la misurazione delle prestazioni di rendering, l'osservazione delle richieste di rete e la raccolta degli errori JavaScript nel browser.

Il backend può sembrare perfettamente in salute, con tassi di errore bassi e query al database rapide, mentre gli utenti sperimentano un'interfaccia lenta, poco fluida o non funzionante. L'osservabilità frontend colma questa lacuna misurando ciò che gli utenti sperimentano realmente, non solo il comportamento del server.

Una traccia frontend registra la sequenza di eventi avviata da un'azione dell'utente: il clic su un pulsante, l'aggiornamento dello stato di React, il recupero dei dati da un'API e il rendering del risultato. Questa traccia collega l'intento dell'utente ai componenti che lo hanno eseguito e alle chiamate di rete effettuate.

L'equivalente frontend delle metriche backend sono i Web Vitals: LCP (Largest Contentful Paint) misura la velocità di caricamento, INP (Interaction to Next Paint) misura la reattività e CLS (Cumulative Layout Shift) misura la stabilità visiva. Queste sono le metriche che Google utilizza per il ranking dei Core Web Vitals.

I log frontend registrano errori, avvisi ed eventi informativi dal browser. I segnali principali sono le chiamate console.error, le eccezioni JavaScript non gestite (window.onerror), i rifiuti di Promise non gestiti (window.onunhandledrejection) e le eccezioni catturate dagli error boundary di React.

Real User Monitoring raccoglie dati di osservabilità dai browser di utenti reali in produzione. RUM strumenta automaticamente il browser, catturando i tempi delle prestazioni, gli errori e le interazioni dell'utente nel momento in cui si verificano. Offre dati del mondo reale che nessun test sintetico può replicare.

Il monitoraggio sintetico utilizza strumenti automatizzati, come Lighthouse CI, Playwright e WebPageTest, per simulare le interazioni degli utenti in un ambiente controllato. È prevedibile e rileva le regressioni prima che raggiungano gli utenti, ma non riflette la varietà dei dispositivi, delle reti e dei modelli di utilizzo degli utenti reali.

Diversi strumenti commerciali offrono RUM con tutte le funzionalità incluse per React: Datadog RUM, che si integra con Datadog APM per ottenere tracce full-stack, New Relic Browser e Sentry Performance, che raccoglie errori e prestazioni in un unico SDK. Sono rapidi da integrare, ma costosi su larga scala.

OpenTelemetry è un progetto CNCF che definisce API e SDK indipendenti dal vendor per la raccolta di tracce, metriche e log. Strumentando l'applicazione con OpenTelemetry, i dati restano sotto il vostro controllo e possono essere inviati a qualsiasi backend compatibile: Jaeger, Grafana Tempo, Honeycomb, Datadog o una pipeline personalizzata.

Senza l'osservabilità frontend, un'esperienza utente lenta è quasi invisibile ai team di sviluppo. Potreste notare un aumento delle richieste all'assistenza clienti o un calo dei tassi di conversione, ma senza tracce e metriche dal browser individuare la causa principale richiede supposizioni.

Qual è la differenza principale tra Real User Monitoring (RUM) e monitoraggio sintetico?

L'osservabilità frontend applica al browser i tre pilastri: tracce, metriche e log. RUM registra le esperienze degli utenti reali, mentre il monitoraggio sintetico rileva tempestivamente le regressioni. I Web Vitals (LCP, INP, CLS) sono le metriche frontend principali. OpenTelemetry fornisce uno standard indipendente dal vendor per la raccolta e l'esportazione di questi dati, lasciando libertà nella scelta del backend di osservabilità.