Hogyan követed nyomon és figyeled a JavaScript…

A JavaScript hibákat a következő módokon követem nyomon és monitorozom:

Böngésző konzol: A fejlesztési szakaszban a hibakeresés fő eszköze. A hibák (szintetikus, logikai, futási idő) a fájl és a sor megjelölésével jelennek meg.

try...catch blokkok: Elkapják a futási hibákat, lehetővé téve azok kezelését vagy további információk megjelenítését.

try {
  // Olyan kód, ami hibát okozhat
  let result = riskyOperation();
} catch (error) {
  // Hibakezelés
  console.error("Hiba történt:", error.message);
  // Hibát küldhetünk a szervernek
  sendErrorToServer(error);
}

window.onerror: Globális kezelő a nem kezelt JavaScript hibákhoz. Lehetővé teszi, hogy központilag elfogja azokat a hibákat, amelyek "átmentek" a try...catch-en.

window.onerror = function(message, source, lineno, colno, error) {
  console.error("Globális hiba:", message, source, lineno, colno);
  // Információk küldése a hibáról a szervernek
  sendErrorToServer({
    message: message,
    source: source,
    lineno: lineno,
    colno: colno,
    stack: error ? error.stack : 'N/A'
  });
  return true; // Visszatérési érték, hogy elnyomja a standard hibaüzenetet a konzolon
};

unhandledrejection esemény Promise-okhoz: Elfogja a nem kezelt hibákat.

window.addEventListener('unhandledrejection', function(event) {
  console.error('Nem kezelt Promise-elutasítás:', event.reason);
  // Információk küldése a szervernek
  sendErrorToServer(event.reason);
});

Hibafigyelő rendszerek (Sentry, Bugsnag, Rollbar): Professzionális szolgáltatások, amelyek valós időben gyűjtik, aggregálják és elemzik a hibákat. Stacktrace-eket, a felhasználói környezet adatait, a hibák gyakoriságát és értesítéseket nyújtanak. Ezek a fő eszközök a termelésben.
Szerveroldali naplózás: A frontendben try...catch, onerror vagy unhandledrejection segítségével elfogott hibák a szerverre kerülnek, hogy központilag tárolják és elemezzék.

A módszer kiválasztása a fejlesztési szakasztól és a hiba kritikus voltától függ. Termelésben mindig a try...catch, globális kezelők és monitorozó rendszerek kombinációját használom.

Hogyan követed nyomon és figyeled a JavaScript hibákat?