Monitoraggio front-end con New Relic Browser

Cosa starai creando

La maggior parte dei servizi di analisi funziona registrando solo le informazioni di base sui tuoi utenti in visita, ad es. l'URL visitato, l'url di riferimento, il sistema operativo del computer e il tempo trascorso sulla pagina prima di partire. Cioè, molti servizi di analisi forniscono un livello base di informazioni, ma molto di più accade nel browser del cliente dopo che la pagina è stata caricata come le successive chiamate Javascript e Ajax. Quindi, c'è molto spazio per l'innovazione, ed è qui che entra in gioco il servizio Browser di New Relic.

New Relic è un servizio di monitoraggio delle prestazioni che funziona con una varietà di tecnologie server e linguistiche e il browser esegue la sua analisi sui propri computer e dispositivi degli utenti nei loro browser. In tal modo, ti fornisce un'immagine dell'esperienza dell'utente reale con il tuo prodotto. New Relic Browser è l'unico prodotto di monitoraggio che esegue questa operazione.

New Relic Browser monitora i dati del ciclo di vita della pagina intera, ben oltre il caricamento iniziale della pagina. Per ogni pagina utente finale caricata, New Relic acquisisce:

  • Tempo trascorso nel front end (browser)
  • Codice ed eventi eseguiti nel browser (JavaScript, Ajax e interazioni dell'utente finale)
  • Tempo trascorso nel back-end (rete e app web)
  • Origine geografica
  • Tipo e versione del browser e sistema operativo

È possibile visualizzare i dati a livello globale su tutti gli utenti e visualizzarli affettati e tagliati in base a pagine Web, browser, sessione utente e posizione.

Il browser può aiutarti a identificare i problemi lato client che nessun altro servizio di monitoraggio può eseguire. Inoltre, può aiutarti a identificare e isolare i problemi con browser specifici, versioni o posizioni di reti geografiche. In effetti, il team di New Relic ha scritto un post sul blog sulle cose pazze che ha scoperto sui browser degli utenti finali durante i beta test, come le installazioni di malware e il comportamento bizzarro di Chrome.

Iniziare

Per iniziare, devi registrarti per il tuo account gratuito su New Relic:


Se stai già utilizzando New Relic, forse dal nostro altro tutorial su WordPress e W3 Total Cache, potresti dover attivare il tutorial di Browser Pro. Accedi e cerca il pulsante "aggiungimi al browser Pro trial". Questo attiverà la prova gratuita di 30 giorni per le funzionalità di Browser Pro.

Una volta completata la registrazione, seguire le istruzioni di installazione nella pagina appropriata per la registrazione. Sto usando Ubuntu 14.04. New Relic offre istruzioni di installazione avanzate per la maggior parte delle lingue.

Per la mia installazione di Ubuntu, va così. L'installazione di WordPress W3TC New Relic funziona in modo leggermente diverso.

Aggiungi il repository apt New Relic:

echo deb http://apt.newrelic.com/debian/ newrelic non-free >> /etc/apt/sources.list.d/newrelic.list

Affidati alla chiave GPG di New Relic:

wget -O - http://download.newrelic.com/548C16BF.gpg | sudo apt-key add - 

Aggiorna e lista dei pacchetti locali e installa New Relic:

sudo apt-get update

Se stai usando l'impostazione New Relic standard, sarà:

apt-get install newrelic-sysmond

Configura e avvia il monitor di sistema. Se stai usando l'impostazione New Relic generica, fai questo:

nrsysmond-config --set license_key = your-license-key-goes-here 

Avvia il daemon New Relic:

/etc/init.d/newrelic-sysmond start

Indipendentemente dall'approccio utilizzato, riavvia il tuo server web:

servizio apache2 ricarica

Dopo alcuni minuti, dovresti vedere il messaggio rosso nella pagina di configurazione che indica che i dati stanno scorrendo in New Relic dal tuo server. Splendido, no?

Dopo questo, puoi configurare New Relic Browser. Ci sono due modi per farlo:

  1. È possibile installare l'applicazione tramite un agente APM sul back-end e quindi abilitare la versione di prova pro all'interno dell'app.
  2. È possibile installare New Relic Browser tramite un metodo standalone. Questo genererà il codice JavaScript che può essere iniettato nell'intestazione di una pagina e inizierà la raccolta dei dati del browser senza la necessità di eseguire il back-end di distribuzione.

Entrambe queste opzioni sono documentate qui.

Imparare dal browser

Visita la pagina del prodotto Browser per vedere i dati raccolti. La navigazione nell'app Browser è abbastanza semplice utilizzando il pannello laterale sinistro. Lo mostro qui sotto perché non ho omesso lo screenshot che segue (per fornire più spazio sullo schermo per il contenuto).

La panoramica

La panoramica è la principale vista di alto livello per il browser che offre una visione d'insieme dei problemi di prestazioni che potrebbero verificarsi o meno. La panoramica è un ottimo posto per trovare problemi che meritano un'ispezione più approfondita.

Si tratta essenzialmente di una visualizzazione in tempo reale delle visite alle pagine effettive, suddivisione delle prestazioni in base al tempo trascorso in rete, al server Web, all'elaborazione DOM e al rendering delle pagine.

Il punteggio Apdex fornisce una misurazione quantitativa delle esperienze di usabilità del sito in base al tempo di risposta, ovvero il rapporto tra tempi di risposta soddisfacenti e tempi di risposta insoddisfacenti).

