React ErrorBoundary: Стратегии за изолиране и възстановяване при грешки

В динамичния свят на front-end разработката, особено при работа със сложни компонентно-базирани рамки като React, неочакваните грешки са неизбежни. Тези грешки, ако не се обработят правилно, могат да доведат до сривове на приложението и разочароващо потребителско изживяване. Компонентът ErrorBoundary на React предлага стабилно решение за елегантно обработване на тези грешки, тяхното изолиране и предоставяне на стратегии за възстановяване. Това подробно ръководство изследва силата на ErrorBoundary, демонстрирайки как ефективно да го имплементирате, за да изградите по-устойчиви и лесни за ползване React приложения за глобална аудитория.

Разбиране на нуждата от Error Boundaries

Преди да се потопим в имплементацията, нека разберем защо error boundaries са от съществено значение. В React грешки, които възникват по време на рендиране, в методи от жизнения цикъл или в конструктори на дъщерни компоненти, потенциално могат да сринат цялото приложение. Това е така, защото необработените грешки се разпространяват нагоре по дървото на компонентите, което често води до празен екран или безполезно съобщение за грешка. Представете си потребител в Япония, който се опитва да завърши важна финансова транзакция, само за да се сблъска с празен екран поради малка грешка в на пръв поглед несвързан компонент. Това илюстрира критичната нужда от проактивно управление на грешките.

Error boundaries предоставят начин за улавяне на JavaScript грешки навсякъде в тяхното дъщерно дърво от компоненти, записване на тези грешки и показване на резервен потребителски интерфейс (fallback UI), вместо да сриват дървото на компонентите. Те ви позволяват да изолирате дефектни компоненти и да предотвратите грешки в една част на приложението ви да засягат други, осигурявайки по-стабилно и надеждно потребителско изживяване в световен мащаб.

Какво е React ErrorBoundary?

ErrorBoundary е React компонент, който улавя JavaScript грешки навсякъде в своето дъщерно дърво от компоненти, записва тези грешки и показва резервен потребителски интерфейс. Това е класов компонент, който имплементира един или и двата от следните методи от жизнения цикъл:

• static getDerivedStateFromError(error): Този метод от жизнения цикъл се извиква, след като е възникнала грешка в дъщерен компонент. Той получава грешката, която е възникнала, като аргумент и трябва да върне стойност за актуализиране на състоянието на компонента.
• componentDidCatch(error, info): Този метод от жизнения цикъл се извиква, след като е възникнала грешка в дъщерен компонент. Той получава два аргумента: възникналата грешка и обект `info`, съдържащ информация за това кой компонент е предизвикал грешката. Можете да използвате този метод, за да записвате информация за грешки или да извършвате други странични ефекти.

Създаване на основен ErrorBoundary компонент

Нека създадем основен ErrorBoundary компонент, за да илюстрираме фундаменталните принципи.

Примерен код

