Как обрабатывать ошибки в React With React Error Boundary

Введение в пакет response-error-boundary с примерами

Ошибки - это то, с чем вы сталкиваетесь каждый день при программировании. Некоторые можно решить просто, а на выяснение других уходит часы.

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

Что такое границы ошибки?

Согласно официальной документации React,

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

По сути, любые ошибки JavaScript, возникающие в жизненном цикле компонента, можно отловить с помощью границ ошибок. Затем вместо прерывания работы приложения React отобразит для вас резервный компонент пользовательского интерфейса.

Концепция границ ошибок все еще довольно нова, поскольку она была выпущена в React 16. До этого выпуска не существовало хорошего способа изящной обработки ошибок.

Пример

Продемонстрируем ошибку на простом примере. Мы создадим компонент Counter с кнопкой увеличения и уменьшения. Если счетчик равен 5, мы выдадим ошибку.

Мы отобразим этот компонент Counter в нашем компоненте App. В компоненте App мы объявим переменную состояния count.

Если мы запустим наше приложение, у нас будет счетчик с двумя кнопками для увеличения и уменьшения. Если наш счетчик равен 5, мы получим ошибку, которую добавили в наш компонент Counter.

Как видно из сообщения внизу рисунка, «Этот экран виден только в разработке. Он не появится, если приложение выйдет из строя в производственной среде ». Если мы закроем этот экран, останется пустой экран. Единственный способ сбросить состояние и повторно отрисовать наш компонент - это полностью обновить страницу.

Компоненты класса для обработки ошибок

Официальная документация рекомендует использовать компонент класса для создания границы ошибки. Это можно сделать с помощью static getDerivedStateFromError() или componentDidCatch().

Вот простой пример, который они приводят.

Честно говоря, я не писал компонент класса с тех пор, как впервые начал изучать React. Я уверен, что это решение отлично работает, но должен быть другой способ.

реакция-ошибка-граница

Быстрый поиск в Google приводит нас к пакету реакция-ошибка-граница. На npm еженедельно загружается более 600 000 загрузок, а на GitHub сейчас 2,3 тысячи звезд.

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

Чтобы использовать этот компонент, все, что вам нужно сделать, это импортировать его из библиотеки и обернуть компоненты, которые могут вызвать ошибку.

import { ErrorBoundary } from 'react-error-boundary';
const errorComponent = (
  <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => {
// reset the state of the app
    }}
  >
    <Component that may cause an error />
  </ErrorBoundary>
);

Компонент ErrorBoundary принимает FallbackComponent опору. Компонент, который вы передаете ему, будет отображаться в случае ошибки. Вы также можете передать функцию обратного вызова onReset. Эта функция будет вызвана до того, как компонент ErrorBoundary сбросит свое внутреннее состояние. В этой функции вы захотите сделать что-то, чтобы сбросить состояние вашего приложения, чтобы ошибка больше не повторялась.

Теперь вернемся к нашему примеру компонента Counter и поймем эту ошибку с помощью пакета response-error-boundary.

Мы начнем с создания запасного компонента для рендеринга в случае какой-либо ошибки. Этому компоненту будет передано свойство error и свойство resetErrorBoundary из компонента Error Boundary. Мы отобразим сообщение об ошибке и добавим кнопку, которая будет вызывать resetErrorBoundary.

const ErrorFallback = ({ error, resetErrorBoundary }) => {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
};

Затем мы обернем наш компонент Counter границей ошибки и передадим FallbackComponent prop и onReset prop. В onReset мы установим состояние переменной count равным 0.

const App = () => {
  const [count, setCount] = useState(0);
  
  return (
    <div className="App">
      <ErrorBoundary
        FallbackComponent={ErrorFallback}
        onReset={() => setCount(0)}
      >
        <Counter count={count} setCount={setCount} /
      </ErrorBoundary>
    </div>
  );
};

Компонент приложения теперь будет выглядеть так.

Если мы увеличим наш счетчик и он станет равным 5, мы увидим тот же экран ошибки, что и раньше. Однако, если мы закроем этот экран, мы увидим созданный нами ErrorFallback компонент.

Если мы нажмем кнопку «Повторить попытку», состояние нашего счетчика будет сброшено до 0, и наше приложение выполнит повторную визуализацию.

Заключение

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

Спасибо за прочтение! Надеюсь, вы узнали один способ обрабатывать ошибки в своих приложениях React. Пакет response-error-граница действительно полезен, и я считаю его намного чище, чем использование жизни компонента класса, рекомендованного в документации. Попробуйте в следующем приложении!

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