2011-10-26 6 views
14

Mi piacerebbe intercettare tutti gli errori JavaScript sul lato client sul nostro sito e registrarli. Quali sono le migliori pratiche per farlo?Le migliori pratiche per segnalare gli errori dei client con window.onerror?

Pensieri:

  • posso facilmente aggiungere un gestore /log/ alla nostra webapp, analizzare GET/POST parametri e utilizza il sistema di registrazione esistente sul lato server. È troppo ovvio?
  • window.onerror funziona ovunque? Cosa succede se si verifica un errore nel gestore?
  • Devo aggiungere un tag <img> alla pagina o creare un XmlHttpRequest? Cosa succede se l'XHR fallisce?
  • E le immagini rotte e gli errori jQuery Ajax - posso prendere anche quelli?
+0

Grazie a tutti! Bounty va a dgvid con più informazioni. La risposta accettata va a Zoran con il superset di informazioni. –

risposta

6

Tutti i suggerimenti fatti da Jbecwar e dgvid sono fresche, vorrei aggiungere:

  • nota che Opera non supporta l'evento di errore vedere quirksmode error event
  • stacktraces raccolta con stacktrace.js potrebbe aiutare a risolvere gli errori
  • se l'errore il gestore non è in grado di inviare segnalazioni errori sul lato server, fallback sull'utilizzo dei cookie: impostare cookie per errors.yourdomain.com con report di errore codificato base64 (compresso?) e richiedere un'immagine pixel 1x1 vuota da quel dominio su ogni pagina
  • oppure utilizzare la memoria locale HTML5 e caricarla quando è possibile
+0

Attualmente Opera lo supporta dal 11.60 (fonte: http://dev.opera.com/articles/view/better-error-handling-with-window-onerror/) – RelaXNow

+0

StackTrace.js è apparentemente ora all'indirizzo http: // stacktracejs .com. –

3

Il gestore di log suona come una buona idea, ma vorrei limitare il numero di report o di tentativi del report. Ad esempio, non si desidera che il reporter abbia un errore e quindi si provi a segnalarlo ripetutamente. Inoltre, se hai un cliente cattivo o un picco nel traffico, non vuoi registrare troppo.

Inoltre, window.onerror non funzionerà per iframe e mi avrebbe fatto il XMLHttpRequest, non non si vuole fare confusione con il DOM se già hanno problemi

TL; DR; Limita le richieste lato client e applica i limiti sul server. window.onerror non va bene per iframe e usa xmlhttprequest.

3

Come suggerisce Jbecwar, il gestore di registri è una buona idea, ma è necessario prestare attenzione a una condizione in cui si tenta di chiamare il gestore di registri per segnalare un errore durante il contatto con il gestore di registri. Se il browser perde la connessione al server, non sarà possibile accedere nuovamente al server.

È possibile rilevare un errore di caricamento img allegando un gestore di errori all'elemento img, quindi impostando l'attributo src. Ad esempio, utilizzando jQuery:

$("img#my-image").error(onImgError).prop("src", "images/my-image.jpg"); 

Non sarà possibile ottenere molte informazioni in questo modo, solo il fatto che si è verificato un errore durante il tentativo di caricare l'elemento specificato.

È possibile gestire gli errori nelle richieste jQuery.ajax includendo una funzione di callback di errore nell'oggetto delle impostazioni passato a $ .ajax. Assicurati di avvolgere il codice in entrambe le funzioni di callback di errore e di successo in try-catch.

Generalmente, si desidera proteggere il codice con i blocchi try-catch in modo che sia possibile rilevare e registrare gli errori. La gestione di window.onerror dovrebbe essere l'ultima risorsa, per le cose che sfuggono.

Nel gestore window.onerror, avvolgere tutto in un blocco try-catch e assicurarsi che non si passi dal codice nel blocco catch (utilizzando try-catch annidati, se necessario).

3

Di recente abbiamo iniziato a segnalare errori non gestiti come pagine visualizzate su google-analytics. L'idea di base è che un gestore window.onerror converta le informazioni di errore (percorso del file di script, numero di riga e messaggio di errore) in un URL di errore-pagina virtuale e lo segnalano come visualizzazione di pagina. È possibile applicare la logica a qualsiasi meccanismo di tracciamento della pagina.

Il semplice codice che utilizziamo è disponibile su GitHub a https://github.com/shyam-habarakada/js-watson

Con tutta la potenza analitica di Google Analytics, e questa semplice tecnica, abbiamo avuto un grande successo a identificare gli errori frequenti e critici e stato in grado di risolvili rapidamente. È inoltre possibile utilizzare la potenza di GA per analizzare le tendenze degli errori generali, errori specifici in file specifici, ecc. Ecc. Altamente raccomandato.

Problemi correlati