{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧭 Что такое Error Boundary (коротко)"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Error Boundary"},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"bold"}],"text":"React-компонент"},{"type":"text","text":", который:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"“ловит” ошибки в "},{"type":"text","marks":[{"type":"bold"}],"text":"дочерних компонентах"},{"type":"text","text":" во время рендера или в lifecycle-методах,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"и показывает "},{"type":"text","marks":[{"type":"bold"}],"text":"fallback-UI"},{"type":"text","text":", чтобы не “уронилось” всё приложение."}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Шаг 1. Создай классовый компонент"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Error Boundary можно написать "},{"type":"text","marks":[{"type":"bold"}],"text":"только как классовый компонент"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"потому что он использует специальные методы жизненного цикла:"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"code"}],"text":"getDerivedStateFromError"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"componentDidCatch"},{"type":"text","text":"."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import React from \"react\";\n\nclass ErrorBoundary extends React.Component<\n { fallback?: React.ReactNode },\n { hasError: boolean }\n> {\n constructor(props) {\n super(props);\n this.state = { hasError: false };\n }\n\n // 🔹 Обновляем state, чтобы показать fallback при ошибке\n static getDerivedStateFromError(error: Error) {\n return { hasError: true };\n }\n\n // 🔹 Здесь можно логировать ошибку (в консоль, Sentry, GlitchTip и т.п.)\n componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n console.error(\"Ошибка в компоненте:\", error, errorInfo);\n }\n\n render() {\n if (this.state.hasError) {\n // 🔹 Показываем запасной UI\n return this.props.fallback ??

Что-то пошло не так 😞

;\n }\n\n // 🔹 Если ошибки нет — рендерим детей\n return this.props.children;\n }\n}\n\nexport default ErrorBoundary;\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Шаг 2. Оберни проблемную часть приложения"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import ErrorBoundary from \"./ErrorBoundary\";\nimport ProblemComponent from \"./ProblemComponent\";\n\nfunction App() {\n return (\n

Моё приложение

\n\n Ошибка загрузки 😢}>\n \n \n

\n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если "},{"type":"text","marks":[{"type":"code"}],"text":"ProblemComponent"},{"type":"text","text":" выкинет ошибку —"},{"type":"hardBreak"},{"type":"text","text":"React поймает её и заменит содержимое на "},{"type":"text","marks":[{"type":"code"}],"text":"fallback"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Шаг 3. Пример компонента с ошибкой"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function ProblemComponent() {\n throw new Error(\"Упс! Что-то пошло не так!\");\n return

Это не отрендерится

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Теперь, вместо “белого экрана”, ты увидишь:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Ошибка загрузки 😢\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"и в консоли появится лог:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Ошибка в компоненте: Error: Упс! Что-то пошло не так!\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 Шаг 4. Добавь отчёт об ошибках"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"componentDidCatch(error, info) {\n // пример интеграции с GlitchTip / Sentry\n sendErrorToGlitchTip({\n message: error.message,\n stack: error.stack,\n componentStack: info.componentStack,\n });\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧱 Шаг 5. Разделяй зоны ответственности"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Лучше ставить "},{"type":"text","marks":[{"type":"bold"}],"text":"несколько Error Boundaries"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"чтобы ошибка в одной зоне не ломала всё приложение:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n

\n\n Ошибка в контенте}>\n \n \n\n Ошибка в футере}>\n

Как создать Error Boundary компонент вручную?

Комментарии