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

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

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

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

Контент

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

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

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

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

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

## Коротко: навіщо взагалі логувати помилки

> **Логування помилок - це спосіб бачити, що реально відбувається у користувачів і на сервері**,
> а не здогадуватися по відгуках і білих екранах.

Без логів ти фактично "сліпий" - React може показати fallback,
але ти не дізнаєшся, *чому* все зламалося і *скільки користувачів* постраждало.

---

## 1. Щоб розуміти, **що пішло не так**

Помилки можуть бути:

- у React-компонентах (рендер, ефекти);
- в асинхронних запитах (fetch, axios);
- у логіці бізнес-правил (валідація, розрахунки);
- в інфраструктурі (SSR, API, БД).

Без логів:

- ти бачиш "Помилка",
але не знаєш - де, чому, з якими даними і на якій версії коду.

З логами:

- ти бачиш стек викликів, час, компонент, юзер-агент, стан.

---

## 2. Для **швидкого налагодження і відтворюваності**

Коли помилка потрапляє в систему (наприклад, через `ErrorBoundary` чи `window.onerror`),
ти можеш:

```javascript
componentDidCatch(error, info) {
  sendToGlitchTip({
    message: error.message,
    stack: error.stack,
    componentStack: info.componentStack,
    url: window.location.href,
  });
}
```

Це дозволяє:

- миттєво зрозуміти, *де саме* і *в якому компоненті* все впало;
- фільтрувати за версією релізу, браузером, платформою;
- відтворювати і виправляти швидко.

---

## 3. Для **пріоритезації багів**

Не всі помилки однаково важливі:

- одна виникає у 0.01% користувачів - можна пізніше;
- інша у 60% - терміново виправляти.

Системи логування (Sentry, GlitchTip, LogRocket, Datadog та ін.) групують помилки,
показують частоту, користувачів, пристрій, реліз.
→ Це допомагає розставити пріоритети, а не гасити пожежі навмання.

---

## 4. Для **контролю якості і регресій**

Після деплою нової версії ти бачиш сплеск нових помилок → регрес.
Логування + релізні теги (`release: v1.5.2`) дозволяють:

- порівнювати метрики "до/після";
- відкочувати реліз при сплеску;
- стежити за стабільністю збірок.

---

## 5. Для **безпеки і аудиту**

У логах можна фіксувати:

- спроби доступу без авторизації;
- невалідні токени;
- підозрілі payload'и.

Це важливо для:

- розслідування інцидентів (security/audit trail),
- відповідності вимогам (GDPR, SOC2, PCI).

> Але: **ніколи не логуй особисті дані (PII)** - e-mail, паролі, токени, номери карт.
> Використовуй маскування (`user_id`, `***@***.com`).

---

## 6. Для **розуміння користувацького досвіду**

Помилки не завжди є багами в коді. Іноді - "непередбачені сценарії":
невірні дані, поганий інтернет, сторонні плагіни.

З логами ти бачиш:

- у яких браузерах частіше падає UI;
- які регіони мають проблеми з мережею;
- що ламається в мобільному Safari проти Chrome.

Це допомагає **покращувати UX** та інфраструктуру.

---

## 7. Для **навчання і документації**

Кожна помилка - сигнал про недопрацювання валідації, типізації, архітектури.
Якщо логувати і класифікувати помилки, то:

- можна автоматизувати "lessons learned";
- покращити тести і лінтери;
- оновити документацію.

---

## Де і як логувати в React-екосистемі

| Місце | Інструмент | Приклад |
|---|---|---|
| **UI** | `ErrorBoundary` + `componentDidCatch` | `sendToGlitchTip(error, info)` |
| **Клієнт** | `window.onerror`, `window.onunhandledrejection` | глобальні помилки JS |
| **Async fetch** | `try/catch` + централізований `logError(e)` | логування мережевих збоїв |
| **Сервер (NestJS / Node)** | `LoggerService`, `Sentry`, `winston`, `pino` | логування бекенда |
| **CI/CD** | GitHub Actions logs, build step logs | відловлюють помилки збірки |

---

## Приклад: мінімальна клієнтська інтеграція (GlitchTip / Sentry)

```javascript
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN,
  integrations: [new BrowserTracing()],
  tracesSampleRate: 0.1,
  environment: import.meta.env.MODE,
  release: "my-app@" + import.meta.env.VITE_APP_VERSION,
});

function App() {
  return (
    <Sentry.ErrorBoundary fallback={<h2>Щось пішло не так</h2>}>
      <MainRoutes />
    </Sentry.ErrorBoundary>
  );
}
```

Тепер:

- помилки з React-компонентів, async-коду і глобальні JS-помилки → все летить у Sentry/GlitchTip;
- видно стек, браузер, користувача (якщо анонімізований).

---

## Підсумок:

> Логування помилок - це не просто налагодження,
> це **єдина система спостереження за здоров'ям застосунку**.

### Що дає логування:

1. Розуміння причин падінь
2. Швидке налагодження
3. Пріоритезацію і метрики стабільності
4. Безпеку і аудит
5. Підвищення якості коду і UX

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

Для рев’юера

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

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