Kuidas jälgid ja monitoorsed JavaScripti vigu…

JavaScripti vigade jälgimine ja monitooring toimub järgmiste meetoditega:

Brauseri konsool: Peamine tööriist vigade silumiseks arendusfaasis. Vigade teated (sünteetilised, loogilised, jooksuaegsed) kuvatakse faili ja rea numbriga.

try...catch plokid: Püüavad kinni jooksva ajal tekkivad vead, võimaldades neid töödelda või kuvada täiendavat teavet.

try {
  // Kood, mis võib põhjustada vea
  let result = riskyOperation();
} catch (error) {
  // Vea töötlemine
  console.error("Viga:", error.message);
  // Vea saatmine serverile
  sendErrorToServer(error);
}

window.onerror: Globaalse JavaScripti vea töötleja. Võimaldab keskse jälgimise kaudu kinni püüda vead, mis "läbivad" try...catch.

window.onerror = function(message, source, lineno, colno, error) {
  console.error("Globaalne viga:", message, source, lineno, colno);
  // Vea info saatmine serverile
  sendErrorToServer({
    message: message,
    source: source,
    lineno: lineno,
    colno: colno,
    stack: error ? error.stack : 'N/A'
  });
  return true; // Tagastab true, et takistada vaikimisi veateate kuvamine konsoolis
};

unhandledrejection sündmus Promises: Püüab kinni töötlemata vead.

window.addEventListener('unhandledrejection', function(event) {
  console.error('Töötlemata Promise tagasilükkamine:', event.reason);
  // Vea info saatmine serverile
  sendErrorToServer(event.reason);
});

Vea jälgimise süsteemid (Sentry, Bugsnag, Rollbar): Professionaalsed teenused, mis koguvad, ühendavad ja analüüsivad vigu reaalajas. Pakuvad stacktrace, kasutaja keskkonna teavet, vigade sagedust ja teavitusi. Peamine tööriist tootmises.
Serveri logimine: Vead, mis on kinni püütud frontendis try...catch, onerror või unhandledrejection abil, saadetakse serverile keskse salvestamise ja analüüsi jaoks.

Valik sõltub arendusfaasist ja vea kriitilisusest. Ma kasutan alati kombinatsiooni try...catch, globaalsetest töötlejatest ja monitooringusüsteemidest.

Kuidas jälgid ja monitoorsed JavaScripti vigu?