Nella Panoramica, puoi fare clic su qualsiasi elemento che sembra non funzionare bene. Ulteriori informazioni sull'utilizzo della pagina Panoramica.

Tracce di sessione

Le tracce di sessione ti danno visibilità sull'intero ciclo di vita di una pagina web, comprese le interazioni dell'utente, il caricamento degli asset, gli iframe, il tempo trascorso ad attendere le chiamate Ajax, gli errori e altro ancora: monitoraggio dell'esperienza reale di un utente reale dall'inizio alla fine. 

Le tracce non solo identificano i problemi, ma possono mostrare ciò che l'utente ha fatto prima e dopo l'errore. 


Le tracce di sessione ti aiutano a capire:

  • In che modo gli utenti sperimentano il caricamento della pagina, compreso il tempo necessario per il caricamento del DOM, il tempo di attesa per le richieste Ajax da completare e le interazioni dell'utente con la pagina
  • In che modo le metriche New Relic riflettono le esperienze degli utenti finali
  • La sequenza di eventi JavaScript e del browser, che richiedono più tempo di altri e quando si verifica ogni evento
  • Dove si verificano i colli di bottiglia e che cosa potrebbe causarli
  • Perché un caricamento di una pagina può essere più lento di altri, fornendo il contesto per singoli eventi durante una sessione

Fai clic su qualsiasi pagina e ottieni un'analisi dettagliata dell'attività in ogni pagina di visita di un particolare utente. In realtà è davvero sorprendente - e super utile per diagnosticare problemi. 

Puoi vedere esattamente cosa stava accadendo nel browser di un particolare utente in un determinato momento. Le tracce di sessione forniscono una visualizzazione dettagliata e intuitiva di tutti gli eventi nella sessione dell'utente, che possono aiutare a individuare le aree problematiche e identificare facilmente le soluzioni. Ulteriori informazioni sull'utilizzo delle tracce di sessione.

Visualizzazioni di pagina

Le visualizzazioni di pagina mostrano prestazioni dettagliate dalle pagine più visitate del tuo sito:

Quando esegui il drill-down, puoi vedere il rendimento dei singoli file caricati dal tuo sito:

Ulteriori informazioni sull'interpretazione dei grafici di visualizzazione delle pagine.

Ajax

La pagina Ajax ti consente di vedere cosa succede con le chiamate interattive che hai sulla pagina, aiutando a identificare i problemi con l'esperienza degli utenti in caso di chiamate dispendiose o che richiedono tempo:

Nota che Browser non registra automaticamente i dati Ajax. Devi attivarlo per app nell'area delle impostazioni Nuova reliquia. Maggiori informazioni sulla dashboard Ajax.

Errori JavaScript

La dashboard degli errori del browser JavaScript ti consente di vedere rapidamente quali errori si verificano nel tuo JavaScript di produzione live nel tempo, su quali browser. È possibile esaminare gli errori in base al numero di volte in cui si è verificato ciascuno e al numero di carichi di pagina univoci che hanno rilevato tale errore. 

Questo ti consente di identificare gli errori che stanno influenzando le esperienze degli utenti reali sul tuo sito; è un modo particolarmente efficace per imparare gli errori JavaScript che non vengono visualizzati nei tuoi test o sui browser che potresti aver escluso dal tuo letto di prova.

Ancora una volta, è necessario attivare la segnalazione javascript nell'area delle impostazioni Nuova reliquia e ci sono alcuni problemi con la privacy e la sicurezza con questa funzione. Assicurati di leggere ulteriori informazioni sull'utilizzo della dashboard Errori JavaScript prima di attivarla.

browser

New Relic Browser ti consente anche di vedere le prestazioni del tuo sito web su diversi browser.

Ulteriori informazioni sull'utilizzo della dashboard Browser.

Geografia

Il dashboard Geography mostra i punteggi delle prestazioni delle esperienze effettive degli utenti da tutto il mondo. È possibile selezionare regioni geografiche specifiche, come paesi o stati, e quindi eseguire il drill-down per ottenere informazioni dettagliate sul rendimento della pagina e sul rendimento storico.

Questo può essere molto utile per identificare problemi di rete altrimenti difficili da scoprire. Ulteriori informazioni sull'uso del dashboard di Geography. 

Guardando avanti

Spero che tu abbia trovato questa panoramica intrigante. New Relic Browser offre strumenti di analisi e debug molto potenti e sofisticati a portata di mano.

La versione di prova di New Relic Browser Pro dura 30 giorni. Mentre è possibile utilizzare gratuitamente il servizio di monitoraggio lite di New Relic Browser (ed è incluso in tutti i pacchetti APM di New Relic), è necessario eseguire l'aggiornamento al piano Pro (a partire da $ 99 / mese per 500.000 visualizzazioni di pagina) per mantenere il browser servizio. È anche importante aggiornare occasionalmente New Relic e controllare i suoi file di registro. Rivedere la guida di manutenzione di New Relic.

Se avete domande o suggerimenti, per favore pubblicateli nei commenti. Se desideri tenere il passo sui miei tutorial e tutorial Tuts futuri e altre serie, visita la pagina del mio autore o segui @reifman.

Link correlati

  • Nuove informazioni sul prodotto del browser Relic
  • Nuova documentazione del browser Relic
  • Cose pazzesche che abbiamo trovato sviluppando un nuovo Relic Browser
  • Uso di New Relic per monitorare le prestazioni di WordPress (Tuts +)