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

Содержание

Что такое границы ошибок?
Давайте рассмотрим встроенную границу ошибок React.
Приведем код
Встроенный способ
Проверьте живой код:
Лучший способ определения границ ошибок для вашего следующего большого проекта.
Например
Что дальше?
Спасибо за чтение

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

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

Чтобы решить эту проблему для пользователей React, React 16 вводит новое понятие «границы ошибок». В React 16v есть ограничения на встроенные границы ошибок, но в этом случае мы можем использовать пакет react-error-boundary, Давайте создадим небольшой проект, чтобы объяснить концепцию границ ошибок.

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

Давайте рассмотрим встроенную границу ошибок React.

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

Что такое обработчики событий?
Обработчик событий — это процедура обратного вызова, которая работает асинхронно, когда происходит событие.
Что такое асинхронный код?
Асинхронное программирование — это техника, которая позволяет вашей программе запустить потенциально долго выполняющуюся задачу и при этом реагировать на другие события во время выполнения этой задачи, а не ждать, пока она завершится. После завершения задачи ваша программа получает результат. Источник
Что такое рендеринг на стороне сервера?
Рендеринг на стороне сервера относится к способности приложения отображать веб-страницу на сервере, а не рендерить ее в браузере. Когда JavaScript веб-сайта отрисовывается на сервере веб-сайта, полностью отрисованная страница отправляется клиенту, и клиентский пакет JavaScript подключается и позволяет работать фреймворку Single Page Application. Источник

в то время как Error thrown позволяет вам указать, что произошло что-то неожиданное и нормальный ход выполнения не может продолжаться.

Приведем код

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

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

Как же мы можем обработать эти типы ошибок в вашем коде, используя метод под названием Error boundaries в react?

Встроенный способ

Создайте файл builtInErrorBoundary.js в папке src, скопируйте и вставьте в него этот код.

import { Component } from "react";

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log("log errors Info", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

Вход в полноэкранный режим Выйти из полноэкранного режима

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

import React, { useState } from "react";
import { ErrorBoundary } from "./builtInErrorBoundary";
import ProfileCard from "./component/profile";
import "./styles.css";

export default function App() {
  const [ageState, setAgeState] = useState(1);

  const incrementYourAge = () => setAgeState(ageState + 1);

  return (
    <ErrorBoundary>
      <div className="App">
        <div className="container">
           <ProfileCard ageState={"10"} />
          {/* try this to see the Something went wrong screen
          <ProfileCard ageState={{}} /> 
          */}
          <button onClick={incrementYourAge}>
            <h3>Click here to state your age</h3>
          </button>
        </div>
      </div>
    </ErrorBoundary>
  );
}

Вход в полноэкранный режим Выйти из полноэкранного режима

Проверьте живой код:

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

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

Лучший способ определения границ ошибок для вашего следующего большого проекта.

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

Итак, что мы можем сделать с этой проблемой, есть два пути решения этой проблемы

Создать свой шаблон границ ошибок для всех необходимых решений, что займет время
Используя пакет npm с открытым исходным кодом под названием react-error-boundary, который решает все наши проблемы простой установкой пакета (Спасибо создателям этого пакета).

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

Например

import {ErrorBoundary} from 'react-error-boundary'

function ErrorFallback({error, resetErrorBoundary}) {
  return (
    <div>
      <p>Something went wrong:</p>
      <span>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

export default function DashboardPage () {
  function errorHandler(error, errorInfo) {
    console.error("log", error, errorInfo);
  }

 return (
 <ErrorBoundary
    FallbackComponent={ErrorFallback}
    onError={errorHandler}>
    onReset={() => {
      // reset the state of your app so the error doesn't happen again
    }}
  >
    <div>
      <h3>Welcome back David</h3>
    </div>
  </ErrorBoundary>
  )
}

Вход в полноэкранный режим Выход из полноэкранного режима

Что дальше?

Теперь вы знаете основы Error Boundaries. Вы знаете, что это такое, и почему это может быть полезно, даже как применить это в вашем приложении react. Но ничто не убедит вас больше, чем практический опыт. Этот пакет позволяет легко и быстро понять, как работать с Error Boundaries Подробнее здесь. ✌️

Спасибо за чтение

Не стесняйтесь подписываться на мою рассылку по электронной почте и общайтесь со мной

Как отлавливать ошибки во время рендеринга в React