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

При создании приложений ошибки неизбежны. Они могут поступать из API, пользовательского интерфейса или из других источников.

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

Error Boundary — один из таких способов обработки ошибок в React.

---

Как помогает граница ошибок?

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

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

Это привело к очень плохому UX.

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

---

Как использовать границу ошибок?

В React v16 официально представлена ​​граница ошибок.

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

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

Вот как его рекомендует использовать документация React,

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}

---

В чем проблема с границей ошибок React?

Он не может обнаружить ошибки, возникающие в,

• Обработчики событий (эти ошибки необходимо обрабатывать с помощью блоков try-catch)
• Асинхронный код (API, setTimeout, requestAnimationFrame и т. д.)
• Рендеринг на стороне сервера
• Ошибка, возникающая в самой Error Boundary
• Не работает с функциональными компонентами. Хотя мы можем заставить его работать, внеся несколько изменений в код.
• Внутри него нельзя использовать хуки.

---

Какое решение?

Существует пакет npm под названием response-error-boundary, который представляет собой оболочку поверх традиционного компонента Error Boundary.

Используя этот пакет, мы можем решить все проблемы, возникающие в традиционном компоненте Error Boundary.

---

Как это использовать?

Вы можете обернуть все приложение или отдельные компоненты .

Детализация реализации зависит от вас.

Давайте разберемся, как этим пользоваться.

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

const App = () => {
return Something went wrong}>
/* rest of your component */

}

Это простейший пример использования ErrorBoundary. В этой библиотеке есть еще кое-что.

---

Понимание API границы реагирования на ошибки

Давайте попробуем разобраться в API с различными сценариями.

1. Я хочу показать общий резервный интерфейс для ошибок в приложении

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

 const App = () => {
 return Something went wrong}>
 /* rest of your component */
 
 }

2. Я хочу показать конкретные сведения об ошибке в моем резервном компоненте

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

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

       
Something went wrong:
       
{error.message}
     
   );
 }

 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

); } const App = () => { вернуть { // Сбрасываем состояние вашего приложения, чтобы ошибка больше не повторялась }} > /* остальная часть вашего компонента */ }

Вместо резервного варианта или FallbackRender вы также можете использовать компонент React.

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

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }

 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

); } const App = () => { вернуть { // Сбрасываем состояние вашего приложения, чтобы ошибка больше не повторялась }} > /* остальная часть вашего компонента */ }

3. Я хочу регистрировать свои ошибки

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

 const logError = (error: Error, info: { componentStack: string }) => {
   // Do something with the error, e.g. log to an external API
 };

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }
 // You can use fallback / fallbackRender / FallbackComponent anything
 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

); } // Вы можете использовать Fallback/fallbackRender/FallbackComponent что угодно const App = () => { вернуть { // Сбрасываем состояние вашего приложения, чтобы ошибка больше не повторялась }} > /* остальная часть вашего компонента */ }

4. Я хочу отловить ошибки в обработчиках событий и асинхронном коде

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

 function Example() {
   const { showBoundary } = useErrorBoundary();
   const getGreeting = async(name) => {
     try {
         const response = await fetchGreeting(name);
         // rest of your code
     } catch(error){
          // Show error boundary
         showBoundary(error);
     }
   }
   useEffect(() => {
    getGreeting()
   });

   return 
 }

---

Несколько ошибок

ErrorBoundary — клиентский компонент. Вы можете передавать ему только те реквизиты, которые можно сериализовать, или использовать в файлах, у которых есть «использовать клиент»; директива.

1. Что такое сериализуемый реквизит?

Свойство Serilzable означает, что его можно преобразовать в поток байтов таким образом, чтобы поток байтов можно было преобразовать обратно в исходный реквизит.

Обычным способом сделать это в Javascript является JSON.stringify() и JSON.parse().

2. Как использовать «использовать клиент»; директива?

Просто укажите это в начале файла

"use client";

---

Вы можете использовать еще несколько вариантов. Но этой статьи достаточно, чтобы вы могли начать.

Ознакомьтесь с полной документацией здесь.

Пожалуйста, дайте мне знать в комментариях, если это было для вас полезно.

Удачного программирования!