Категоризація помилок React Error Boundary: Вичерпний посібник

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

Що таке React Error Boundaries?

Запроваджені в React 16, Error Boundaries — це React-компоненти, які перехоплюють помилки JavaScript у будь-якому місці свого дочірнього дерева компонентів, реєструють ці помилки та відображають резервний інтерфейс замість того, щоб спричинити збій усього дерева компонентів. Вони функціонують аналогічно блоку try...catch, але для компонентів.

Ключові характеристики Error Boundaries:

• Обробка помилок на рівні компонента: Ізолюйте помилки в межах конкретних піддерев компонентів.
• Елегантна деградація: Запобігайте збою всього застосунку через помилку одного компонента.
• Контрольований резервний інтерфейс: Відображайте зручне для користувача повідомлення або альтернативний вміст у разі виникнення помилки.
• Логування помилок: Сприяйте відстеженню та налагодженню помилок шляхом логування інформації про них.

Навіщо класифікувати помилки в Error Boundaries?

Просто перехоплювати помилки недостатньо. Ефективна обробка помилок вимагає розуміння що саме пішло не так і відповідної реакції. Категоризація помилок в Error Boundaries пропонує кілька переваг:

• Цільова обробка помилок: Різні типи помилок можуть вимагати різних відповідей. Наприклад, мережева помилка може вимагати механізму повторної спроби, тоді як помилка валідації даних може вимагати виправлення введених користувачем даних.
• Покращена взаємодія з користувачем: Відображайте більш інформативні повідомлення про помилки залежно від їхнього типу. Загальне повідомлення "Щось пішло не так" менш корисне, ніж конкретне повідомлення, що вказує на проблему з мережею або недійсний ввід.
• Покращене налагодження: Категоризація помилок надає цінний контекст для налагодження та виявлення основної причини проблем.
• Проактивний моніторинг: Відстежуйте частоту різних типів помилок, щоб виявляти повторювані проблеми та пріоритезувати виправлення.
• Стратегічний резервний інтерфейс: Відображайте різні резервні інтерфейси залежно від помилки, надаючи користувачеві більш релевантну інформацію або дії.

Підходи до категоризації помилок

Можна використовувати кілька методів для категоризації помилок у React Error Boundaries:

1. Використання instanceof

Оператор instanceof перевіряє, чи є об'єкт екземпляром певного класу. Це корисно для категоризації помилок на основі їх вбудованих або користувацьких типів помилок.

Приклад:

class NetworkError extends Error {
  constructor(message) {
    super(message);
    this.name = "NetworkError";
  }
}

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

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

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

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      let errorMessage = "Something went wrong.";
      if (this.state.error instanceof NetworkError) {
        errorMessage = "A network error occurred. Please check your connection and try again.";
      } else if (this.state.error instanceof ValidationError) {
        errorMessage = "There was a validation error. Please review your input.";
      }

      return (
        <div>
          <h2>Error!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Пояснення:

• Визначено користувацькі класи NetworkError та ValidationError, що розширюють вбудований клас Error.
• У методі render компонента MyErrorBoundary оператор instanceof використовується для перевірки типу перехопленої помилки.
• Залежно від типу помилки, у резервному інтерфейсі відображається конкретне повідомлення про помилку.

2. Використання кодів або властивостей помилок

Інший підхід полягає у включенні кодів або властивостей помилок до самого об'єкта помилки. Це дозволяє більш детально категоризувати помилки на основі конкретних сценаріїв помилок.

Приклад:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          const error = new Error("Network request failed");
          error.code = response.status; // Add a custom error code
          reject(error);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

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

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

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      let errorMessage = "Something went wrong.";
      if (this.state.error.code === 404) {
        errorMessage = "Resource not found.";
      } else if (this.state.error.code >= 500) {
        errorMessage = "Server error. Please try again later.";
      }

      return (
        <div>
          <h2>Error!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Пояснення:

• Функція fetchData додає властивість code до об'єкта помилки, що представляє код стану HTTP.
• Компонент MyErrorBoundary перевіряє властивість code для визначення конкретного сценарію помилки.
• Різні повідомлення про помилки відображаються на основі коду помилки.

3. Використання централізованого зіставлення помилок

Для складних застосунків підтримка централізованого зіставлення помилок може покращити організацію коду та зручність обслуговування. Це передбачає створення словника або об'єкта, який зіставляє типи або коди помилок з конкретними повідомленнями про помилки та логікою обробки.

Приклад:

const errorMap = {
  "NETWORK_ERROR": {
    message: "A network error occurred. Please check your connection.",
    retry: true,
  },
  "INVALID_INPUT": {
    message: "Invalid input. Please review your data.",
    retry: false,
  },
  404: {
    message: "Resource not found.",
    retry: false,
  },
  500: {
    message: "Server error. Please try again later.",
    retry: true,
  },
  "DEFAULT": {
    message: "Something went wrong.",
    retry: false,
  },
};

function handleCustomError(errorType) {
    const errorDetails = errorMap[errorType] || errorMap["DEFAULT"];
    return errorDetails;
}

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

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

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message } = this.state.errorDetails;
      return (
        <div>
          <h2>Error!</h2>
          <p>{message}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorDetails.message}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

function MyComponent(){
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      try {
        throw new Error("NETWORK_ERROR");
      } catch (e) {
        throw e;
      }
    }, []);

    return <div></div>;
}

