При работе с компонентом, когда в коде этого компонента возникает какая-либо ошибка, React отключит все дерево компонентов React, отрисовав ничего . Это способ реагирования на сбои.

Вы не хотите, чтобы ошибки отображались вашим пользователям. React решает показать пустую страницу.

Однако это всего лишь значение по умолчанию. Показывать пустую страницу лишь немного лучше, чем показывать пользователям зашифрованные сообщения, но у вас должен быть лучший способ.

Если вы находитесь в режиме разработки, любая ошибка вызовет подробную трассировку стека, выведенную на консоль браузера DevTools. Однако, конечно, не в производстве, где вы действительно не хотите, чтобы ошибки распечатывались для ваших пользователей.

В процессе работы вы должны перехватывать ошибки и показывать какое-то полезное сообщение человеку, использующему приложение.

Вот где границы ошибок вступают в игру.

С помощью границы ошибок вы изолируете части приложения и обрабатываете ошибки локально.

Граница ошибки – это компонент React, который реализует событие компонент Did Catch() жизненного цикла и обертывает другие компоненты:

class ErrorHandler extends React.Component {
  constructor(props) {
    super(props)
    this.state = { errorOccurred: false }
  }

  componentDidCatch(error, info) {
    this.setState({ errorOccurred: true })
    logErrorToMyService(error, info)
  }

  render() {
    return this.state.errorOccurred ? 
Something went wrong!
 : this.props.children
  }
}

и в компоненте JSX вы используете его следующим образом:

Когда ошибка происходит внутри Какого-либо другого компонента или других дочерних компонентов и во всем поддереве компонентов, которое они содержат, Обработчик ошибок перехватит ее, и вы сможете корректно обработать ошибку.

В приведенном выше случае, вдохновленном официальной документацией React, у нас есть свойство errorOccurred состояние, которое при значении true заставляет интерфейс отображать пользовательский интерфейс обработки ошибок, в противном случае он отображает обычное дерево пользовательского интерфейса приложения.

Внутри компонент сделал Catch() , который получает 2 аргумента, описывающих ошибку, мы также вызываем logErrorToMyService() , который является просто заглушкой для какой-либо функции, которая использует такие службы, как Sentry, Roller, Airbrake или другие, которые могут регистрировать ошибку удобным для вас способом, чтобы вы могли видеть, поэтому вам не нужно полагаться на пользователей, сообщающих вам, что есть ошибка, чтобы заметить проблему.

Оригинал: “https://flaviocopes.com/react-handle-errors/”