Error boundaries — это React-компоненты, которые ловят JavaScript-ошибки, возникающие в их дочерних компонентах, логируют эти ошибки и показывают fallback UI вместо того, чтобы сломать всё приложение.
Error boundaries — это class-компоненты, которые реализуют один или оба из этих методов жизненного цикла:
static getDerivedStateFromError() – обновляет state, чтобы запустить рендеринг fallback UIcomponentDidCatch() – логирует информацию об ошибке во внешние сервисыclass ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
logErrorToService(error, info);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
Оберни компоненты, которые ты хочешь защитить, в error boundary:
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
try/catch для нихcomponentDidCatch(), чтобы логировать ошибки для мониторинга и отладкиError boundaries можно реализовать только как классовые компоненты, потому что функциональные компоненты не поддерживают методы жизненного цикла getDerivedStateFromError() и componentDidCatch().
Новый — ещё не проверен сообществом
Вы