Обработка ошибок в рекомендациях React

Ответ 1

React 16 представляет новую концепцию, называемую "граница ошибок", для обработки ошибок, возникающих внутри компонентов React, без нарушения целостности всего приложения.

Границами ошибок являются компоненты React, которые перехватывают ошибки JavaScript в любом месте своего дочернего дерева компонентов, регистрируют эти ошибки и отображают резервный интерфейс вместо сбойного дерева компонентов.

Компоненты границ ошибок стали возможными благодаря новому методу жизненного цикла componentDidCatch(error, info). В отличие от других методов жизненного цикла, он будет вызываться, только если возникла какая-либо ошибка во время рендеринга, в методах жизненного цикла или в конструкторах какого-либо дочернего (включая все дочерние) компонента компонента.

В коде компонент Error Boundary будет выглядеть примерно так:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Error occurred!</h1>;
    }
    return this.props.children;
  }
}

Мы можем использовать этот компонент Error Boundary как обычный компонент в нашем коде.

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

Теперь, если MyComponent генерирует какую-либо ошибку JavaScript во время рендеринга, в методе жизненного цикла или при создании, componentDidCatch Error Boundary сработает и изменит состояние, чтобы показать, что Error occurred! сообщение вместо сломанного MyComponent.

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

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

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

Ответ 2

Обычно вы никогда не должны иметь что-то, что могло бы вызвать ошибку js. если его ожидание на данных с сервера затем не отображает его. Вдобавок к этому у вас будет какая-то форма уведомления/сообщения, показывающая, что она еще не загружена.

Так, например, если у вас есть компонент, который будет отображать материал, вы можете условно отображать компоненты.

ака

render(){
  let {serverData} = this.props;
  return (
    <div className="something">
      {Boolean(serverData) && serverData.length > 0 
        ? <MyComponent data={serverData} />
        : <LoadingComponent />
      }
    </div>
  )
}

Теперь, это просто рудиментарный пример, чтобы описать, о чем я говорю. Исключения Javascript нарушают одностраничное приложение, и вы никогда не должны иметь. Если что-то недействительно перенаправляется на страницу 404. Если компонент нуждается в данных, то подождите, пока данные его будут отображать.

Еще одна важная вещь: если вы пытаетесь получить доступ к чему-то вроде this.props.myData.obj.something.somethingelse, возможно, что этот путь объекта всегда будет там. вам необходимо убедиться, что каждый из них не является undefined или null. Я использую lodash, у которого есть замечательная функция для этой точной вещи.

_.get(this.props, 'myData.obj.something.somethingelse')` 

который возвращает undefined, если какой-либо из этих ключей не существует или undefined/не объект

Я думаю, что мораль этой истории заключается в том, что вы должны быть активными в своем коде, чтобы захватывать вещи, которые могут сломаться, и никогда не предполагать тип переменной, а также его данные будут:)

Ответ 3

Для React v16 и выше рекомендуется использовать границы ошибок. Эта страница (краткая и хорошая) от команды React объясняет эту функцию: https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html. Он также содержит ссылку на демо-версию codepen.