Reactアプリを開発する上で、エラー処理（エラーハンドリング）は欠かせません。ユーザーがアプリを利用中に予期せぬエラーが発生した場合、適切に処理しなければ画面が真っ白になったり、動作が停止したりと大きな問題になります。本記事では、Reactにおけるエラーハンドリングの基本である「Error Boundary」と「try-catch」それぞれの役割と使い分け方を解説します。
Error Boundaryとは？
Error Boundary（エラーバウンダリ） は、Reactで発生した「描画中のエラー」や「ライフサイクル内のエラー」をキャッチして、アプリのクラッシュを防ぐための機能です。クラスコンポーネントで定義する必要があり、componentDidCatchとgetDerivedStateFromErrorの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アプリを構築できるようになります。
