Reactにおける堅牢なリソースローディング：フックでエラー境界をマスターする

現代のウェブアプリケーションでは、非同期でのリソース読み込みは一般的な手法です。APIからのデータ取得、画像の読み込み、モジュールのインポートなど、リソース読み込み中に発生しうるエラーの処理は、スムーズなユーザーエクスペリエンスにとって非常に重要です。Reactのエラー境界は、子コンポーネントツリー内のどこで発生したJavaScriptエラーでもキャッチし、それらのエラーをログに記録し、アプリケーション全体をクラッシュさせる代わりにフォールバックUIを表示するメカニズムを提供します。この記事では、Reactフックと組み合わせてエラー境界を効果的に使用し、リソース読み込みエラーを管理する方法を探ります。

エラー境界の理解

React 16以前は、コンポーネントのレンダリング中に未処理のJavaScriptエラーが発生すると、Reactの内部状態が破損し、その後のレンダリングで不可解なエラーが発生することがありました。エラー境界は、子コンポーネントで発生したエラーの包括的なキャッチブロックとして機能することで、この問題に対処します。これらは、以下のライフサイクルメソッドのいずれかまたは両方を実装するReactコンポーネントです：

• static getDerivedStateFromError(error)：この静的メソッドは、子孫コンポーネントによってエラーがスローされた後に呼び出されます。スローされたエラーを引数として受け取り、コンポーネントの状態を更新するための値を返します。
• componentDidCatch(error, info)：このライフサイクルメソッドは、子孫コンポーネントによってエラーがスローされた後に呼び出されます。スローされたエラーを引数として受け取るほか、どのコンポーネントがエラーをスローしたかに関する情報を含むオブジェクトも受け取ります。エラー情報をログに記録するために使用できます。

重要な点として、エラー境界は、レンダリングフェーズ、ライフサイクルメソッド、およびそれらの下にあるツリー全体のコンストラクタで発生したエラーのみをキャッチします。以下のエラーはキャッチしません：

• イベントハンドラ（詳細は以下のセクションで学びます）
• 非同期コード（例：setTimeoutやrequestAnimationFrameのコールバック）
• サーバーサイドレンダリング
• エラー境界自体でスローされたエラー（その子コンポーネントではなく）

エラー境界とReactフック：強力な組み合わせ

従来、エラー境界を実装するためにはクラスコンポーネントが使用されていましたが、Reactフックはより簡潔で関数的なアプローチを提供します。エラー処理ロジックをカプセル化し、リソース読み込み中にエラーをスローする可能性のあるコンポーネントをラップする便利な方法を提供する、再利用可能なuseErrorBoundaryフックを作成できます。

カスタムuseErrorBoundaryフックの作成

以下にuseErrorBoundaryフックの例を示します：

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

説明：

• useState： useStateを使用してエラーの状態を管理します。初期状態ではエラーをnullに設定します。
• useCallback： useCallbackを使用して、resetErrorとcaptureError関数をメモ化します。これらの関数がプロップとして渡される場合、不要な再レンダリングを防ぐための良い習慣です。
• ErrorBoundary コンポーネント： これはuseCallbackで作成された関数コンポーネントで、childrenとオプションのfallbackプロップを受け取ります。状態にエラーが存在する場合、提供されたfallbackコンポーネントまたはデフォルトのエラーメッセージのいずれかをレンダリングします。それ以外の場合は、childrenをレンダリングします。これが私たちのエラー境界として機能します。依存配列 `[error]` は、errorの状態が変化したときに再レンダリングされることを保証します。
• captureError 関数： この関数はエラー状態を設定するために使用されます。リソースを読み込む際にtry...catchブロック内でこれを呼び出します。
• resetError 関数： この関数はエラー状態をクリアし、コンポーネントがそのchildrenを再レンダリング（潜在的にリソース読み込みを再試行）できるようにします。

エラーハンドリングを伴うリソース読み込みの実装

では、このフックを使用してリソース読み込みエラーを処理する方法を見てみましょう。APIからユーザーデータを取得するコンポーネントを考えます：

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry