Логування помилок

ReactJunior~2 хв читання

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

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

Без логів ти фактично "сліпий" - 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;
видно стек, браузер, користувача (якщо анонімізований).

Підсумок:

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

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

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

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

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

Premium

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