На самом деле изменение в обработке ошибок весьма существенно, потому что теперь оно вызовет процесс размонтирования дерева компонентов, если там ошибка не была обработана. Так что будьте очень осторожны при переносе кода на новейшую версию - вы можете столкнуться с некоторыми сюрпризами с ошибками :) Мы все пишем тесты (не так ли?), Думаем, что наше приложение не содержит ошибок, но иногда они просто появляются. Именно так это чаще всего работает в процессе разработки программного обеспечения.

Итак, что означает, что компонент, в котором ошибка не была обработана должным образом, будет размонтирован? Он просто не будет отображаться в представлении. Команда React решила решить эту проблему только так, а не иначе. В их блоге есть пояснения, поэтому выделим главное сообщение:

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

Что нам нужно, чтобы корректно обрабатывать ошибки в React 16? Всего две вещи:

1. Компонент класса, который будет служить границей ошибок
2. Специальный метод - componentDidCatch () - внутри класса.

Затем нам просто нужно обернуть его вокруг некоторого подверженного ошибкам компонента. Звучит отлично? Давайте посмотрим на пример реализации:

Компонент Граница ошибок:

class YouCanRunButCantHide extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   errorFound: false
  };
 }
componentDidCatch(error, info) {
  this.setState({
   errorFound: true
  });
  console.log('error: ', error);
  console.log('info: ', info);
 }
render() {
  if (this.state.errorFound) {
   return <p>Error caught!</p>;
  }
return this.props.children;
 }
}

Состояние errorFound изначально имеет значение false и изменяется на true в методе componentDidCatch (). Предоставляется доступ к самой ошибке и некоторой информации о ней внутри метода. В случае ошибок в компоненте будет отображаться текст «Ошибка обнаружена!».

Компонент с ошибкой:

const ErrorSmuggler = ({ errorGuy: { name, age, profession } }) => {
 return (
  <div className="error-smuggler">
   {`This is ${name}, age ${age} and his profession is ${profesion}`}
  </div>
 )
};
ErrorSmuggler.propTypes = {
 errorGuy: PropTypes.shape({
  name: PropTypes.string,
  age: PropTypes.number,
  profession: PropTypes.string
 })
};
ErrorSmuggler.defaultProps = {
 errorGuy: {
  name: 'Joe',
  age: 25,
  profession: "error smuggler"
 }
};

Здесь я использовал фиктивный (не имеющий состояния / функциональный) компонент и намеренно неправильно написал опору профессии (вы можете заметить разницу?). Сделана ошибка, поэтому ее можно корректно обработать с помощью YouCanRunButCantHide Error Boundary
, созданного нами ранее. Деструктуризация и Типы свойств используются как хорошие методы, которым я рекомендую вам следовать.

Обертка:

const ErrorSmugglerWrapper = () => (
 <YouCanRunButCantHide>
  <ErrorSmuggler />
 </YouCanRunButCantHide>
);
export default ErrorSmugglerWrapper;

Здесь особо нечего сказать. Мы просто оборачиваем наш испорченный компонент компонентом Error Boundary.

Есть некоторые проблемы CORS с ошибками, с которыми сталкиваются люди. Вы можете получить некоторую помощь, прочитав эту статью.