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

232

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.

Olivier Girardot
źródło
20
Nie rozumiem, dlaczego to pytanie jest niejasne.
Michael Hilus
3
Zagłosowano dwukrotnie, aby ponownie otworzyć pytanie, ale bez powodzenia. Zupełnie niejasne jest, dlaczego to pytanie jest zamknięte jako niejasne.
Muhammad Usman
7
@ andrew-fryzjer - jeśli tak wielu użytkowników uzna to pytanie za wystarczająco istotne, aby je głosować, to może jeśli nie jest dla ciebie jasne, problem jest z tobą?
isapir
5
To pytanie jest nie tylko jasne, ale również niedoceniane :)
Teoman shipahi

Odpowiedzi:

16

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

Tarek
źródło
Pamiętaj, że mają nieograniczony bezpłatny plan dla instytucji edukacyjnych
christianvuerings
8
Nie wydaje się już być open source, wszystkie opcje są płatne?
David Cumps
4
@DavidCumps Nadal oferują bezpłatną usługę (wersja próbna), ale dostajesz tylko 7 dni historii błędów lub możesz zainstalować ją na swoim własnym serwerze od czasu jego otwarcia ( github.com/getsentry )
Tarek
1
Menedżer tagów Google ma nasłuchiwanie błędów JavaScript, być może warto to sprawdzić, zwłaszcza jeśli już korzystasz z GA
Adrian Gunawan,
W tym celu powinieneś również sprawdzić TrackJS . Jest to usługa płatna, ale zapewnia mnóstwo kontekstu na temat tego, jak użytkownik wpadł w błąd podczas debugowania. Jestem jednym z programistów i naprawiłem mnóstwo błędów :)
Todd Gardner
318

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.

Mike Lewis
źródło
9
Powinieneś przypisać błąd window.onerror najlepiej przed uruchomieniem czegokolwiek innego. Więc gdziekolwiek chcesz go umieścić, po prostu upewnij się, że działa przed dowolnym innym kodem / plikami js.
Mike Lewis,
17
Uwaga: Mozilla zaleca: „Zauważ, że niektóre / wiele zdarzeń błędów nie wywołuje funkcji window.onoror, musisz ich szczególnie słuchać”.
Adam Naylor,
88
Tak, uwielbiam to, co mówi niektóre / wiele , bardzo opisowe - dzięki Mozilla.
Daniel Mendel,
5
Mozilla ujawnia GlobalEventHandlers.onerror: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…
roland
1
Co się stanie, jeśli kod obsługujący funkcję window.onerror zgłosi błąd. Czy istnieje możliwość nieskończonej pętli?
Martin Brown
15

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/

wprowadź opis zdjęcia tutaj

Martin Omander
źródło
3
Nie zatrzymuje to wszystkich błędów, po prostu blokuje try-catch, chociaż fajnie jest to wytłumaczyć i nie sądzę, że zasługujesz na negatywne opinie.
Nick Steele,
Dziękuję Nick! Zaktualizowałem swoją odpowiedź kodem sprawdzonym w bitwie, który działa dobrze na mojej stronie i który przechwytuje wszystkie błędy, nie tylko te, które złapałeś w try ... catch.
Martin Omander,
2

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
      }
   })
})
sam ruben
źródło
0

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ą.

Iwan Kurmanow
źródło
1
503 Usługa niedostępna
Rax
0

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.

Fizer Khan
źródło
1
Zintegrowałem Ataus i spróbowałem czegoś takiego jak foo.bar = '', co spowodowało wyjątek. Ale nic nie widzę w desce rozdzielczej Atatus.
vmachacek
Czy możesz nam wysłać e-mail?
Fizer Khan
5
Bezwstydna wtyczka. Reklamy powinny być ograniczone do prawej strony.
Czy
0

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

LeeGee
źródło
-2

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ć.

Lillesand
źródło
8
Zostało zamknięte. Jeśli spróbujesz się teraz zarejestrować, pojawi się komunikat „Dziękujemy za zainteresowanie, niestety nie jest już aktywnie nad Rescue.js”.
Dzień