Пояснення:

• Об'єкт errorMap зберігає інформацію про помилки, включаючи повідомлення та прапорці повторної спроби, на основі типів або кодів помилок.
• Функція handleCustomError отримує деталі помилки з errorMap на основі повідомлення про помилку та повертає значення за замовчуванням, якщо конкретний код не знайдено.
• Компонент MyErrorBoundary використовує handleCustomError для отримання відповідного повідомлення про помилку з errorMap.

Найкращі практики для категоризації помилок

• Визначте чіткі типи помилок: Встановіть послідовний набір типів або кодів помилок для вашого застосунку.
• Надавайте контекстну інформацію: Включайте відповідні деталі в об'єкти помилок для полегшення налагодження.
• Централізуйте логіку обробки помилок: Використовуйте централізоване зіставлення помилок або службові функції для послідовного керування обробкою помилок.
• Ефективно логуйте помилки: Інтегруйтеся зі службами звітування про помилки для відстеження та аналізу помилок у виробничому середовищі. Популярні сервіси включають Sentry, Rollbar та Bugsnag.
• Тестуйте обробку помилок: Пишіть модульні тести, щоб перевірити, чи правильно ваші Error Boundaries обробляють різні типи помилок.
• Враховуйте користувацький досвід: Відображайте інформативні та зручні для користувача повідомлення про помилки, які скеровують користувачів до вирішення. Уникайте технічного жаргону.
• Моніторинг частоти помилок: Відстежуйте частоту різних типів помилок, щоб виявляти повторювані проблеми та пріоритезувати виправлення.
• Інтернаціоналізація (i18n): При представленні повідомлень про помилки користувачеві переконайтеся, що ваші повідомлення належним чином інтернаціоналізовані для підтримки різних мов та культур. Використовуйте бібліотеки, такі як i18next або Context API React для керування перекладами.
• Доступність (a11y): Переконайтеся, що ваші повідомлення про помилки доступні для користувачів з обмеженими можливостями. Використовуйте атрибути ARIA для надання додаткового контексту програмам зчитування з екрана.
• Безпека: Будьте обережні з інформацією, яку ви відображаєте в повідомленнях про помилки, особливо у виробничих середовищах. Уникайте розголошення конфіденційних даних, які можуть бути використані зловмисниками. Наприклад, не відображайте необроблені траси стека кінцевим користувачам.

Приклад сценарію: Обробка помилок API у застосунку для електронної комерції

Розглянемо застосунок для електронної комерції, який отримує інформацію про товари з API. Можливі сценарії помилок включають:

• Мережеві помилки: Сервер API недоступний або інтернет-з'єднання користувача перервано.
• Помилки автентифікації: Токен автентифікації користувача недійсний або термін його дії закінчився.
• Помилки "ресурс не знайдено": Запитуваний товар не існує.
• Помилки сервера: Сервер API зіткнувся з внутрішньою помилкою.

Використовуючи Error Boundaries та категоризацію помилок, застосунок може елегантно обробляти ці сценарії:

// Example (Simplified)
async function fetchProduct(productId) {
  try {
    const response = await fetch(`/api/products/${productId}`);
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("PRODUCT_NOT_FOUND");
      } else if (response.status === 401 || response.status === 403) {
        throw new Error("AUTHENTICATION_ERROR");
      } else {
        throw new Error("SERVER_ERROR");
      }
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError && error.message === "Failed to fetch") {
      throw new Error("NETWORK_ERROR");
    }
    throw error;
  }
}

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

  static getDerivedStateFromError(error) {
    const errorDetails = handleCustomError(error.message); // Use errorMap as shown previously
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message, retry } = this.state.errorDetails;
      return (
        <div>
          <h2>Error!</h2>
          <p>{message}</p>
          {retry && <button onClick={() => window.location.reload()}>Retry</button>}
        </div>
      );
    }

    return this.props.children;
  }
}

Пояснення:

• Функція fetchProduct перевіряє код статусу відповіді API та генерує конкретні типи помилок на основі цього статусу.
• Компонент ProductErrorBoundary перехоплює ці помилки та відображає відповідні повідомлення про помилки.
• Для мережевих та серверних помилок відображається кнопка "Повторити", що дозволяє користувачеві повторити запит.
• При помилках автентифікації користувача може бути перенаправлено на сторінку входу.
• При помилках "ресурс не знайдено" відображається повідомлення про те, що товар не існує.

Висновок

Категоризація помилок в React Error Boundaries є важливою для створення стійких та зручних для користувача застосунків. Використовуючи такі методи, як перевірки instanceof, коди помилок та централізовані зіставлення помилок, ви можете ефективно обробляти різні сценарії помилок та забезпечувати кращий користувацький досвід. Пам'ятайте про дотримання найкращих практик для обробки, логування та тестування помилок, щоб ваш застосунок елегантно справлявся з непередбаченими ситуаціями.

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

Додаткові ресурси:

• Документація React Error Boundaries
• Посібник Sentry щодо React 16 Error Boundaries
• Посібник з React Error Boundary від Robin Wieruch