React use Hookエラー伝播：リソース読み込みエラーチェーンのマスター

最新のReactアプリケーションは、さまざまなソース（API、データベース、ローカルストレージなど）からデータをフェッチすることに依存することがよくあります。これらのリソース読み込み操作が失敗した場合、エラーを適切に処理し、ユーザーに意味のあるエクスペリエンスを提供することが重要です。この記事では、カスタムフック、エラー境界、および堅牢なエラー処理戦略を使用して、Reactアプリケーションでエラーを効果的に管理および伝播する方法について説明します。

エラー伝播の課題を理解する

一般的なReactコンポーネントツリーでは、さまざまなレベルでエラーが発生する可能性があります。データをフェッチするコンポーネントは、ネットワークエラー、解析エラー、または検証エラーに遭遇する可能性があります。理想的には、これらのエラーをキャッチして適切に処理する必要がありますが、エラーが発生したコンポーネントでエラーを単にログに記録するだけでは不十分なことがよくあります。私たちは次のためのメカニズムが必要です。

• エラーを中央の場所に報告する：これにより、ロギング、分析、および潜在的な再試行が可能になります。
• ユーザーフレンドリーなエラーメッセージを表示する： 壊れたUIの代わりに、問題についてユーザーに通知し、考えられる解決策を提案します。
• カスケードエラーを防ぐ：1つのコンポーネントのエラーがアプリケーション全体をクラッシュさせるべきではありません。

これがエラー伝播が登場する場所です。エラー伝播には、エラーがコンポーネントツリーを上方向に渡され、適切なエラー処理境界に到達するまでが含まれます。 Reactのエラー境界は、レンダリング中、ライフサイクルメソッド、および子コンポーネントのコンストラクター中に発生するエラーをキャッチするように設計されていますが、useEffectによってトリガーされるものなどの非同期操作内でスローされたエラーを本質的に処理しません。これが、カスタムフックがギャップを埋めることができる場所です。

エラー処理にカスタムフックを活用する

カスタムフックを使用すると、エラー処理を含む再利用可能なロジックを、単一のコンポーザブルユニット内にカプセル化できます。データのフェッチとエラー管理を処理するカスタムフックuseFetchを作成しましょう。

例：基本的なuseFetchフック

useFetchフックの簡略化されたバージョンを次に示します。

            
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

            

              
                Copy
              
            
          

このフックは、特定のURLからデータをフェッチし、ローディング状態と潜在的なエラーを管理します。 error状態変数は、フェッチ処理中に発生したすべてのエラーを保持します。

エラーを上方向に伝播する

次に、このフックを拡張して、コンテキストを使用してエラーを上方向に伝播させましょう。これにより、親コンポーネントは、useFetchフック内で発生したエラーについて通知を受けることができます。

1. エラーコンテキストを作成する

まず、エラーハンドラー関数を保持するReactコンテキストを作成します。

            
import { createContext, useContext } from 'react';

const ErrorContext = createContext(null);

export const ErrorProvider = ErrorContext.Provider;

export const useError = () => useContext(ErrorContext);

            

              
                Copy
              
            
          

2. useFetchフックを変更する

次に、useFetchフックを変更してエラーコンテキストを使用します。

            
import { useState, useEffect } from 'react';
import { useError } from './ErrorContext';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [localError, setLocalError] = useState(null); // Local error state
  const handleError = useError(); // Get the error handler from context

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLocalError(null);
      } catch (e) {
        setLocalError(e);
        if (handleError) {
          handleError(e); // Propagate the error to the context
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url, handleError]);

  // Return both data and local error. Component can decide which to display.
  return { data, loading, localError };
}

export default useFetch;

            

              
                Copy
              
            
          

これで、フック内で管理されるlocalErrorと、コンテキストを介して伝播されるエラーの2つのエラー状態があることに注意してください。内部的にlocalErrorを使用しますが、コンポーネントレベルの処理にもアクセスできます。

3. アプリケーションをErrorProviderでラップする

アプリケーションのルートで、useFetchを使用するコンポーネントをErrorProviderでラップします。これにより、エラー処理コンテキストがすべての子コンポーネントに提供されます。

            
import React, { useState } from 'react';
import { ErrorProvider } from './ErrorContext';
import MyComponent from './MyComponent';

function App() {
  const [globalError, setGlobalError] = useState(null);

  const handleError = (error) => {
    console.error("Error caught at the top level:", error);
    setGlobalError(error);
  };

  return (
    
      {globalError ? (
        
Error: {globalError.message}
      ) : (
        
      )}
    
  );
}

