Reactエラー境界コンポーネント処理

React 16の内容です。最新技術ではありませんが、ドキュメントで調べるまであまり話題に上がらなかった部分です。実はとても便利な部分です。まとめてみましょう〜

React でキャッチされない JS エラーが発生すると、アプリケーション全体がクラッシュし、コンポーネントツリー全体がアンマウントされる可能性があります。これは React 16 以降に当てはまります。しかし同時に、React はエラー境界という新しい概念も導入しました。

定義、それは

エラー境界は、子コンポーネントツリー内の任意の場所で JavaScript エラーをキャッチ (印刷など) して処理し、必要に応じて代替 UI をレンダリングできるコンポーネントです。

try-catch と同様に動作しますが、エラー境界は React コンポーネントにのみ使用されます。

クラスコンポーネントのみがエラー境界コンポーネントになることができます。エラー境界は、サブコンポーネント内のエラーのみをキャプチャでき、それ自体のエラーはキャプチャできません。

エラー境界は、レンダリング中、ライフサイクル中、およびコンポーネントツリー全体のコンストラクター内でエラーをキャッチします。エラー境界処理がなければ、レンダリングされた子コンポーネントツリーは依然として折りたたまれますが、これは明らかに望ましいことではありません。

エラー境界を段階的に使用する方法を示す例を見てみましょう。

デフォルトクラス ErrorTest をエクスポートし、Component を拡張します {
  コンストラクタ(props) {
    スーパー(小道具);
  }
  与える（） {
    戻る （
      <div>
        <バグカウンタ></バグカウンタ>
        <span>私の名前はダンです</span>
      </div>
    );
  }
}

// バグエラーコンポーネントクラス BugCounter は Component を拡張します {
  コンストラクタ(props) {
    スーパー(小道具);
    この状態 = {
      カウンター: 0,
    };
  }
  クリック = () => {
    this.setState(({ counter }) => ({ counter: counter + 1 }));
  };
  与える（） {
    if (this.state.counter === 5) {
      新しいエラーをスローします("クラッシュしました!");
    }
    戻る （
      <div>
        <h3 onClick={this.click}>{this.state.counter}</h3>
      </div>
    );
  }
}

上記コードのレンダリング結果（スタイルは無視）:

数字の0をクリックすると徐々に増加します。しかし、数値が5に等しい場合、コンポーネントはErrorをスローします。

このErrorによりDemo全体がクラッシュし、外部の<span>my name is dan</span>も表示されなくなります。現時点では、エラー境界は追加されていません。

本番モードでは、白い画面が表示され、コンソールにエラーが報告されます。

getDerivedStateFromError と componentDidCatch

この種のクラッシュを処理するにはエラー境界が必要です。エラー境界を定義するにはどうすればよいでしょうか?

コンポーネントを定義し、 static getDerivedStateFromError()またはcomponentDidCatch()ライフサイクルメソッドを実装します (両方を実装することも、いずれかを選択することもできます)。このコンポーネントはエラー境界になります。

これら 2 つのライフサイクル機能については、次のように要約されているリンクから確認できます。

コンポーネントDidCatch(エラー、情報)

errorはスローされたエラーオブジェクトであり、 infoにはエラーの原因となったコンポーネントのスタックトレースが含まれます。関数はコミットフェーズ中に呼び出されます。副作用を起こす可能性があります。

静的 getDerivedStateFromError(エラー)

子コンポーネントがエラーをスローした後に、スローされたエラーを引数として呼び出されます。状態を更新するには値を返す必要があります。この関数はレンダリングフェーズ中に呼び出され、副作用は許可されません。エラーをキャッチした後に副作用を実行する必要がある場合は、 componentDidCatchで実行する必要があります。

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

組み合わせメソッドを使用して、エラー境界コンポーネントを追加し、使用するコンポーネントをラップすることができます。このコンポーネントには次の効果が必要です:

サブコンポーネントのエラーをキャプチャし、コンポーネント内のエラーステータスを記録する
エラー状態では代替UIを表示し、通常状態ではサブコンポーネントを表示します。

