0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: компоненты, обработка ошибок, react, javascript-библиотека, componentdidcatch(), границы ошибок</p>
1
<p>Теги: компоненты, обработка ошибок, react, javascript-библиотека, componentdidcatch(), границы ошибок</p>
2
<p>В React 16 появилась замечательная вещь, которая называется<strong>границы ошибок</strong>. Из названия ясно, что речь про компоненты, "отлавливающие" ошибки в дочерних компонентах. Сама идея довольно проста и очень полезна.</p>
2
<p>В React 16 появилась замечательная вещь, которая называется<strong>границы ошибок</strong>. Из названия ясно, что речь про компоненты, "отлавливающие" ошибки в дочерних компонентах. Сама идея довольно проста и очень полезна.</p>
3
<p>Технически всё работает весьма просто: вы создаёте компонент и используете его в качестве родителя каждый раз, когда нужно обработать ошибки. И если в каком-нибудь из дочерних компонентов ошибка обнаружится, для её обработки будут вызваны границы ошибок.</p>
3
<p>Технически всё работает весьма просто: вы создаёте компонент и используете его в качестве родителя каждый раз, когда нужно обработать ошибки. И если в каком-нибудь из дочерних компонентов ошибка обнаружится, для её обработки будут вызваны границы ошибок.</p>
4
<p>Следует лишь учесть, что границы ошибок определяют только<strong>ошибки отображения</strong>. То есть императивные ошибки вроде тех, которые возникают в обработчиках событий, нужно отлавливать блоком try/catch.</p>
4
<p>Следует лишь учесть, что границы ошибок определяют только<strong>ошибки отображения</strong>. То есть императивные ошибки вроде тех, которые возникают в обработчиках событий, нужно отлавливать блоком try/catch.</p>
5
<p>Для логирования информации об ошибках используется componentDidCatch():</p>
5
<p>Для логирования информации об ошибках используется componentDidCatch():</p>
6
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Обновляем состояние, чтобы следующее отображение // показало интерфейс на случай ошибок return { hasError: true }; } componentDidCatch(error, info) { // Также можно залогировать ошибку logErrorToMyService(error, info); } render() { if (this.state.hasError) { // Можно отобразить любой интерфейс на случай ошибок return <h1>Something went wrong.</h1>; } return this.props.children; } }<p>И теперь его можно использовать в качестве обычного компонента:</p>
6
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Обновляем состояние, чтобы следующее отображение // показало интерфейс на случай ошибок return { hasError: true }; } componentDidCatch(error, info) { // Также можно залогировать ошибку logErrorToMyService(error, info); } render() { if (this.state.hasError) { // Можно отобразить любой интерфейс на случай ошибок return <h1>Something went wrong.</h1>; } return this.props.children; } }<p>И теперь его можно использовать в качестве обычного компонента:</p>
7
<ErrorBoundary> <MyWidget /> </ErrorBoundary><p>Правда, если непосредственно в компоненте ErrorBoundary появится ошибка, он её обработать не сможет.</p>
7
<ErrorBoundary> <MyWidget /> </ErrorBoundary><p>Правда, если непосредственно в компоненте ErrorBoundary появится ошибка, он её обработать не сможет.</p>
8
<p>Похожая функция была в React 15 и называлась unstable_handleError(). Теперь данный метод уже не работает, поэтому, начиная с 16-й версии, надо использовать componentDidCatch().</p>
8
<p>Похожая функция была в React 15 и называлась unstable_handleError(). Теперь данный метод уже не работает, поэтому, начиная с 16-й версии, надо использовать componentDidCatch().</p>
9
<p><a>Источник</a></p>
9
<p><a>Источник</a></p>
10
10