React でのエラー境界の仕組み

React をしばらく使用している場合は、「エラー処理の動作をカスタマイズするために、ツリーにエラー境界を追加することを検討してください」というメッセージに遭遇したことがあるかもしれません。コンポーネントがクラッシュするたびに、ブラウザー コンソールでこれを見たことがあるかもしれません。

React では、エラー発生時のユーザー エクスペリエンスを向上させるために、エラー境界を使用することをお勧めします。

React のエラー境界クラスとは何ですか?

エラー境界は、バニラ JavaScript の try/catch ブロックのように機能します。違いは、React コンポーネントで発生するエラーをキャッチすることです。UI コンポーネントでエラーが発生した場合、React はそのコンポーネント内のツリーをアンマウントし、定義したフォールバック UI に置き換えます。これは、エラーが発生したコンポーネントにのみ影響し、アプリケーションの残りの部分が期待どおりに動作することを意味します。

React documentationによると、エラー境界クラスは次のエラーをキャッチしません。

• イベント ハンドラー。
• 非同期コード。
• サーバー側のコード。
• (子ではなく) エラー境界自体でスローされたエラー。

上記のエラーについては、try/catch ブロックを使用できます。

たとえば、イベント ハンドラーで発生したエラーをキャッチするには、次のコードを使用します。

function EventComponent() {
    const [error, setError] = useState(null)


    const handleClick = () => {
        try {
            // Do something
        } catch (error) {
            setError(error)
        }
    }

    return (
        <>
            <div>{error?error: ""}</div>
            <button onClick={handleClick}>Button</button>
        </>
    )
}


エラー境界を使用して、React コンポーネントのみのエラーをキャッチします。

エラー境界クラスの作成

次のメソッドのいずれかまたは両方を含むクラスを定義することで、エラー境界を作成できます。

• static getDerivedStateFromError()
• componentDidCatch()

getDerivedStateFromError() 関数は、エラーがキャッチされるとコンポーネントの状態を更新しますが、 componentDidCatch() を使用してエラー情報をコンソールに記録できます。エラーをエラー報告サービスに送信することもできます。

以下は、単純なエラー境界クラスを作成する方法を示す例です。

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { error: false };
    }


    static getDerivedStateFromError(error) {
        // Update state so the next render will show the fallback UI.
        return { error: error };
    }

export default ErrorBoundary;


エラーが発生すると、getDerivedStateFromError() は状態を更新し、その結果、フォールバック UI を表示する再レンダリングをトリガーします。

エラー境界クラスをゼロから作成したくない場合は、react-error-boundary NPM パッケージ を使用してください。このパッケージは、エラーが発生する可能性があると思われるコンポーネントをラップする ErrorBoundary コンポーネントを提供します。

エラー境界クラスの使用

エラーを処理するには、コンポーネントをエラー境界クラス コンポーネントでラップします。最上位コンポーネントまたは個々のコンポーネントをラップできます。

最上位コンポーネントをラップすると、React アプリケーション内のすべてのコンポーネントによってスローされたエラーがエラー境界クラスによって処理されます。

<ErrorBoundary>
<App/>
</ErrorBoundary>


個々のコンポーネントを ErrorBoundary でラップすると、そのコンポーネントのエラーは別のコンポーネントのレンダリング方法に影響しません。

<ErrorBoundary>
<Profile/>
</ErrorBoundary>


たとえば、プロファイル コンポーネントのエラーは、ヒーロー コンポーネントなどの別のコンポーネントのレンダリングには影響しません。プロファイル コンポーネントがクラッシュする可能性がありますが、アプリケーションの残りの部分は正常に動作します。これは、React が提供する一般的な白いフォールバック画面をレンダリングするよりもはるかに優れています。

JavaScript でのエラー処理

プログラミング エラーは、開発者とユーザーにとってイライラすることがあります。エラーの処理に失敗すると、ユーザーが理解しにくいエラー メッセージを表示する見苦しい UI にさらされる可能性があります。

React コンポーネントをビルドするときは、ゼロからエラー境界クラスを作成するか、 react-error-boundary パッケージを使用してユーザー フレンドリーなエラー メッセージを表示します。