React Error Boundaries: Полное руководство по надёжной обработке ошибок

В мире современной веб-разработки плавный и надёжный пользовательский опыт имеет первостепенное значение. Одна необработанная ошибка может привести к сбою всего приложения React, оставляя пользователей разочарованными и потенциально приводя к потере ценных данных. React Error Boundaries предоставляют мощный механизм для изящной обработки таких ошибок, предотвращения катастрофических сбоев и обеспечения более устойчивого и дружелюбного к пользователю опыта. Это руководство представляет собой всесторонний обзор React Error Boundaries, охватывающий их назначение, реализацию, лучшие практики и продвинутые техники.

Что такое React Error Boundaries?

Error Boundaries (границы ошибок) — это компоненты React, которые перехватывают ошибки JavaScript в любом месте дерева дочерних компонентов, логируют эти ошибки и отображают запасной пользовательский интерфейс (fallback UI) вместо дерева компонентов, которое вышло из строя. Они действуют как страховочная сетка, не позволяя ошибкам в одной части приложения обрушить весь пользовательский интерфейс. Введённые в React 16, Error Boundaries заменили предыдущие, менее надёжные механизмы обработки ошибок.

Думайте об Error Boundaries как о блоках `try...catch` для компонентов React. Однако, в отличие от `try...catch`, они работают для компонентов, предоставляя декларативный и многократно используемый способ обработки ошибок в вашем приложении.

Зачем использовать Error Boundaries?

Error Boundaries предлагают несколько ключевых преимуществ:

• Предотвращение сбоев приложения: Самое значительное преимущество — это предотвращение сбоя всего приложения из-за ошибки в одном компоненте. Вместо белого экрана или непонятного сообщения об ошибке пользователи видят изящный запасной UI.
• Улучшение пользовательского опыта: Отображая запасной UI, Error Boundaries позволяют пользователям продолжать использовать те части приложения, которые всё ещё работают корректно. Это помогает избежать резкого и разочаровывающего опыта.
• Изоляция ошибок: Error Boundaries помогают изолировать ошибки в определённых частях приложения, что облегчает выявление и отладку основной причины проблемы.
• Улучшенное логирование и мониторинг: Error Boundaries предоставляют централизованное место для логирования ошибок, возникающих в вашем приложении. Эта информация может быть бесценной для проактивного выявления и устранения проблем. Это можно интегрировать с сервисами мониторинга, такими как Sentry, Rollbar или Bugsnag, которые имеют глобальное покрытие.
• Сохранение состояния приложения: Вместо потери всего состояния приложения из-за сбоя, Error Boundaries позволяют остальной части приложения продолжать функционировать, сохраняя прогресс и данные пользователя.

Создание компонента Error Boundary

Для создания компонента Error Boundary необходимо определить классовый компонент, который реализует один или оба следующих метода жизненного цикла:

• static getDerivedStateFromError(error): Этот статический метод вызывается после того, как в дочернем компоненте была выброшена ошибка. Он получает выброшенную ошибку в качестве аргумента и должен вернуть значение для обновления состояния, чтобы отобразить запасной UI.
• componentDidCatch(error, info): Этот метод вызывается после того, как в дочернем компоненте была выброшена ошибка. Он получает выброшенную ошибку, а также объект info, содержащий информацию о том, какой компонент вызвал ошибку. Вы можете использовать этот метод для логирования ошибки или выполнения других побочных эффектов.

Вот базовый пример компонента Error Boundary:

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

  static getDerivedStateFromError(error) {
    // Обновляем состояние, чтобы следующий рендер показал запасной UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Пример "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in App
    console.error("Перехвачена ошибка: ", error, info.componentStack);
    // Вы также можете логировать ошибку в сервис отчётов об ошибках
    // logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // Вы можете отобразить любой кастомный запасной UI
      return 
Что-то пошло не так.
;
    }

    return this.props.children; 
  }
}

Объяснение:

