React のエラー境界

親愛なる読者の皆様、こんにちは.今日のコンテンツを読んで楽しんでください.

エラー境界とは何かを知ることから始めましょう.簡単に言えば、コードからエラーをキャッチし、ログに記録し、エラー (フォールバック) 用に設定した UI を表示する反応コンポーネントです.

これはどのように役立ちますか?
UI に休憩 (💔) があるときはいつでも、これはそれを発見し、すぐにアクションを実行するのに役立ちます.エラー境界は、レンダリング中、ライフサイクル メソッド、およびその下のツリー全体のコンストラクターでエラーをキャッチします.
たとえば、Facebook Messenger は、サイドバー、情報パネル、会話ログ、およびメッセージ入力のコンテンツを個別のエラー境界にラップします.これらの UI 領域のいずれかのコンポーネントがクラッシュした場合、残りの部分はインタラクティブなままです.

詳しくは、react 公式 Web サイトのエラー境界を参照してください. https://reactjs.org/docs/error-boundaries.html

どうやって使うんですか?
react-error-boundary パッケージを使用して、react フックにエラー境界を実装できます.
npm install --save react-error-boundary
それで:import {ErrorBoundary} from 'react-error-boundary'

function ErrorFallback({error, resetErrorBoundary}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

const ui = (
  <ErrorBoundary
    FallbackComponent={ErrorFallback}
    onReset={() => {
      // reset the state of your app so the error doesn't happen again
    }}
  >
    <ComponentThatMayError />
  </ErrorBoundary>
)

良いニュースは、これは氷山の一角にすぎません.ドキュメント全体を読んで、さらに素晴らしい機能を確認してください
https://www.npmjs.com/package/react-error-boundary

React フックでのこのトリックとヒントについては、こちらをご覧ください.

このブログ投稿がお役に立てば、いいねを押して共有してください.ありがとう.