Reactのエラーハンドリング完全解説:Error Boundaryとtry-catchの使い分け

Reactアプリを開発する上で、エラー処理(エラーハンドリング)は欠かせません。ユーザーがアプリを利用中に予期せぬエラーが発生した場合、適切に処理しなければ画面が真っ白になったり、動作が停止したりと大きな問題になります。本記事では、Reactにおけるエラーハンドリングの基本である「Error Boundary」と「try-catch」それぞれの役割と使い分け方を解説します。


Error Boundaryとは?

Error Boundary(エラーバウンダリ) は、Reactで発生した「描画中のエラー」や「ライフサイクル内のエラー」をキャッチして、アプリのクラッシュを防ぐための機能です。クラスコンポーネントで定義する必要があり、componentDidCatchgetDerivedStateFromErrorの2つのライフサイクルメソッドを使って構成します。

import React from 'react';

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

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error("Error caught:", error);
  }

  render() {
    if (this.state.hasError) {
      return <h2>エラーが発生しました。</h2>;
    }

    return this.props.children;
  }
}

このコンポーネントで任意の子コンポーネントをラップすることで、UIの崩壊を防ぐことができます。

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

try-catchの使いどころ

一方、try-catchはJavaScript標準の構文で、関数内部の同期処理や非同期処理のエラーに対して使用します。たとえば、API通信やJSONパースなどの処理でエラーが発生する場合には、try-catchで安全に処理できます。

async function fetchData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("データ取得エラー:", err);
  }
}

Reactコンポーネント内のuseEffectでも活用可能です。

useEffect(() => {
  const getData = async () => {
    try {
      const res = await fetch('/api/data');
      const data = await res.json();
      setData(data);
    } catch (err) {
      setError(true);
    }
  };
  getData();
}, []);

使い分けのポイント

目的使うべき手法
UIレンダリングの失敗を検出・防止Error Boundary
関数内のロジックやAPI処理の例外処理try-catch

簡単に言えば、UIに関するエラーはError Boundary、ロジックやデータ処理はtry-catchが適しています。


まとめ

Reactでは、ユーザー体験を損なわないために、適切なエラーハンドリングが重要です。Error BoundaryはUIクラッシュの防止に、try-catchは関数や非同期処理の安定性向上に貢献します。それぞれの役割を理解し、状況に応じて使い分けることで、堅牢で信頼性の高いReactアプリを構築できるようになります。

システム開発なんでもパートナー
システム開発なんでもパートナー

この記事を書いた人