Ето код за прост ErrorBoundary компонент:

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

 static getDerivedStateFromError(error) {
 // Актуализира състоянието, така че следващото рендиране да покаже резервния UI.
 return {
 hasError: true,
 };
 }

 componentDidCatch(error, info) {
 // Пример за "componentStack":
 // in ComponentThatThrows (created by App)
 // in App
 console.error("Caught an error:", error);
 console.error("Error info:", info.componentStack);
 this.setState({ error: error, errorInfo: info });
 // Можете също да запишете грешката в услуга за докладване на грешки
 // logErrorToMyService(error, info.componentStack);
 }

 render() {
 if (this.state.hasError) {
 // Можете да рендирате всякакъв персонализиран резервен UI
 return (
 

 
Something went wrong.
 
Error: {this.state.error && this.state.error.toString()}
 

 {this.state.errorInfo && this.state.errorInfo.componentStack}
 
 
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

Обяснение

• Конструктор: Конструкторът инициализира състоянието на компонента с hasError, зададено на false. Също така съхраняваме error и errorInfo за целите на дебъгването.
• getDerivedStateFromError(error): Този статичен метод се извиква, когато възникне грешка в дъщерен компонент. Той актуализира състоянието, за да покаже, че е възникнала грешка.
• componentDidCatch(error, info): Този метод се извиква, след като е възникнала грешка. Той получава грешката и обект info, съдържащ информация за стека на компонентите. Тук записваме грешката в конзолата (заменете с предпочитания от вас механизъм за логване, като Sentry, Bugsnag или персонализирано вътрешно решение). Също така задаваме error и errorInfo в състоянието.
• render(): Методът render проверява състоянието hasError. Ако е true, той рендира резервен UI; в противен случай рендира дъщерните компоненти. Резервният UI трябва да бъде информативен и лесен за ползване. Включването на детайли за грешката и стека на компонентите, макар и полезно за разработчиците, трябва да се рендира условно или да се премахне в производствена среда от съображения за сигурност.

Използване на ErrorBoundary компонента

За да използвате ErrorBoundary компонента, просто обвийте всеки компонент, който може да предизвика грешка, в него.

Примерен код

import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
 return (
 

 {/* Компоненти, които може да предизвикат грешка */}
 
 
 );
}

function App() {
 return (
 
 
 
 );
}

export default App;

Обяснение

В този пример MyComponent е обвит с ErrorBoundary. Ако възникне някаква грешка в MyComponent или неговите дъщерни компоненти, ErrorBoundary ще я улови и ще рендира резервния UI.

Напреднали стратегии за ErrorBoundary

Въпреки че основният ErrorBoundary предоставя фундаментално ниво на обработка на грешки, има няколко напреднали стратегии, които можете да приложите, за да подобрите управлението на грешките.

1. Гранулирани Error Boundaries

Вместо да обвивате цялото приложение с един ErrorBoundary, обмислете използването на гранулирани error boundaries. Това включва поставяне на ErrorBoundary компоненти около специфични части на вашето приложение, които са по-податливи на грешки или където отказът би имал ограничено въздействие. Например, може да обвиете отделни уиджети или компоненти, които разчитат на външни източници на данни.

Пример

function ProductList() {
 return (
 

 {/* Списък с продукти */}
 
 );
}

function RecommendationWidget() {
 return (
 
 {/* Механизъм за препоръки */}
 
 );
}

function App() {
 return (
 

 
 
 
 );
}

В този пример RecommendationWidget има свой собствен ErrorBoundary. Ако механизмът за препоръки се провали, това няма да засегне ProductList и потребителят все още ще може да разглежда продукти. Този гранулиран подход подобрява цялостното потребителско изживяване, като изолира грешките и предотвратява тяхното каскадно разпространение в приложението.

2. Логване и докладване на грешки

Логването на грешки е от решаващо значение за дебъгването и идентифицирането на повтарящи се проблеми. Методът от жизнения цикъл componentDidCatch е идеалното място за интеграция с услуги за логване на грешки като Sentry, Bugsnag или Rollbar. Тези услуги предоставят подробни доклади за грешки, включително stack traces, потребителски контекст и информация за средата, което ви позволява бързо да диагностицирате и решавате проблеми. Обмислете анонимизирането или редактирането на чувствителни потребителски данни, преди да изпращате логове за грешки, за да осигурите съответствие с регулациите за поверителност като GDPR.

Пример

import * as Sentry from "@sentry/react";

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

 static getDerivedStateFromError(error) {
 // Актуализира състоянието, така че следващото рендиране да покаже резервния UI.
 return {
 hasError: true,
 };
 }

 componentDidCatch(error, info) {
 // Записване на грешката в Sentry
 Sentry.captureException(error, { extra: info });
 // Можете също да запишете грешката в услуга за докладване на грешки
 console.error("Caught an error:", error);
 }

 render() {
 if (this.state.hasError) {
 // Можете да рендирате всякакъв персонализиран резервен UI
 return (
 

 
Something went wrong.
 
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

В този пример методът componentDidCatch използва Sentry.captureException, за да докладва грешката на Sentry. Можете да конфигурирате Sentry да изпраща известия до вашия екип, което ви позволява да реагирате бързо на критични грешки.

3. Персонализиран резервен UI

Резервният UI, показван от ErrorBoundary, е възможност да предоставите лесно за ползване изживяване, дори когато възникнат грешки. Вместо да показвате общо съобщение за грешка, обмислете показването на по-информативно съобщение, което насочва потребителя към решение. Това може да включва инструкции как да опресни страницата, да се свърже с поддръжката или да опита отново по-късно. Можете също така да адаптирате резервния UI в зависимост от типа на възникналата грешка.

Пример

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

 static getDerivedStateFromError(error) {
 // Актуализира състоянието, така че следващото рендиране да покаже резервния UI.
 return {
 hasError: true,
 error: error,
 };
 }

 componentDidCatch(error, info) {
 console.error("Caught an error:", error);
 // Можете също да запишете грешката в услуга за докладване на грешки
 // logErrorToMyService(error, info.componentStack);
 }

 render() {
 if (this.state.hasError) {
 // Можете да рендирате всякакъв персонализиран резервен UI
 if (this.state.error instanceof NetworkError) {
 return (
 

 
Network Error
 
Please check your internet connection and try again.
 
 );
 } else {
 return (
 

 
Something went wrong.
 
Please try refreshing the page or contact support.
 
 );
 }
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

В този пример резервният UI проверява дали грешката е NetworkError. Ако е така, той показва конкретно съобщение, което инструктира потребителя да провери интернет връзката си. В противен случай показва общо съобщение за грешка. Предоставянето на конкретни, приложими насоки може значително да подобри потребителското изживяване.

4. Механизми за повторен опит

В някои случаи грешките са преходни и могат да бъдат разрешени чрез повторен опит на операцията. Можете да внедрите механизъм за повторен опит в рамките на ErrorBoundary, за да опитате отново автоматично неуспешната операция след определено забавяне. Това може да бъде особено полезно за обработка на мрежови грешки или временни прекъсвания на сървъра. Бъдете внимателни при внедряването на механизми за повторен опит за операции, които може да имат странични ефекти, тъй като повторният им опит може да доведе до непредвидени последици.

Пример

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
 const [data, setData] = useState(null);
 const [error, setError] = useState(null);
 const [isLoading, setIsLoading] = useState(true);
 const [retryCount, setRetryCount] = useState(0);

 useEffect(() => {
 const fetchData = async () => {
 setIsLoading(true);
 try {
 const response = await fetch('https://api.example.com/data');
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 const result = await response.json();
 setData(result);
 setError(null);
 } catch (e) {
 setError(e);
 setRetryCount(prevCount => prevCount + 1);
 } finally {
 setIsLoading(false);
 }
 };

 if (error && retryCount < 3) {
 const retryDelay = Math.pow(2, retryCount) * 1000; // Експоненциално отлагане
 console.log(`Retrying in ${retryDelay / 1000} seconds...`);
 const timer = setTimeout(fetchData, retryDelay);
 return () => clearTimeout(timer); // Почистване на таймера при демонтиране или пререндиране
 }

 if (!data) {
 fetchData();
 }

 }, [error, retryCount, data]);

 if (isLoading) {
 return 
Loading data...
;
 }

 if (error) {
 return 
Error: {error.message} - Retried {retryCount} times.
;
 }

 return 
Data: {JSON.stringify(data)}
;
}

function App() {
 return (
 
 
 
 );
}

export default App;

В този пример DataFetchingComponent се опитва да извлече данни от API. Ако възникне грешка, той увеличава retryCount и опитва отново операцията след експоненциално нарастващо забавяне. ErrorBoundary улавя всички необработени изключения и показва съобщение за грешка, включително броя на опитите за повторение.

5. Error Boundaries и Server-Side Rendering (SSR)

При използване на Server-Side Rendering (SSR), обработката на грешки става още по-критична. Грешките, които възникват по време на процеса на рендиране от страна на сървъра, могат да сринат целия сървър, което води до прекъсване на работата и лошо потребителско изживяване. Трябва да се уверите, че вашите error boundaries са правилно конфигурирани, за да улавят грешки както на сървъра, така и на клиента. Често SSR рамки като Next.js и Remix имат свои собствени вградени механизми за обработка на грешки, които допълват React Error Boundaries.

6. Тестване на Error Boundaries

Тестването на error boundaries е от съществено значение, за да се гарантира, че те функционират правилно и предоставят очаквания резервен UI. Използвайте библиотеки за тестване като Jest и React Testing Library, за да симулирате условия на грешка и да проверите дали вашите error boundaries улавят грешките и рендират подходящия резервен UI. Обмислете тестването на различни видове грешки и крайни случаи, за да се уверите, че вашите error boundaries са стабилни и обработват широк спектър от сценарии.

Пример

import { render, screen } from '@testing-library/react';
import ErrorBoundary from './ErrorBoundary';

function ComponentThatThrows() {
 throw new Error('This component throws an error');
 return 
This should not be rendered
;
}

test('renders fallback UI when an error is thrown', () => {
 render(
 
 
 
 );

 const errorMessage = screen.getByText(/Something went wrong/i);
 expect(errorMessage).toBeInTheDocument();
});

Този тест рендира компонент, който хвърля грешка в ErrorBoundary. След това проверява дали резервният UI се рендира правилно, като проверява дали съобщението за грешка присъства в документа.

7. Плавно намаляване на функционалността (Graceful Degradation)

Error boundaries са ключов компонент за прилагане на плавно намаляване на функционалността във вашите React приложения. Плавното намаляване на функционалността (Graceful degradation) е практиката да проектирате приложението си така, че да продължи да функционира, макар и с намалена функционалност, дори когато части от него се провалят. Error boundaries ви позволяват да изолирате провалящите се компоненти и да предотвратите тяхното въздействие върху останалата част от приложението. Като предоставяте резервен UI и алтернативна функционалност, можете да гарантирате, че потребителите все още имат достъп до основни функции, дори когато възникнат грешки.

Често срещани грешки, които да избягвате

Въпреки че ErrorBoundary е мощен инструмент, има някои често срещани грешки, които трябва да се избягват:

• Необвиване на асинхронен код: ErrorBoundary улавя грешки само по време на рендиране, в методи от жизнения цикъл и в конструктори. Грешки в асинхронен код (напр. setTimeout, Promises) трябва да бъдат уловени с помощта на try...catch блокове и обработени по подходящ начин в рамките на асинхронната функция.
• Прекомерна употреба на Error Boundaries: Избягвайте да обвивате големи части от приложението си в един ErrorBoundary. Това може да затрудни изолирането на източника на грешки и може да доведе до твърде често показване на общ резервен UI. Използвайте гранулирани error boundaries, за да изолирате конкретни компоненти или функции.
• Игнориране на информацията за грешката: Не просто улавяйте грешки и показвайте резервен UI. Уверете се, че записвате информацията за грешката (включително стека на компонентите) в услуга за докладване на грешки или във вашата конзола. Това ще ви помогне да диагностицирате и отстраните основните проблеми.
• Показване на чувствителна информация в производствена среда: Избягвайте показването на подробна информация за грешки (напр. stack traces) в производствени среди. Това може да изложи чувствителна информация на потребителите и да представлява риск за сигурността. Вместо това, покажете лесно за ползване съобщение за грешка и запишете подробната информация в услуга за докладване на грешки.

Error Boundaries с функционални компоненти и Hooks

Въпреки че Error Boundaries се имплементират като класови компоненти, все още можете ефективно да ги използвате за обработка на грешки във функционални компоненти, които използват hooks. Типичният подход включва обвиване на функционалния компонент в ErrorBoundary компонент, както беше демонстрирано по-рано. Логиката за обработка на грешки се намира в ErrorBoundary, като ефективно изолира грешки, които могат да възникнат по време на рендирането на функционалния компонент или изпълнението на hooks.

По-конкретно, всички грешки, хвърлени по време на рендирането на функционалния компонент или в тялото на useEffect hook, ще бъдат уловени от ErrorBoundary. Важно е обаче да се отбележи, че ErrorBoundaries не улавят грешки, които възникват в обработвачи на събития (напр. onClick, onChange), прикачени към DOM елементи във функционалния компонент. За обработвачи на събития трябва да продължите да използвате традиционните try...catch блокове за обработка на грешки.

Интернационализация и локализация на съобщенията за грешки

При разработване на приложения за глобална аудитория е изключително важно да интернационализирате и локализирате вашите съобщения за грешки. Съобщенията за грешки, показвани в резервния UI на ErrorBoundary, трябва да бъдат преведени на предпочитания от потребителя език, за да се осигури по-добро потребителско изживяване. Можете да използвате библиотеки като i18next или React Intl, за да управлявате вашите преводи и динамично да показвате подходящото съобщение за грешка въз основа на локала на потребителя.

Пример с използване на i18next

import i18next from 'i18next';
import { useTranslation } from 'react-i18next';

i18next.init({
  resources: {
    en: {
      translation: {
        'error.generic': 'Something went wrong. Please try again later.',
        'error.network': 'Network error. Please check your internet connection.',
      },
    },
    fr: {
      translation: {
        'error.generic': 'Une erreur est survenue. Veuillez réessayer plus tard.',
        'error.network': 'Erreur réseau. Veuillez vérifier votre connexion Internet.',
      },
    },
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false, // не е необходимо за react, тъй като той ескейпва по подразбиране
  },
});

function ErrorFallback({ error }) {
  const { t } = useTranslation();

  let errorMessageKey = 'error.generic';
  if (error instanceof NetworkError) {
    errorMessageKey = 'error.network';
  }

  return (
    

      
{t('error.generic')}
      
{t(errorMessageKey)}
    
  );
}

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);
  const [error, setError] = useState(null);

  static getDerivedStateFromError = (error) => {
    // Актуализира състоянието, така че следващото рендиране да покаже резервния UI
    // return { hasError: true }; // това не работи с hooks в този вид
    setHasError(true);
    setError(error);
  }

  if (hasError) {
    // Можете да рендирате всякакъв персонализиран резервен UI
    return ;
  }

  return children;
}

export default ErrorBoundary;

В този пример използваме i18next за управление на преводи за английски и френски. Компонентът ErrorFallback използва hook-а useTranslation, за да извлече подходящото съобщение за грешка въз основа на текущия език. Това гарантира, че потребителите виждат съобщения за грешки на предпочитания от тях език, подобрявайки цялостното потребителско изживяване.

Заключение

Компонентите ErrorBoundary на React са ключов инструмент за изграждане на стабилни и лесни за ползване React приложения. Чрез внедряването на error boundaries можете елегантно да обработвате грешки, да предотвратявате сривове на приложения и да предоставяте по-добро потребителско изживяване за потребители по целия свят. Като разбирате принципите на error boundaries, прилагате напреднали стратегии като гранулирани error boundaries, логване на грешки и персонализирани резервни UI-и и избягвате често срещани грешки, можете да изградите по-устойчиви и надеждни React приложения, които отговарят на нуждите на глобалната аудитория. Не забравяйте да вземете предвид интернационализацията и локализацията при показване на съобщения за грешки, за да предоставите наистина приобщаващо потребителско изживяване. С нарастването на сложността на уеб приложенията, овладяването на техниките за обработка на грешки ще става все по-важно за разработчиците, които създават висококачествен софтуер.