Złap wszystkie błędy JavaScript i wyślij je na serwer

Zastanawiałem się, czy ktoś miał doświadczenie w obsłudze błędów JavaScript na całym świecie i wysyłaniu ich z przeglądarki klienta na serwer.

Myślę, że mój punkt widzenia jest dość jasny, chcę poznać każdy wyjątek, błąd, błąd kompilacji itp., Które zdarzają się po stronie klienta i wysłać je na serwer, aby je zgłosić.

Używam głównie MooTools i head.js(po stronie JS) i Django po stronie serwera.

Niedawno przetestowałem Sentry na produkcji i działa dobrze (JS i inne języki, takie jak PHP)

1- Jest to oprogramowanie typu open source (możesz zainstalować na własnym serwerze) 2- Możesz skorzystać z bezpłatnego abonamentu (100 raportów dziennie)

Lub zainstaluj go na swoim serwerze: github.com/getsentry

Sprawdziłbym okno. Błąd

Przykład:

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

Należy pamiętać, że zwracanie wartości true uniemożliwi uruchamianie domyślnego modułu obsługi, a zwracanie wartości false spowoduje uruchomienie domyślnego modułu obsługi.

Jeśli Twoja witryna korzysta z Google Analytics, możesz robić to, co robię:

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

Kilka komentarzy do powyższego kodu:

• W nowoczesnych przeglądarkach rejestrowany jest ślad pełnego stosu.
• W przypadku starszych przeglądarek, które nie przechwytują śladu stosu, komunikat o błędzie jest rejestrowany. (Głównie wcześniejsza wersja iOS z mojego doświadczenia).
• Rejestrowana jest również wersja przeglądarki użytkownika, dzięki czemu można zobaczyć, które wersje systemu operacyjnego / przeglądarki generują błędy. Upraszcza to ustalanie priorytetów i testowanie błędów.
• Ten kod działa, jeśli używasz Google Analytics z „analytics.js”, w ten sposób . Jeśli zamiast tego używasz pliku „gtag.js”, musisz poprawić ostatni wiersz funkcji. Zobacz tutaj, aby uzyskać szczegółowe informacje .

Po wprowadzeniu kodu możesz przeglądać błędy JavaScript użytkowników:

1. W Google Analytics kliknij Behaviorsekcję, a następnie Top Eventsraport.
2. Otrzymasz listę kategorii zdarzeń. Kliknij window.onerrorna liście.
3. Zobaczysz listę śladów stosu Javascript i komunikatów o błędach. Dodaj kolumnę do raportu dla wersji systemu operacyjnego / przeglądarki użytkowników, klikając Secondary dimensionprzycisk i wprowadzając Event Labelwyświetlane pole tekstowe.
4. Raport będzie wyglądał jak zrzut ekranu poniżej.
5. Aby przetłumaczyć ciągi systemu operacyjnego / przeglądarki na bardziej czytelne dla ludzi opisy, kopiuję je i wklejam na https://developers.whatismybrowser.com/useragents/parse/

Nie próbuj korzystać z usług stron trzecich, zamiast próbować własnych.

Programy obsługi błędów mogą wyłapać poniższe scenariusze,

1. Nieprzechwycony błąd typu nie może zostać przechwycony
2. Nie można przechwycić niepoprawnego obiektu ReferenceError, np .: var.click ()
3. Błąd typu może zostać przechwycony
4. Błąd składni może zostać przechwycony
5. Błąd referencyjny może zostać przechwycony

Aby wyłapać błędy JavaScript:

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

Aby przechwycić błędy AngularJS:

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

Ponadto usługa http://jslogger.com może w tym pomóc:

Loguj błędy Javascript i zdarzenia w chmurze

z http://jslogger.com/features :

Od teraz możesz szpiegować wszystkie błędy, które wpływają na komfort korzystania z witryny. Każdy błąd Javascript zostanie wyłapany i dostarczony do późniejszego debugowania.

ZASTRZEŻENIE: nie jest związany z usługą / firmą.

Możesz wypróbować Atatus - jest to nowa usługa śledzenia błędów JavaScript wraz z monitorowaniem rzeczywistych użytkowników (RUM) dla nowoczesnych aplikacji internetowych.

Przechwytujemy nie tylko błędy, ale także zdarzenia użytkownika, które spowodowały błąd. To daje kroki do odtworzenia błędu na twoim końcu.

Oprócz wychwytywania błędów, rejestrujemy także czas ładowania strony i pokazujemy go z różnych perspektyw - Geo, przeglądarki, Page Drill Down, Histogram strony, Ajax Monitoring i Transaction Monitoring.

https://www.atatus.com/

Dostępne dokumenty: https://www.atatus.com/docs

Oświadczenie: Jestem programistą w Atatus.

Nieprzechwycony biblioteka jest dobry darmowy sposób uchwycić wszystkie błędy JS, w tym nieobsłużonych odrzuceń.

Możesz sprawdzić tę nową usługę, http://rescuejs.com/ . https://bugsnag.com/

Umożliwia rejestrowanie wszystkich błędów javascript bez samodzielnego pisania kodu po stronie serwera. Śledzi także wersje przeglądarek i tak dalej.

Nie jestem pewien, czy uznałbym je za w 100% „gotowe na przedsięwzięcie”, ale zdecydowanie warto je sprawdzić.