• Компонент ErrorBoundary — это классовый компонент, который наследуется от React.Component.
• Конструктор инициализирует состояние с hasError: false. Этот флаг будет использоваться для определения, следует ли отображать запасной UI.
• static getDerivedStateFromError(error) — это статический метод, который получает выброшенную ошибку. Он обновляет состояние до hasError: true, что вызовет рендеринг запасного UI.
• componentDidCatch(error, info) — это метод жизненного цикла, который получает ошибку и объект info, содержащий информацию о стеке компонентов. Он используется для логирования ошибки в консоль. В производственном приложении вы бы, как правило, логировали ошибку в сервис отчётов об ошибках.
• Метод render() проверяет состояние hasError. Если оно истинно, он отображает запасной UI (в данном случае, простой тег

  ). В противном случае, он отображает дочерние компоненты.

Использование Error Boundaries

Чтобы использовать Error Boundary, просто оберните компонент или компоненты, которые вы хотите защитить, компонентом ErrorBoundary:

Если ComponentThatMightThrow выбросит ошибку, ErrorBoundary перехватит её, обновит своё состояние и отобразит свой запасной UI. Остальная часть приложения продолжит работать в штатном режиме.

Размещение Error Boundaries

Размещение Error Boundaries имеет решающее значение для эффективной обработки ошибок. Рассмотрите следующие стратегии:

• Error Boundaries верхнего уровня: Оберните всё приложение в Error Boundary, чтобы перехватывать любые необработанные ошибки и предотвращать полный сбой приложения. Это обеспечивает базовый уровень защиты.
• Гранулярные Error Boundaries: Оборачивайте определённые компоненты или разделы приложения в Error Boundaries, чтобы изолировать ошибки и предоставлять более целенаправленные запасные UI. Например, вы можете обернуть в Error Boundary компонент, который получает данные из внешнего API.
• Error Boundaries на уровне страниц: Рассмотрите возможность размещения Error Boundaries вокруг целых страниц или маршрутов в вашем приложении. Это предотвратит влияние ошибки на одной странице на другие страницы.

Пример:

function App() {
  return (
    

      
        

      
      
        
      
      
        
          
        
      
      
        
  );
}

В этом примере каждый основной раздел приложения (Header, Sidebar, ContentArea, Footer) обёрнут в Error Boundary. Это позволяет каждому разделу обрабатывать ошибки независимо, предотвращая влияние одной ошибки на всё приложение.

Настройка запасного UI

Запасной UI, отображаемый Error Boundary, должен быть информативным и дружелюбным к пользователю. Учитывайте следующие рекомендации:

• Предоставляйте чёткое сообщение об ошибке: Отображайте краткое и информативное сообщение об ошибке, объясняющее, что пошло не так. Избегайте технического жаргона и используйте язык, понятный пользователям.
• Предлагайте решения: Предложите пользователю возможные решения, такие как обновление страницы, повторная попытка позже или обращение в службу поддержки.
• Поддерживайте единообразие бренда: Убедитесь, что запасной UI соответствует общему дизайну и брендингу вашего приложения. Это помогает поддерживать единообразный пользовательский опыт.
• Предоставьте способ сообщить об ошибке: Включите кнопку или ссылку, которая позволит пользователям сообщить об ошибке вашей команде. Это может предоставить ценную информацию для отладки и устранения проблем.

Пример:

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

  static getDerivedStateFromError(error) {
    // Обновляем состояние, чтобы следующий рендер показал запасной UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Вы также можете логировать ошибку в сервис отчётов об ошибках
    console.error("Перехвачена ошибка: ", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // Вы можете отобразить любой кастомный запасной UI
      return (
        

          
Ой! Что-то пошло не так.
          
К сожалению, при попытке отобразить этот контент произошла ошибка.
          
Пожалуйста, попробуйте обновить страницу или свяжитесь со службой поддержки, если проблема не исчезнет.
           window.location.reload()}>Обновить страницу
          Связаться с поддержкой
        
      );
    }

    return this.props.children; 
  }
}

Этот пример отображает более информативный запасной UI, который включает чёткое сообщение об ошибке, предложенные решения и ссылки для обновления страницы и связи с поддержкой.

