{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 Короткий ответ:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"try...catch"},{"type":"text","text":" не ловит ошибки внутри JSX,"},{"type":"hardBreak"},{"type":"text","text":"потому что "},{"type":"text","marks":[{"type":"bold"}],"text":"JSX — это не выполняемый код в момент написания"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а "},{"type":"text","marks":[{"type":"bold"}],"text":"описание UI"},{"type":"text","text":", которое React "},{"type":"text","marks":[{"type":"bold"}],"text":"обрабатывает асинхронно и вне вашего стека вызовов"},{"type":"text","text":"."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Что происходит под капотом"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда ты пишешь что-то вроде:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function App() {\n try {\n return (\n

\n \n

\n );\n } catch (e) {\n console.error('Ошибка:', e);\n return ;\n }\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"кажется, будто "},{"type":"text","marks":[{"type":"code"}],"text":"try...catch"},{"type":"text","text":" должен поймать любую ошибку внутри "},{"type":"text","marks":[{"type":"code"}],"text":"UserCard"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Но React работает "},{"type":"text","marks":[{"type":"bold"}],"text":"не напрямую"},{"type":"text","text":": JSX превращается в "},{"type":"text","marks":[{"type":"bold"}],"text":"объект описания дерева элементов"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а "},{"type":"text","marks":[{"type":"bold"}],"text":"рендеринг и выполнение компонентов происходят позже — в самом React"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"уже "},{"type":"text","marks":[{"type":"bold"}],"text":"в другом стеке вызовов"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📦 Визуально"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1️⃣ Ты вызываешь "},{"type":"text","marks":[{"type":"code"}],"text":"App()"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"2️⃣ React вызывает твой компонент → получает объект дерева:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"{ type: \"div\", props: { children: } }\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"3️⃣ Затем React "},{"type":"text","marks":[{"type":"bold"}],"text":"сам"},{"type":"text","text":" вызывает "},{"type":"text","marks":[{"type":"code"}],"text":"UserCard()"},{"type":"text","text":" позже (внутри своего алгоритма Fiber)."},{"type":"hardBreak"},{"type":"text","text":"Если в "},{"type":"text","marks":[{"type":"code"}],"text":"UserCard()"},{"type":"text","text":" будет ошибка → она выбрасывается "},{"type":"text","marks":[{"type":"bold"}],"text":"внутри React"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а не в том месте, где стоял твой "},{"type":"text","marks":[{"type":"code"}],"text":"try...catch"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Поэтому:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"try {\n // <-- это не вызов функции, а просто описание\n} catch (e) {\n // ❌ сюда не попадёт\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"ничего не перехватывает, потому что ошибка возникнет "},{"type":"text","marks":[{"type":"bold"}],"text":"позже"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"во время работы React, а не в момент “чтения” JSX."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Аналогия"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Представь, что JSX — это не “исполнение”, а “чертёж интерфейса”."},{"type":"hardBreak"},{"type":"text","text":"Ты описал, "},{"type":"text","marks":[{"type":"bold"}],"text":"что"},{"type":"text","text":" нужно нарисовать, но рисует React “в фоне”."},{"type":"hardBreak"},{"type":"text","text":"Если в процессе “рисования” произойдёт ошибка —"},{"type":"hardBreak"},{"type":"text","text":"твой "},{"type":"text","marks":[{"type":"code"}],"text":"try...catch"},{"type":"text","text":" об этом "},{"type":"text","marks":[{"type":"bold"}],"text":"не узнает"},{"type":"text","text":", потому что код уже давно вышел из твоей функции."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📉 Пример ошибки"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function UserCard({ user }) {\n return

{user.name}

; // user === undefined → ошибка\n}\n\nfunction App() {\n try {\n return ; // ❌ try не поймает\n } catch (e) {\n console.error(\"Ошибка в рендере!\", e);\n return

Ошибка!

;\n }\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ React сам “поймает” ошибку и пробросит её вверх —"},{"type":"hardBreak"},{"type":"text","text":"если рядом "},{"type":"text","marks":[{"type":"bold"}],"text":"Error Boundary"},{"type":"text","text":", он покажет fallback."},{"type":"hardBreak"},{"type":"text","text":"Если нет — приложение “упадёт” (white screen)."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 Что действительно ловит такие ошибки"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✅ "},{"type":"text","marks":[{"type":"bold"}],"text":"1. Error Boundary"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Классовый компонент с "},{"type":"text","marks":[{"type":"code"}],"text":"componentDidCatch"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"code"}],"text":"getDerivedStateFromError"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"class ErrorBoundary extends React.Component {\n state = { hasError: false };\n static getDerivedStateFromError() {\n return { hasError: true };\n }\n componentDidCatch(error, info) {\n console.error('Ошибка в компоненте:', error);\n }\n render() {\n return this.state.hasError ?

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

: this.props.children;\n }\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Использование:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n \n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Теперь ошибка внутри "},{"type":"text","marks":[{"type":"code"}],"text":"UserCard"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"bold"}],"text":"перехватится"},{"type":"text","text":", и UI не упадёт."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✅ "},{"type":"text","marks":[{"type":"bold"}],"text":"2. "},{"type":"text","marks":[{"type":"code"}],"text":"try...catch"},{"type":"text","marks":[{"type":"bold"}],"text":" в событиях или эффектах"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"try...catch"},{"type":"text","text":" работает, если ошибка выбрасывается "},{"type":"text","marks":[{"type":"bold"}],"text":"в твоём синхронном стеке"},{"type":"text","text":" —"},{"type":"hardBreak"},{"type":"text","text":"например, в "},{"type":"text","marks":[{"type":"code"}],"text":"onClick"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":"."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":" {\n try {\n throw new Error(\"Ошибка в обработчике\");\n } catch (e) {\n console.error(\"Поймана:\", e);\n }\n }}\n>\n Нажми\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Здесь ошибка будет поймана, потому что код выполняется напрямую в момент клика."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✅ "},{"type":"text","marks":[{"type":"bold"}],"text":"3. Асинхронные ошибки ("},{"type":"text","marks":[{"type":"code"}],"text":"try...catch"},{"type":"text","marks":[{"type":"bold"}],"text":" + async/await)"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"useEffect(() => {\n async function loadData() {\n try {\n const res = await fetch('/api/data');\n const json = await res.json();\n setData(json);\n } catch (e) {\n console.error(\"Ошибка при загрузке:\", e);\n }\n }\n loadData();\n}, []);\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Здесь всё работает как обычно: ошибка ловится, потому что она выбрасывается внутри твоего контекста выполнения."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚠️ Почему нельзя просто оборачивать всё в try...catch"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Потому что React "},{"type":"text","marks":[{"type":"bold"}],"text":"управляет порядком вызовов компонентов"},{"type":"text","text":" сам,"},{"type":"hardBreak"},{"type":"text","text":"и может рендерить компоненты:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"асинхронно (в concurrent режиме);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"дважды (в Strict Mode);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"с отложенным выполнением."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"try...catch"},{"type":"text","text":" просто не имеет доступа к этим стекам выполнения."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧭 Итог:"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сценарий"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ловится "},{"type":"text","marks":[{"type":"code"}],"text":"try...catch"},{"type":"text","text":"?"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Почему"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ошибка в JSX ("},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":")"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Рендеринг управляется React"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ошибка в "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Код выполняется в твоём стеке"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ошибка в "},{"type":"text","marks":[{"type":"code"}],"text":"onClick"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Обработчик — обычная функция"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ошибка в асинхронном коде (await)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ (если обёрнут)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"try...catch"},{"type":"text","text":" работает с "},{"type":"text","marks":[{"type":"code"}],"text":"await"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ошибка в компоненте без Error Boundary"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React размонтирует дерево"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧯 Вывод:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"try...catch"},{"type":"text","text":" не ловит ошибки внутри JSX,"},{"type":"hardBreak"},{"type":"text","text":"потому что рендеринг компонентов выполняется "},{"type":"text","marks":[{"type":"bold"}],"text":"вне вашего стека вызовов"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"внутри самого React."}]},{"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":"это “React-версия try/catch” на уровне UI."}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Почему try...catch не ловит ошибки внутри JSX?

Комментарии