React.js エラーハンドリング：useEffect Hook と useErrorBoundary Hook で Error Boundary を使いこなす
React.jsにおけるError Boundaryの活用方法（関数コンポーネント編）
関数コンポーネントでError Boundaryを利用するには、以下の2つの方法があります。
useEffect Hookを使用して、エラーが発生した時に処理を行う方法です。
function ErrorBoundary({ children }) {
const [error, setError] = useState(null);
useEffect(() => {
return () => {
// エラーハンドリング処理
if (error) {
console.log(error); // エラー情報の出力
// エラーメッセージの表示
// フォールバックUIへの切り替え
}
};
}, [error]);
return (
<div>
{children}
{error && <ErrorComponent message={error.message} />}
</div>
);
};
この方法では、useEffect Hookのcleanup関数内でエラー処理を行います。エラーが発生した場合は、エラー情報をログに出力したり、エラーメッセージを表示したり、フォールバックUIに切り替えたりすることができます。
useErrorBoundary Hook
react-error-boundaryライブラリなどのサードパーティライブラリが提供するuseErrorBoundary Hookを使用する方法です。
import { useErrorBoundary } from 'react-error-boundary';
function ErrorBoundary({ children }) {
const { error, resetError } = useErrorBoundary();
return (
<div>
{children}
{error && <ErrorComponent message={error.message} />}
{error && <button onClick={resetError}>再読み込み</button>}
</div>
);
};
useErrorBoundary Hookを使うと、エラー情報とエラーをリセットするための関数を簡単に取得できます。エラーが発生した場合は、エラーメッセージを表示したり、再読み込みボタンなどを表示してユーザーに操作を提供することができます。
- エラー発生時のユーザー体験を向上
- アプリケーションの安定性を向上
- エラーの原因特定の容易化
関数コンポーネントでError Boundaryを活用して、より堅牢でユーザーフレンドリーなReactアプリケーション開発をしましょう。
補足
- 上記は基本的な例であり、実際のユースケースに合わせてカスタマイズする必要があります。
サンプルコード：Error Boundaryの利用例
useEffect Hook
function ErrorBoundary({ children }) {
const [error, setError] = useState(null);
useEffect(() => {
return () => {
// エラーハンドリング処理
if (error) {
console.log(error); // エラー情報の出力
// エラーメッセージの表示
// フォールバックUIへの切り替え
}
};
}, [error]);
return (
<div>
{children}
{error && <ErrorComponent message={error.message} />}
</div>
);
};
function App() {
return (
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
);
};
function MyComponent() {
throw new Error('エラーが発生しました');
};
const ErrorComponent = ({ message }) => (
<div>
<h1>エラーが発生しました</h1>
<p>{message}</p>
</div>
);
このコードでは、ErrorBoundaryコンポーネントがuseEffect Hookを使用してエラー処理を行っています。MyComponentでエラーが発生すると、ErrorBoundaryコンポーネントのerror stateが更新され、エラーメッセージが表示されます。
useErrorBoundary Hook
import { useErrorBoundary } from 'react-error-boundary';
function ErrorBoundary({ children }) {
const { error, resetError } = useErrorBoundary();
return (
<div>
{children}
{error && <ErrorComponent message={error.message} />}
{error && <button onClick={resetError}>再読み込み</button>}
</div>
);
};
function App() {
return (
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
);
};
function MyComponent() {
throw new Error('エラーが発生しました');
};
const ErrorComponent = ({ message }) => (
<div>
<h1>エラーが発生しました</h1>
<p>{message}</p>
</div>
);
実行方法
上記のコードをReactプロジェクトにコピーして、npm startコマンドを実行してアプリケーションを起動します。
関数コンポーネントでError Boundaryを利用するその他の方法
高階コンポーネント (HOC) を使用して、Error Boundary の機能を他のコンポーネントにラップすることができます。
const withErrorBoundary = (WrappedComponent) => {
return class extends React.Component {
constructor(props) {
super(props);
this.state = { error: null };
}
componentDidCatch(error) {
this.setState({ error });
}
render() {
const { error } = this.state;
if (error) {
return <ErrorComponent message={error.message} />;
}
return <WrappedComponent {...this.props} />;
}
};
};
const MyComponent = () => {
throw new Error('エラーが発生しました');
};
const App = () => {
const ErrorBoundaryHOC = withErrorBoundary(MyComponent);
return (
<ErrorBoundaryHOC />
);
};
上記のコードでは、withErorBoundary HOC を使用して、MyComponent を Error Boundary 機能でラップしています。
renderError 関数
React 18 では、renderError 関数を使用して、Error Boundary 内でレンダリングされる UI をカスタマイズすることができます。
function ErrorBoundary({ children }) {
return (
<React.ErrorBoundary>
{children}
{error => (
<ErrorComponent message={error.message} />
)}
</React.ErrorBoundary>
);
};
function App() {
return (
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
);
};
function MyComponent() {
throw new Error('エラーが発生しました');
};
const ErrorComponent = ({ message }) => (
<div>
<h1>エラーが発生しました</h1>
<p>{message}</p>
</div>
);
上記のコードでは、renderError 関数を使用して、エラーが発生時に表示されるエラーメッセージをカスタマイズしています。
関数コンポーネントでError Boundaryを利用する方法はいくつかあります。それぞれの方法にはメリットとデメリットがあり、プロジェクトの要件に合わせて最適な方法を選択する必要があります。
reactjs error-handling