Обработка различных типов ошибок

Error Boundaries перехватывают ошибки, которые происходят во время рендеринга, в методах жизненного цикла и в конструкторах всего дерева под ними. Они *не* перехватывают ошибки для:

• Обработчиков событий
• Асинхронного кода (например, setTimeout, requestAnimationFrame)
• Рендеринга на стороне сервера
• Ошибок, выброшенных в самом Error Boundary (а не в его дочерних компонентах)

Для обработки этих типов ошибок необходимо использовать другие техники.

Обработчики событий

Для ошибок, возникающих в обработчиках событий, используйте стандартный блок try...catch:

function MyComponent() {
  const handleClick = () => {
    try {
      // Код, который может выбросить ошибку
      throw new Error("Что-то пошло не так в обработчике событий");
    } catch (error) {
      console.error("Ошибка в обработчике событий: ", error);
      // Обработайте ошибку (например, покажите сообщение об ошибке)
      alert("Произошла ошибка. Пожалуйста, попробуйте снова.");
    }
  };

  return Нажми меня;
}

Асинхронный код

Для ошибок, возникающих в асинхронном коде, используйте блоки try...catch внутри асинхронной функции:

function MyComponent() {
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        // Обработка данных
        console.log(data);
      } catch (error) {
        console.error("Ошибка при получении данных: ", error);
        // Обработайте ошибку (например, покажите сообщение об ошибке)
        alert("Не удалось получить данные. Пожалуйста, попробуйте позже.");
      }
    }

    fetchData();
  }, []);

  return 
Загрузка данных...
;
}

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

window.addEventListener('unhandledrejection', function(event) {
  console.error('Необработанное отклонение (промис: ', event.promise, ', причина: ', event.reason, ');');
  // Опционально отобразите глобальное сообщение об ошибке или залогируйте ошибку в сервис
  alert("Произошла непредвиденная ошибка. Пожалуйста, попробуйте позже.");
});

Продвинутые техники Error Boundaries

Сброс состояния Error Boundary

В некоторых случаях вы можете захотеть предоставить пользователям способ сбросить Error Boundary и повторить операцию, вызвавшую ошибку. Это может быть полезно, если ошибка была вызвана временной проблемой, например, проблемой с сетью.

Чтобы сбросить Error Boundary, вы можете использовать библиотеку управления состоянием, такую как Redux или Context, для управления состоянием ошибки и предоставления функции сброса. В качестве альтернативы вы можете использовать более простой подход, принудительно перемонтировав Error Boundary.

Пример (Принудительное перемонтирование):

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

  static getDerivedStateFromError(error) {
    // Обновляем состояние, чтобы следующий рендер показал запасной UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Вы также можете логировать ошибку в сервис отчётов об ошибках
    console.error("Перехвачена ошибка: ", error, info.componentStack);
    this.setState(prevState => ({ errorCount: prevState.errorCount + 1 }));
  }

  resetError = () => {
      this.setState({hasError: false, key: this.state.key + 1})
  }

  render() {
    if (this.state.hasError) {
      // Вы можете отобразить любой кастомный запасной UI
      return (
        

          
Ой! Что-то пошло не так.
          
К сожалению, при попытке отобразить этот контент произошла ошибка.
          Попробовать снова
        
      );
    }

    return 
{this.props.children}
;
  }
}

В этом примере к оборачивающему div добавляется 'key'. Изменение ключа заставляет компонент перемонтироваться, эффективно сбрасывая состояние ошибки. Метод `resetError` обновляет состояние `key` компонента, что приводит к его перемонтированию и повторному рендерингу дочерних компонентов.

Использование Error Boundaries с Suspense

React Suspense позволяет вам "приостановить" рендеринг компонента до тех пор, пока не будет выполнено какое-либо условие (например, получены данные). Вы можете комбинировать Error Boundaries с Suspense, чтобы обеспечить более надёжную обработку ошибок для асинхронных операций.

import React, { Suspense } from 'react';

function MyComponent() {
  return (
    
      Загрузка...