すると次のようになります:

ErrorBoundaryクラスはReact.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
    this.state = {hasError: false };
  }

  静的 getDerivedStateFromError(エラー) {
    // 次のレンダリングで劣化した UI を表示できるように状態を更新します
    {hasError: true } を返します。
  }

  コンポーネントDidCatch(エラー、エラー情報) {
    // エラー ログをサーバーに報告することもできます logErrorToMyService(error, errorInfo);
  }

  与える（） {
    if (this.state.hasError) {
      // ダウングレードされた UI をカスタマイズしてレンダリングできます。 return <h1>Something went wrong.</h1>;
    }

    this.props.children を返します。 
  }
}

エラーをキャッチした後の副作用は、カスタマイズされ、サーバーにアップロードされるか、 stateレコードを使用してページに表示されます。

コンポーネントDidCatch(エラー、エラー情報) {
  // 以下のコンポーネントでエラーをキャッチし、エラーメッセージとともに再レンダリングします
  this.setState({
    エラー: エラー、
    エラー情報: エラー情報
  })
}

キャプチャ処理

すべてのコードを追加し、問題のあるコンポーネントをエラー境界コンポーネントでラップして、結果を確認します。

「react」からコンポーネントをインポートします。

デフォルトクラス ErrorTest をエクスポートし、Component を拡張します {
  与える（） {
    戻る （
      <div>
        <エラー境界>
          <バグカウンタ></バグカウンタ>
        </エラー境界>
        <span>私の名前はダンです</span>
      </div>
    );
  }
}

// バグエラーコンポーネントクラス BugCounter は Component を拡張します {
  コンストラクタ(props) {
    スーパー(小道具);
    この状態 = {
      カウンター: 0,
    };
  }
  クリック = () => {
    this.setState(({ counter }) => ({ counter: counter + 1 }));
  };
  与える（） {
    if (this.state.counter === 5) {
      新しいエラーをスローします("クラッシュしました!");
    }
    戻る （
      <div>
        <h3 onClick={this.click}>{this.state.counter}</h3>
      </div>
    );
  }
}

// エラー境界処理コンポーネントクラス ErrorBoundary は Component を拡張します {
  コンストラクタ(props) {
    スーパー(小道具);
    this.state = {hasError: false };
  }

  静的 getDerivedStateFromError(エラー) {
    // 次のレンダリングで劣化した UI を表示できるように状態を更新します
    {hasError: true } を返します。
  }

  与える（） {
    if (this.state.hasError) {
      // ダウングレードされた UI をカスタマイズしてレンダリングできます。 return <h1>Something went wrong.</h1>;
    }

    this.props.children を返します。
  }
}

例外をスローすると開発モードではまだエラーが報告されますが、 yarn buildを使用してからhttp-server経由でハングアップし、本番ページにアクセスします。

throw errorによりコンソールエラーが発生しているにもかかわらず、 my name is danの表示は影響を受けていないことがわかります。つまり、エラー境界内のサブコンポーネントエラーは、他の外部コンポーネントや要素に影響を与えません。

範囲

エラー境界は、サブコンポーネントのライフサイクルとレンダリング関数のエラーを処理するために使用されます。イベントハンドラーの場合、レンダリング中にはトリガーされません。イベントハンドラーによってスローされる例外には、 try catch使用する必要があります。

エラー境界では、次のシナリオではエラーをキャッチできません。

イベント処理
非同期コード
サーバーサイドレンダリング
エラー境界自体によってスローされたエラー（子コンポーネントではない）

エラー境界に関しては、 Reactの公式demoを試してみる価値があります。

https://codepen.io/gaearon/pen/wqvxGa?editors=0010

参照:

https://zh-hans.reactjs.org/docs/error-boundaries.html

https://zh-hans.reactjs.org/docs/react-component.html

https://codepen.io/gaearon/pen/wqvxGa?editors=0010

React error boundary コンポーネントの取り扱いに関する記事はこれで終了です。React error boundary に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: