Cattura tutti gli errori JavaScript e inviali al server

Mi chiedevo se qualcuno avesse esperienza nella gestione degli errori JavaScript a livello globale e li avesse inviati dal browser client a un server.

Penso che il mio punto sia abbastanza chiaro, voglio conoscere ogni eccezione, errore, errore di compilazione, ecc. Che si verifica sul lato client e inviarli al server per segnalarli.

Uso principalmente MooTools e head.js(per il lato JS) e Django per il lato server.

Di recente ho provato Sentry in produzione e funziona benissimo (JS e altre lingue come PHP)

1- È open source (puoi installarlo sul tuo server) 2- Puoi usare il piano gratuito (100 report / giorno)

O installalo sul tuo server: github.com/getsentry

Darei un'occhiata a window.onerror

Esempio:

window.onerror = function(message, url, lineNumber) {  
  //save error and send to server for example.
  return true;
};  

Tieni presente che la restituzione di true impedirà l'attivazione del gestore predefinito e la restituzione di false consentirà l'esecuzione del gestore predefinito.

Se il tuo sito Web utilizza Google Analytics, puoi fare quello che faccio:

window.onerror = function(message, source, lineno, colno, error) {
  if (error) message = error.stack;
  ga('send', 'event', 'window.onerror', message, navigator.userAgent);
}

Alcuni commenti sul codice sopra:

• Per i browser moderni, viene registrata la traccia dello stack completo.
• Per i browser meno recenti che non acquisiscono la traccia dello stack, viene invece registrato il messaggio di errore. (Principalmente versione iOS precedente nella mia esperienza).
• Viene inoltre registrata la versione del browser dell'utente, in modo da poter vedere quali versioni del sistema operativo / browser generano quali errori. Ciò semplifica le priorità e i test dei bug.
• Questo codice funziona se si utilizza Google Analytics con "analytics.js", in questo modo . Se invece si utilizza "gtag.js", in questo modo , è necessario modificare l'ultima riga della funzione. Vedi qui per i dettagli .

Una volta che il codice è attivo, ecco come visualizzi gli errori Javascript dei tuoi utenti:

1. In Google Analytics, fai clic sulla Behaviorsezione e quindi sul Top Eventsrapporto.
2. Otterrai un elenco di categorie di eventi. Fai clic window.onerrorsull'elenco.
3. Vedrai un elenco di tracce dello stack Javascript e messaggi di errore. Aggiungi una colonna al rapporto per le versioni OS / browser dei tuoi utenti facendo clic sul Secondary dimensionpulsante e inserendo Event Labella casella di testo visualizzata.
4. Il rapporto sarà simile allo screenshot qui sotto.
5. Per tradurre le stringhe del sistema operativo / browser in descrizioni più leggibili dall'uomo, le copia e incollo in https://developers.whatismybrowser.com/useragents/parse/

Non provare a utilizzare i servizi di terze parti, invece prova per il tuo.

I gestori degli errori possono individuare gli scenari seguenti,

1. Tipo non catturato L'errore non può essere acquisito
2. L'errore di riferimento non rilevato non può essere acquisito, ad esempio: var.click ()
3. TypeError può essere acquisito
4. L'errore di sintassi può essere acquisito
5. L'errore di riferimento può essere acquisito

Per catturare errori Javascript:

window.addEventListener('error', function (e) {
  //It Will handle JS errors 
})

Per acquisire errori AngularJS:

app.config(function ($provide) {
$provide.decorator('$exceptionHandler', function ($delegate) {
   return function (exception, cause) {
       //It will handle AngualarJS errors
      }
   })
})

Inoltre, il servizio http://jslogger.com può aiutarti in questo:

Registra errori ed eventi Javascript nel cloud

da http://jslogger.com/features :

Da ora in poi puoi spiare tutti gli errori che interrompono l'esperienza utente del tuo sito. Ogni errore Javascript verrà rilevato e portato a te per il successivo debug.

DISCLAIMER: non affiliato con il servizio / azienda.

Puoi provare Atatus - Si tratta di un nuovo servizio di monitoraggio degli errori JavaScript insieme a Real User Monitoring (RUM) per le moderne app Web.

Non solo catturiamo gli errori, ma anche gli eventi dell'utente che hanno causato l'errore. Questo ti dà i passaggi per riprodurre l'errore alla tua fine.

Oltre alla cattura degli errori, catturiamo anche il tempo di caricamento della pagina e lo mostriamo in diverse prospettive: Geo, Browser, Drill down della pagina, Istogramma della pagina, Monitoraggio Ajax e Monitoraggio delle transazioni.

https://www.atatus.com/

Documenti disponibili: https://www.atatus.com/docs

Disclaimer: sono uno sviluppatore web di Atatus.

La libreria non rilevata è un buon modo gratuito per catturare tutti gli errori JS, inclusi i rifiuti non gestiti.

Potresti voler dare un'occhiata a questo nuovo servizio, http://rescuejs.com/ . https://bugsnag.com/

Ti permette di registrare tutti i tuoi errori javascript senza scrivere tu stesso il codice lato server. Tiene inoltre traccia delle versioni del browser e così via.

Non sono sicuro che li considererei "pronti per l'impresa" al 100%, ma vale sicuramente la pena provarli.