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

Покращити цю статтю

Допрацюйте відповідь до «Як відстежувати помилки на фронтенді?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

---

### 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, інструменти аналітики, контекст дій. Без цього продукту не видно, де і як він руйнується в користувача.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати259 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.