2012-06-29 13 views
17

Il mio progetto che contiene molte pagine con moduli. Questo è un back-end del sistema di CRM bancario, quindi qualsiasi errore durante il processo di lavoro deve essere catturato e studiato. Sul lato server abbiamo avanzato il sistema di eccezioni java, ma se si verifica un errore sul lato client - javascript le uniche informazioni che ora otteniamo sono una finestra js-error in IE o qualche volta uno screenshot di pagina creato dall'utente avanzato.Errore di registrazione per javascript sul lato client

Il codice Javascript contiene sia estensioni dell'interfaccia utente Jquery che funzioni e gestori di eventi inline codificati.

Quindi mi chiedo se è possibile utilizzare un approccio per l'acquisizione di errori js di qualsiasi tipo? qualche libreria aggiuntiva o qualcosa che potrebbe darmi uno stacktrace come firebug in Mozilla o web-console in Chrome?

+2

fare riferimento a questo link: http://openmymind.net/2012/4/4/You-Really-Should-Log-Client-Side-Error/ –

+0

Grazie a Tamil e Alexanderb, ma nel mio caso posso ' t uso l'outsourcing e non si trova all'interno dei servizi della mia area di rete – shershen

+0

Non l'ho provato da solo, ma soluzioni del genere potrebbero sembrare interessanti: https://www.proxino.com/ –

risposta

24

Cerca su window.onerror. Se vuoi catturare eventuali errori e segnalarli al server, allora potresti provare una richiesta AJAX, forse.

window.onerror = function(errorMessage, errorUrl, errorLine) { 
    jQuery.ajax({ 
     type: 'POST', 
     url: 'jserror.jsf', 
     data: { 
      msg: errorMessage, 
      url: errorUrl, 
      line: errorLine 
     }, 
     success: function() { 
      if (console && console.log) { 
       console.log('JS error report successful.'); 
      } 
     }, 
     error: function() { 
      if (console && console.error) { 
       console.error('JS error report submission failed!'); 
      } 
     } 
    }); 

    // Prevent firing of default error handler. 
    return true; 
} 
+7

È necessario aggiungere una funzione di limitazione a questo. Se il client cade in un ciclo che genera errori, i client eseguiranno il DOS dell'endpoint di registrazione rapidamente. Dai un'occhiata a questo Repo per un ottimo esempio. https://github.com/TrackJs/Tech-Demo –

+0

dataType: "json" – 0fnt

+0

contentType deve essere 'application/json' – Kildareflare

2

Se si vuole fare realizzazione indolore appena messo this ragazzi codice javascript nella tua app. Altrimenti se si desidera implementarne uno, quindi provare this per ottenere lo stacktrace su windowerror ed è possibile utilizzare ajax per segnalare gli errori. A nice way per tracciare gli errori segnalati da olark

2

http://exceptionhub.com Per il trucco. http://errorception.com/ Non fornisce molte informazioni per il debug, ma sembra anche bello.

proxino non sembrano sapere quello che stanno facendo, dove includevano un jQuery completo nel loro codice logger per accedere agli eventi più recenti l'ultima volta che ho controllato. Non mi fiderei di un servizio che ha così poca conoscenza del lato client JavaScript per registrare i miei errori JavaScript.

+1

Vale la pena sottolineare che Proxino anche ha una versione jQuery-less dello script, sebbene richieda comunque di caricare jQuery sulla tua pagina. https://www.proxino.com/documentation –

1

vi consiglio di usare JsLog.me servizio

E 'in grado di catturare tutta la produzione della console, oltre a errori e stacktraces. Lo usiamo nei nostri progetti, la registrazione dell'intero log della console aiuta il nostro team di QA a registrare il modo di riprodurre il problema. Inoltre, funziona bene con oggetti JSON di grandi dimensioni come nella console di Chrome e ha una ricerca.

12

Disclaimer: Sono CEO e creatore di Sentry, un servizio open source e a pagamento che esegue il blocco dei rapporti per molte lingue, incluso Javascript.

Può essere piuttosto difficile acquisire le eccezioni frontend. La tecnologia è migliorata (i motori JS del browser), ma ci sono ancora molte limitazioni.

  1. Avrete bisogno di un endpoint di registrazione sul lato server. Questo ha alcune complessità in quanto è possibile abusarne (ad esempio, i tester PEN possono provare a esporre le vulnerabilità in esso). Devi anche occuparti di CORS qui. Ovviamente raccomanderei Sentry per questo, dato che siamo i migliori della classe e, se lo desideri, puoi ospitare tu stesso il server (come open source).
  2. L'implementazione di catturare effettivamente gli errori nel codice è piuttosto complicata. Non puoi contare su window.onerror per vari motivi (soprattutto perché i browser storicamente forniscono informazioni errate qui). Quello che facciamo nel client raven.js (che è basato su TraceKit) è patch una serie di funzioni per avvolgerli nelle istruzioni try/catch. Ad esempio, window.setTimeout.Con questo siamo in grado di installare gestori di errori che genereranno stacktraces completi nella maggior parte dei browser.
  3. Dovrai assicurarti di generare codice sorgente per il tuo codice e che il server che gestisce i dati li supporta. Sentry fa ciò sia scraendoli automaticamente (tramite gli standard) o permettendoti di caricarli tramite un API. Senza questo, supponendo che tu stia modificando il codice, le cose diventano quasi inutilizzabili.
  4. L'ultimo grosso problema è il rumore. La maggior parte delle estensioni del browser si inseriscono direttamente nei tuoi script, quindi è necessario filtrare il rumore. Risolviamo questo problema in due modi: una lista nera di pattern da ignorare (ad esempio "Errore di script" è la più inutile) e una whitelist di domini da accettare (ad esempio "esempio.com"). Abbiamo trovato che la combinazione dei due è abbastanza efficace per rimuovere la maggior parte del rumore casuale.

alcune cose che dovreste essere a conoscenza sul server:

  • clienti a volte persistono aperta (vale a dire un bot, o un cattivo utente) e causare grandi quantità di dati inutili o semplici vecchi errori.
  • Il server dovrebbe essere in grado di gestire una cascata di questi eventi e fallire con garbo. Sentry fa ciò limitando le cose e campionando i dati.
  • Le eccezioni sono localizzate nella lingua del browser e, senza un database centralizzato, sarete bloccati a tradurle da soli (anche se è generalmente ovvio che cosa significano).
1

Atatus acquisisce errori JavaScript e cattura anche le azioni dell'utente che hanno preceduto l'errore. Ciò aiuterebbe a capire meglio l'errore. Atatus ti aiuta a monitorare il vostro frontend, non solo per gli errori, ma anche le sue prestazioni (Real User Monitoring)

https://www.atatus.com/

Disclaimer: io sono uno sviluppatore web a Atatus.

Problemi correlati