export default App;

            

              
                Copy
              
            
          

4. コンポーネントでuseFetchフックを使用する

            
import React from 'react';
import useFetch from './useFetch';

function MyComponent() {
  const { data, loading, localError } = useFetch('https://api.example.com/data');

  if (loading) {
    return 
Loading...
;
  }

  if (localError) {
    return 
Error loading data: {localError.message}
;
  }

  return (
    

      
Data:
      
{JSON.stringify(data, null, 2)}
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

説明

• エラーコンテキスト：ErrorContextは、エラー処理関数（handleError）をコンポーネント間で共有する方法を提供します。
• エラー伝播：useFetchでエラーが発生すると、handleError関数が呼び出され、エラーがAppコンポーネントに伝播されます。
• 集中エラー処理：Appコンポーネントは、エラーを集中管理された方法で処理し、ログに記録したり、エラーメッセージを表示したり、その他の適切なアクションを実行したりできるようになりました。

エラー境界：予期しないエラーの安全ネット

カスタムフックとコンテキストは、非同期操作からのエラーを処理する方法を提供しますが、エラー境界は、レンダリング中に発生する可能性のある予期しないエラーをキャッチするために不可欠です。エラー境界は、子コンポーネントツリー内のどこかで発生したJavaScriptエラーをキャッチし、それらのエラーをログに記録し、クラッシュしたコンポーネントツリーの代わりにフォールバックUIを表示するReactコンポーネントです。レンダリング中、ライフサイクルメソッド、およびそれらの下のツリー全体のコンストラクター中にエラーをキャッチします。

エラー境界コンポーネントの作成

            
import React from 'react';

class ErrorBoundary 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 in ErrorBoundary:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        

          
Something went wrong.
          

            {this.state.error && this.state.error.toString()}
						

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

    return this.props.children; 
  }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

エラー境界の使用

エラーをスローする可能性のあるコンポーネントをErrorBoundaryコンポーネントでラップします。

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    

      
        
      
    
  );
}

export default App;

            

              
                Copy
              
            
          

エラー境界とカスタムフックの組み合わせ

最も堅牢なエラー処理を行うには、エラー境界をuseFetchなどのカスタムフックと組み合わせます。エラー境界は予期しないレンダリングエラーをキャッチし、カスタムフックは非同期操作からのエラーを管理し、それらを上方向に伝播させます。 ErrorProviderとErrorBoundaryは共存できます。 ErrorProviderはきめ細かいエラー処理とレポートを可能にし、ErrorBoundaryは壊滅的なアプリケーションクラッシュを防ぎます。

Reactでのエラー処理のベストプラクティス

• 集中エラーロギング：エラーを監視と分析のために中央のロギングサービスに送信します。 Sentry、Rollbar、Bugsnagなどのサービスは優れたオプションです。イベントの重大度を区別するために、ロギングレベル（例：console.error、console.warn、console.info）を使用することを検討してください。
• ユーザーフレンドリーなエラーメッセージ：ユーザーに明確で役立つエラーメッセージを表示します。専門用語は避け、問題の解決策を提案します。ローカリゼーションについて考えてください。エラーメッセージがさまざまな言語と文化のコンテキストでユーザーが理解できることを確認してください。
• 段階的な劣化：エラーが発生した場合に、アプリケーションが適切に劣化するように設計します。たとえば、特定のAPI呼び出しが失敗した場合、対応するコンポーネントを非表示にするか、アプリケーション全体がクラッシュする代わりにプレースホルダーを表示します。
• 再試行メカニズム：ネットワークの不具合などの一時的なエラーに対して、再試行メカニズムを実装します。ただし、問題が悪化する可能性があるため、無限の再試行ループは避けてください。指数バックオフは良い戦略です。
• テスト：エラー処理ロジックが期待どおりに機能することを確認するために、徹底的にテストします。ネットワーク障害、無効なデータ、サーバーエラーなど、さまざまなエラーシナリオをシミュレートします。 JestやReact Testing Libraryなどのツールを使用して、単体テストと統合テストを記述することを検討してください。
• 監視：エラーとパフォーマンスの問題についてアプリケーションを継続的に監視します。エラーが発生したときに通知されるようにアラートを設定すると、問題にすばやく対応できます。
• セキュリティを考慮する：エラーメッセージに機密情報が表示されないようにします。スタックトレースや内部サーバーの詳細をユーザー向けのメッセージに含めないようにしてください。この情報は、悪意のあるアクターによって悪用される可能性があります。

