Reactでエラーを処理する方法

エラー境界を使用してReactでエラーを処理するためのベストプラクティス

コンポーネントを操作しているときに、このコンポーネントコード内でエラーが発生すると、ReactはReactコンポーネントツリー全体をアンマウントし、レンダリングします何もない。これは、クラッシュを処理するReactの方法です。

エラーがユーザーに表示されないようにする必要があります。 Reactは空白のページを表示することにしました。

ただし、これは単なるデフォルトです。空白のページを表示することは、ユーザーに不可解なメッセージを表示するよりもわずかに優れていますが、より良い方法が必要です。

開発モードの場合、エラーが発生すると、詳細なスタックトレースがトリガーされます。ブラウザDevToolsコンソール。ただし、もちろん、バグをユーザーに出力したくない場合は、本番環境ではありません。

本番環境では、エラーを傍受し、アプリを使用している人に何らかの役立つメッセージを表示する必要があります。

ここがエラー境界場に出る。

エラー境界を使用して、アプリの一部を分離し、ローカルでエラーを処理します。

エラー境界は、を実装するReactコンポーネントです。componentDidCatch()ライフサイクルイベント、および他のコンポーネントをラップします。

class ErrorHandler extends React.Component {
  constructor(props) {
    super(props)
    this.state = { errorOccurred: false }
  }

componentDidCatch(error, info) { this.setState({ errorOccurred: true }) logErrorToMyService(error, info) }

render() { return this.state.errorOccurred ? <h1>Something went wrong!</h1> : this.props.children } }

コンポーネントJSXでは、次のように使用します。

<ErrorHandler>
  <SomeOtherComponent />
</ErrorHandler>

内部でエラーが発生した場合SomeOtherComponentまたは他の子コンポーネント、およびそれらが保持するコンポーネントサブツリー全体で、ErrorHandlerはそれを傍受し、エラーを適切に処理できます。

Reactの公式ドキュメントに触発された上記のケースでは、errorOccurredtrueに設定すると、インターフェイスがエラー処理UIをレンダリングするようにするstateプロパティ。それ以外の場合は、通常のアプリケーションUIツリーをレンダリングします。

内部componentDidCatch()、エラーを説明する2つの引数を受け取ります。logErrorToMyService()これは、Sentry、Roller、Airbrakeなどのサービスを使用する一部の関数のスタブにすぎず、エラーをわかりやすくログに記録できるため、ユーザーがエラーがあることを通知する必要はありません。問題に気づきます。

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: