Skip to main content

Як відстежувати помилки на фронтенді?

Frontend-інструментиJunior~1 хв читання
Запропонувати правку

Щоб відстежувати помилки на фронтенді, використовують зв'язку з інструментів, коду та аналітики. Ось ключові способи:

1. window.onerror і window.addEventListener('error')

Це базовий спосіб зловити більшість необроблених помилок JavaScript:

js
window.onerror = function(message, source, lineno, colno, error) { // логуємо помилку на сервер або в консоль };

Додатково:

js
window.addEventListener('error', (event) => { // ловимо помилки завантаження ресурсів (картинки, стилі) });

2. window.addEventListener('unhandledrejection')

Ловить необроблені помилки Promise (трапляються дуже часто):

js
window.addEventListener('unhandledrejection', function(event) { // логуємо event.reason });

3. Використання готових інструментів (error analytics)

Підключаються через SDK і автоматично ловлять:

  • помилки JS і асинхронних операцій,
  • стек викликів, браузер, пристрій,
  • сесію користувача, його дії до помилки.

Популярні сервіси:

  • Sentry
  • Rollbar
  • LogRocket
  • Bugsnag
  • Datadog RUM

4. Надсилання помилок на сервер

Усі спіймані помилки варто надсилати на бекенд або сторонній сервіс:

js
fetch('/log-error', { method: 'POST', body: JSON.stringify({ message, stack, url }), });

5. Зв'язка з користувацькими подіями (event analytics)

Помилки корисно пов'язувати з діями:

  • що клікнув,
  • яка URL-адреса,
  • де перебував користувач. Це можна робити вручну або через такі сервіси, як Sentry + session replay.

6. Власні логери та консольні перехоплювачі (для SPA)

Перехоплюємо console.error, console.warn, щоб аналізувати навіть нефатальні проблеми.

js
const origConsoleError = console.error; console.error = function(...args) { sendToLogger(args); origConsoleError.apply(console, args); };

Висновок: Щоб відстежувати помилки на фронті, потрібен збір з усіх рівнів: глобальні пастки, обробка Promise, інструменти аналітики, контекст дій. Без цього продукту не видно, де і як він руйнується в користувача.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку