Error boundaries специально разработаны, чтобы ловить ошибки во время фазы рендеринга и в методах жизненного цикла. Они не ловят ошибки, которые происходят внутри обработчиков событий.
Критическое отличие в том, когда происходят ошибки:
Так как обработчики событий выполняются после завершения рендеринга, React уже знает, что выводить на экран. Если ошибка выбросится в обработчике события, UI остаётся стабильным и функциональным.
Для обработки ошибок в обработчиках событий используй обычный try/catch в JavaScript:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { error: null };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
try {
// Сделай что-то, что может выбросить ошибку
} catch (error) {
this.setState({ error });
}
}
render() {
if (this.state.error) {
return <h1>Поймали ошибку.</h1>;
}
return <button onClick={this.handleClick}>Нажми меня</button>;
}
}
try/catch внутри обработчиков событийError boundaries могут перехватывать ошибки, выброшенные в обработчиках событий, потому что они оборачивают дерево компонентов и перехватывают все runtime ошибки.
Новый — ещё не проверен сообществом
Вы