Как спроектировать хороший пользовательский интерфейс, когда в вашем приложении React возникают ошибки (обработка ошибок…

React-error-boundary — это инструмент, упрощающий процесс реализации границ ошибок в React. Он предоставляет предварительно созданный компонент ErrorBoundary, который разработчики могут использовать для переноса компонентов в свой код, где могут возникать ошибки. Это позволяет им настраивать поведение своей границы ошибок без необходимости создавать ее с нуля.

Базовый пример границы ошибки

import { ErrorBoundary } from "react-error-boundary";

function fallbackRender({ error, resetErrorBoundary }) {
  // Call resetErrorBoundary() to reset t
  // the error boundary and retry the render.

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

<ErrorBoundary
  fallbackRender={fallbackRender}
  onReset={(details) => {
    // Reset the state of your app so the error doesn't happen again
  }}
>
  <ApplicationComponents />
</ErrorBoundary>;

Он также предоставляет порт FallbackComponet.

import { ErrorBoundary } from "react-error-boundary";

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

<ErrorBoundary
  FallbackComponent={Fallback}
  onReset={(details) => {
    // Reset the state of your app so the error doesn't happen again
  }}
>
  <ApplicationComponents />
</ErrorBoundary>;

Использование ошибки Boundary hook

Библиотека react-error-boundary имеет дополнительное преимущество, позволяя разработчикам отлавливать ошибки, которые обычно не обнаруживаются обычными границами ошибок React. С помощью этой библиотеки разработчики могут реализовать границы ошибок для обработки ошибок, которые могут возникнуть во время запросов API, обработчиков событий и других областей их кода, где возможны ошибки.

Чтобы использовать хук useErrorHandler, мы пишем , handleError и передаем в него нашу пользовательскую ошибку.

const MyComponent = () => {
  const handleError = useErrorHandler();

  const handleClick = () => {
    try {
      // some code that may throw an error
    } catch (error) {
      handleError(error);
    }
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
};

Было бы лучше, если бы вы утомили его различными настройками, которые помогли бы улучшить понимание ErrorBoundary.

Если вы хотите быть в курсе, подписывайтесь, хлопайте, ставьте лайки и делитесь новостями. Здоровья!