## Приклад інтеграції Sentry у frontend Умовний приклад: ```ts import * as Sentry from "@sentry/react"; Sentry.init({ dsn: "https://examplePublicKey@sentry.io/project-id", environment: "production", release: "my-app@1.0.0", }); ``` Після цього можна вручну відправити помилку: ```ts try { riskyFunction(); } catch (error) { Sentry.captureException(error); } ``` Або відправити кастомне повідомлення: ```ts Sentry.captureMessage("User failed checkout step"); ``` Також корисно додавати user context: ```ts Sentry.setUser({ id: user.id, email: user.email, }); ``` Але важливо: не треба відправляти паролі, токени, приватні дані, банківські дані або будь-яку чутливу інформацію. --- **Breadcrumbs** - це події, які сталися перед помилкою. Наприклад: ```txt User opened /checkout Clicked "Pay" POST /api/payment failed with 500 TypeError in CheckoutForm ``` Це дуже допомагає, бо одна лише помилка часто не пояснює, як до неї дійшли. Breadcrumbs відповідають на питання: що користувач робив перед падінням; які API-запити були; які кнопки натискав; які route changes відбувалися; чи були console warnings. Це майже як "чорна скринька" для frontend. --- ## Error boundaries У React помилка в одному компоненті може зламати цілий UI. Для цього існують **Error Boundaries**. Error Boundary - це компонент, який ловить помилки в дочірньому дереві компонентів, логує їх і показує fallback UI замість повністю зламаної сторінки. Опис у [React: Component - Error boundaries](https://react.dev/reference/react/Component#error-boundaries). > У React Error Boundary традиційно реалізують як **class component** - це офіційний API; у цьому репо для іншого коду дотримуйся arrow functions (`AGENTS.md`). Класичний приклад: ```tsx import React from "react"; type State = { hasError: boolean; }; export class ErrorBoundary extends React.Component< React.PropsWithChildren, State > { state: State = { hasError: false, }; static getDerivedStateFromError() { return { hasError: true }; } componentDidCatch(error: Error, info: React.ErrorInfo) { console.error("ErrorBoundary caught:", error, info); // Наприклад: // Sentry.captureException(error); } render() { if (this.state.hasError) { return

Щось пішло не так. Спробуйте оновити сторінку.

; } return this.props.children; } } ``` Використання: ```tsx ``` `componentDidCatch` можна використовувати для логування помилки в error reporting service, а `getDerivedStateFromError` - для показу fallback UI (див. [React: Component](https://react.dev/reference/react/Component#error-boundaries)). --- ## Важливе обмеження Error Boundaries Error Boundaries **не ловлять усе**. Вони добре ловлять помилки під час: рендеру; lifecycle methods; конструкторів class components. Але вони не ловлять напряму: помилки в event handlers; помилки в `setTimeout`; помилки в async-коді; помилки на сервері; помилки всередині самого Error Boundary. Наприклад, це Error Boundary не зловить автоматично: ```tsx ``` Для event handlers треба використовувати `try/catch` або вручну логувати помилку: ```tsx ``` Звичайний `try/catch` не замінює Error Boundaries для помилок під час рендеру; для рендеру потрібні Error Boundaries. Див. [React: error-boundaries (ESLint)](https://react.dev/reference/eslint-plugin-react-hooks/lints/error-boundaries).

Error tracking

Error tracking