高度なエラー処理テクニック

グローバルエラー状態管理ソリューションの使用

より複雑なアプリケーションの場合は、Redux、Zustand、Recoilなどのグローバル状態管理ソリューションを使用して、エラー状態を管理することを検討してください。これにより、アプリケーション内のどこからでもエラー状態にアクセスして更新できるため、エラーを処理するための中央集権的な方法が提供されます。たとえば、エラーが発生したときにエラー状態を更新するアクションをディスパッチしてから、セレクターを使用して、任意のコンポーネントでエラー状態を取得できます。

カスタムエラークラスの実装

アプリケーションで発生する可能性のあるさまざまなタイプのエラーを表すカスタムエラークラスを作成します。これにより、さまざまなタイプのエラーを簡単に区別し、それに応じて処理できます。たとえば、NetworkErrorクラス、ValidationErrorクラス、およびServerErrorクラスを作成できます。これにより、エラー処理ロジックがより整理され、保守性が向上します。

サーキットブレーカーパターンの使用

サーキットブレーカーパターンは、分散システムでのカスケード障害を防ぐのに役立つ設計パターンです。基本的な考え方は、外部サービスへの呼び出しをサーキットブレーカーオブジェクトでラップすることです。サーキットブレーカーが特定のエラー数を検出した場合、サーキットを「開き」、外部サービスへのそれ以上の呼び出しを防止します。一定時間が経過すると、サーキットブレーカーはサーキットを「半分開き」、外部サービスへの単一の呼び出しを許可します。呼び出しが成功した場合、サーキットブレーカーはサーキットを「閉じ」、外部サービスへのすべての呼び出しが再開されます。これにより、外部サービスでの障害によってアプリケーションが圧倒されるのを防ぐことができます。

国際化（i18n）の考慮事項

グローバルな視聴者を扱う場合、国際化が最優先事項です。エラーメッセージは、ユーザーの希望する言語に翻訳する必要があります。 i18nextのようなライブラリを使用して、翻訳を効果的に管理することを検討してください。さらに、エラーがどのように認識されるかについて、文化的な違いに注意してください。たとえば、単純な警告メッセージは、さまざまな文化で異なるように解釈される可能性があるため、トーンと表現が対象ユーザーに適していることを確認してください。

一般的なエラーシナリオと解決策

ネットワークエラー

シナリオ：APIサーバーが利用できないか、ユーザーのインターネット接続がダウンしています。

解決策：ネットワークの問題があることを示すメッセージを表示し、インターネット接続の確認を提案します。指数バックオフを使用して再試行メカニズムを実装します。

無効なデータ

シナリオ：APIが、予期されるスキーマと一致しないデータを返します。

解決策：クライアント側でデータ検証を実装して、無効なデータをキャッチします。データが破損または無効であることを示すエラーメッセージを表示します。 TypeScriptを使用して、コンパイル時にデータ型を適用することを検討してください。

認証エラー

シナリオ：ユーザーの認証トークンが無効または期限切れです。

解決策：ユーザーをログインページにリダイレクトします。セッションが期限切れになり、再度ログインする必要があることを示すメッセージを表示します。

認可エラー

シナリオ：ユーザーが特定のリソースにアクセスする権限を持っていません。

解決策：必要な権限がないことを示すメッセージを表示します。アクセスする必要があると思われる場合は、サポートに連絡するためのリンクを提供します。

サーバーエラー

シナリオ：APIサーバーで予期しないエラーが発生しました。

解決策：サーバーに問題があることを示す一般的なエラーメッセージを表示します。デバッグのためにサーバー側でエラーをログに記録します。 SentryまたはRollbarのようなサービスを使用して、サーバーエラーを追跡することを検討してください。

結論

効果的なエラー処理は、堅牢でユーザーフレンドリーなReactアプリケーションを作成するために不可欠です。カスタムフック、エラー境界、および包括的なエラー処理戦略を組み合わせることで、アプリケーションがエラーを適切に処理し、リソース読み込みの失敗時でもユーザーに意味のあるエクスペリエンスを提供できるようにすることができます。集中エラーロギング、ユーザーフレンドリーなエラーメッセージ、段階的な劣化を優先することを忘れないでください。これらのベストプラクティスに従うことで、ユーザーの場所や背景に関係なく、回復力があり、信頼性が高く、保守が容易なReactアプリケーションを構築できます。