The above error occurred in the

The above error occurred in the <Lesson> component:
    in Lesson (created by Calendar)
    in tr (created by Calendar)
    in tbody (created by Calendar)
    in table (created by Calendar)
    in div (created by Calendar)
    in Calendar

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (react-dom.development.js:626)
    at invokeGuardedCallback (react-dom.development.js:476)
    at renderRoot (react-dom.development.js:10908)
    at performWorkOnRoot (react-dom.development.js:11556)
    at performWork (react-dom.development.js:11509)
    at requestWork (react-dom.development.js:11420)
    at scheduleWorkImpl (react-dom.development.js:11274)
    at scheduleWork (react-dom.development.js:11231)
    at scheduleTopLevelUpdate (react-dom.development.js:11735)
    at Object.updateContainer (react-dom.development.js:11773)

Действия по воспроизведению

1. Рендеринг <input>hello</input>для запуска ошибки «input is the void element tag»

Ссылка на пример кода: https://codesandbox.io/s/cocky-matan-ydmys

Текущее поведение

Появляются две строки журнала:

1. “Вышеупомянутая ошибка произошла в компоненте <input>”
2. “input является пустым тегом элемента”

Ожидаемое поведение

Они должны быть в другом порядке:

1. “input является пустым тегом элемента”
2. “Вышеупомянутая ошибка произошла в компоненте <input>”

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

 прошлом ошибки JavaScript внутри компонентов искажали внутреннее состояние React и заставляли его выдавать загадочные ошибки при следующем рендеринге. Эти ошибки всегда были вызваны более ранней ошибкой в ​​коде приложения, но React не предоставлял способ изящной обработки их в компонентах и ​​не мог восстановиться после них.

Введение границ ошибок

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

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

Примечание

Границы ошибок не перехватывают ошибки для:

• Обработчики событий ( узнать больше )
• Асинхронный код (например , setTimeoutили requestAnimationFrameобратные вызовы)
• Рендеринг на стороне сервера
• Ошибки, возникающие в самой границе ошибки (а не в ее дочерних элементах)

Компонент класса становится границей ошибки, если он определяет один (или оба) из методов жизненного цикла static getDerivedStateFromError()или componentDidCatch(). Используется static getDerivedStateFromError()для отрисовки резервного пользовательского интерфейса после возникновения ошибки. Используйте componentDidCatch()для регистрации информации об ошибках.

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

  static getDerivedStateFromError(error) {    // Update state so the next render will show the fallback UI.    return { hasError: true };  }
  componentDidCatch(error, errorInfo) {    // You can also log the error to an error reporting service    logErrorToMyService(error, errorInfo);  }
  render() {
    if (this.state.hasError) {      // You can render any custom fallback UI      return <h1>Something went wrong.</h1>;    }
    return this.props.children; 
  }
}

Затем вы можете использовать его как обычный компонент:

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Границы ошибок работают как catch {}блок JavaScript, но для компонентов. Только компоненты класса могут быть границами ошибки. На практике в большинстве случаев вам потребуется один раз объявить компонент границы ошибки и использовать его во всем приложении.

Обратите внимание, что границы ошибок улавливают ошибки только в компонентах, расположенных ниже них в дереве . Граница ошибки не может поймать ошибку внутри себя. Если границе ошибки не удается отобразить сообщение об ошибке, ошибка будет распространяться на ближайшую границу ошибки над ней. Это тоже похоже на то, как catch {}блок работает в JavaScript.