Frontender Libs - обзор библиотек JS / CSS

Управление ошибками в React

В React 19 появились хуки onCaughtError и onUncaughtError для детального контроля над ошибками в жизненном цикле компонентов.

onCaughtError применяется в компонентах-границах ошибок для локальной реакции.

Пример:

class ErrorBoundary extends React.Component {
  onCaughtError(error, errorInfo) {
    this.setState({ hasError: true });
    logErrorToService(error, errorInfo);
  }

  render() {
    return this.state.hasError ? <h1>Что-то пошло не так.</h1> : this.props.children;
  }
}

onUncaughtError реагирует на ошибки, не пойманные границами ошибок, обеспечивая реакцию на уровне приложения на критические сбои.

Пример:

function App() {
  return (
    <React.onUncaughtError>
      {({ error }) => <div><h1>Непредвиденная ошибка:</h1><p>{error.message}</p></div>}
    </React.onUncaughtError>
  );
}

👉 @sWebDev

🔥5👍1

www.tgoop.com/sWebDev/2861

1.85K viewsMay 6, 2024 at 07:43

Управление ошибками в React

В React 19 появились хуки onCaughtError и onUncaughtError для детального контроля над ошибками в жизненном цикле компонентов.

onCaughtError применяется в компонентах-границах ошибок для локальной реакции.

Пример:

class ErrorBoundary extends React.Component {
  onCaughtError(error, errorInfo) {
    this.setState({ hasError: true });
    logErrorToService(error, errorInfo);
  }

  render() {
    return this.state.hasError ? <h1>Что-то пошло не так.</h1> : this.props.children;
  }
}

function App() {
  return (
    <React.onUncaughtError>
      {({ error }) => <div><h1>Непредвиденная ошибка:</h1><p>{error.message}</p></div>}
    </React.onUncaughtError>
  );
}

BY Frontender Libs - обзор библиотек JS / CSS