React のエラー境界: アプリ内でエラーを適切に処理する

React のエラー境界を理解する: エラーを適切に処理する

React では、コンポーネント ツリーのどの時点でもエラーが発生し、UI が中断され、ユーザー エクスペリエンスに影響を与える可能性があります。エラーによるアプリ全体のクラッシュを防ぐために、React は Error Boundaries と呼ばれる機能を提供します。エラー境界を使用すると、コンポーネント ツリー内の任意の場所で JavaScript エラーを検出し、アプリケーション全体をクラッシュさせることなく適切に処理できます。

---

1. React のエラー境界とは何ですか?

エラー境界 は、レンダリング中、ライフサイクル メソッド内、および子コンポーネントのコンストラクター内で JavaScript エラーをキャッチする React コンポーネントです。エラーが検出されると、アプリケーション全体のクラッシュを防ぎながら、エラー境界でフォールバック UI を表示したり、エラーをログに記録したり、その他のアクションを実行したりできます。

エラー境界は、アプリの特定の部分でエラーを処理するために使用でき、アプリケーションの残りの部分を中断することなくエラー メッセージやフォールバック UI を表示できます。

---

2.エラー境界はどのように機能しますか?

エラー境界は、2 つの特定のライフサイクル メソッドを実装するクラス コンポーネントを作成することで実装されます。

• static getDerivedStateFromError(error): このメソッドは、子孫コンポーネントでエラーがスローされたときに呼び出されます。これにより、エラー境界の状態を更新してフォールバック UI を表示できます。
• componentDidCatch(error, info): このメソッドは、エラーが捕捉された後に呼び出されます。これは、エラーを外部サービスに記録したり、エラーに関連する他の副作用を記録したりするために使用できます。

エラー境界の基本的な例:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Update state to display fallback UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Log the error details to an external service
    console.error("Error caught by Error Boundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Render a fallback UI if there's an error
      return <h1>Something went wrong. Please try again later.</h1>;
    }

    return this.props.children;  // Render the children if no error occurred
  }
}

export default ErrorBoundary;

仕組み:

• getDerivedStateFromError: このメソッドは、子コンポーネントでエラーがスローされたときに状態を更新し、境界でフォールバック UI をレンダリングできるようにします。
• componentDidCatch: このライフサイクル メソッドは、エラー情報のログ記録、またはエラーが捕捉された後の副作用の実行に使用されます。
• render: hasError が true の場合、フォールバック UI が表示されます。それ以外の場合、子コンポーネントは通常どおりレンダリングされます。

---

3.アプリでエラー境界を使用する

エラー境界コンポーネントを作成したら、それを使用して、エラーをスローする可能性のある他のコンポーネントをラップできます。アプリの個々のコンポーネントまたはセクション全体をラップして、エラー処理を適切に行うことができます。

エラー境界の使用例:

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

const ChildComponent = () => {
  // Simulate an error
  throw new Error('This is a simulated error!');
  return <div>Child Component</div>;
};

const App = () => {
  return (
    <ErrorBoundary>
      <ChildComponent />
    </ErrorBoundary>
  );
};

export default App;

この例では:

• ChildComponent はエラーをスローしますが、そのエラーは ErrorBoundary コンポーネントによって捕捉され、アプリがクラッシュする代わりにフォールバック UI が表示されます。

---

4.エラー境界を使用するためのベスト プラクティス

• 分離セクションにエラー境界を使用する: エラー境界は、ユーザー入力フォーム、サードパーティのライブラリ、複雑なコンポーネントなど、エラーが発生する可能性があるアプリケーションの部分の周囲で使用するのが理想的です。
• フォールバック UI: 意味のあるフォールバック UI を常に提供して、問題が発生したことをユーザーに通知し、アプリの使用を継続する方法を提供します。
• エラー ログ: 運用環境での問題を追跡およびデバッグするために、componentDidCatch メソッドを使用して外部サービス (Sentry、LogRocket など) にエラーをログに記録します。
• グローバル エラー処理にエラー境界を使用しない: エラー境界は、ローカライズされたエラー処理に最適です。グローバル エラー (ネットワークの問題など) は、try-catch や React のコンテキスト API などの他のメカニズムで処理する必要があります。

---

5.誤差境界の制限

エラー境界は多くのシナリオで役立ちますが、いくつかの制限があります。

• イベント ハンドラーでエラーをキャッチしない: エラー境界は、レンダリング、ライフサイクル メソッド、およびコンストラクター中のエラーのみをキャッチします。イベント ハンドラー内でスローされたエラーは捕捉されません。
  • イベント ハンドラーでエラーをキャッチするには、コードを try-catch ブロックでラップします。
• 非同期コードでエラーをキャッチしない: 非同期コード (setTimeout や Promises 内など) でスローされたエラーは、エラー境界によってキャッチされません。これらは、非同期コードの try-catch またはエラー処理メカニズムを使用して処理する必要があります。

---

6.イベントハンドラーでのエラー処理の例:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Update state to display fallback UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Log the error details to an external service
    console.error("Error caught by Error Boundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Render a fallback UI if there's an error
      return <h1>Something went wrong. Please try again later.</h1>;
    }

    return this.props.children;  // Render the children if no error occurred
  }
}

export default ErrorBoundary;

---

7.結論

エラー境界は、エラーを適切に処理し、予期しない問題が発生した場合でもアプリケーションが機能し続けることを保証する React の強力なツールです。アプリの失敗する可能性のある部分の周囲にエラー境界を使用することで、エラーを捕捉し、後で分析するためにログに記録し、ユーザーにフォールバック UI を表示できます。ただし、エラー境界ではイベント ハンドラーや非同期コードのエラーは検出されないため、これらのケースは必ず個別に処理するようにしてください。

エラー境界を効果的に使用することで、React アプリケーションの信頼性とユーザー エクスペリエンスを向上させることができます。

---

以上がReact のエラー境界: アプリ内でエラーを適切に処理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。