Полное руководство по границе ошибки React

Напишите свою собственную границу ошибки или используйте реагирующую-ошибочную-границу

Проблема

Во всем программном обеспечении есть ошибки; это нормально.

Ошибки приложения React могут быть ошибками JavaScript/TypeScript, сбоем ленивой загрузки или любыми другими ошибками.

При возникновении ошибки приложение React может быть удалено с экрана браузера. Мы настроили Create React App, чтобы показать, как это происходит.

Следующая команда создает проект React:

% yarn create react-app react-error-boundary-app --template typescript
% cd react-error-boundary-app

Измените src/App.tsx, чтобы ввести ошибку:

import logo from './logo.svg';
import './App.css';

function App(props: any) {
  props.map((a: any) => a); // this throws the error that props.map is not a function
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Выполните yarn start, и мы увидим ошибки времени выполнения в браузере. Следующий экран с ошибкой виден только в режиме разработки во время горячей перезагрузки. Это реакция-оверлей-оверлей, используемая приложением Create React.

Ошибки, не обнаруженные границами ошибок, могут размонтировать дерево компонентов React. Закрыв оверлей кнопкой X в правом верхнем углу, мы увидим пустой экран.

react-error-overlay можно отключить в конфигурации Webpack в webpack.config.js:

module.exports = {
  //...
  devServer: {
    overlay: false, // turn off react-error-overlay with one flag

    // or turn off react-error-overlay with the more granual setting
    // overlay: {
      // errors: false,
      // warnings: false,
      // runtimeErrors…