Блог

Я реализовал один пример библиотеки react-error-boundary npm. Но, похоже, это не сработало должным образом.

 import * as React from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: 'red' }}>{error.message}</pre>
    </div>
  );
}

function Greeting({ subject }) {
  return <div>Hello {subject.toUpperCase()}</div>;
}

function Farewell({ subject }) {
  return <div>Goodbye {subject.toUpperCase()}</div>;
}

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <Greeting />
      <Farewell />
    </ErrorBoundary>
  );
}

export default App;

 

Сообщение об ошибке показано ниже:

Кажется, что ErrorFallback компонент не отображается. Я думаю, что я делаю что-то не так, что нарушает код.

Это предполагаемое поведение границы ошибок во время разработки. Нажмите кнопку закрыть (X) в правом верхнем углу, чтобы скрыть стек ошибок, и вы увидите резервный вариант границы ошибки

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