【React】React Error Boundaryの導入方法

React Error Boundaryは、Reactアプリケーションでエラーハンドリングを簡単に実装できるライブラリです。エラーが発生した際にフォールバックUIを表示し、アプリ全体のクラッシュを防ぐことができます。

インストール

npm install react-error-boundary

基本的な使い方

シンプルなエラー表示

最もシンプルな方法はfallbackプロパティを使用する方法です。

"use client";
import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary fallback={<div>エラーが発生しました</div>}>
  <YourApp />
</ErrorBoundary>

カスタムフォールバックコンポーネント

エラー情報を表示したり、リトライボタンを追加する場合はFallbackComponentを使用します。

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>エラーが発生しました:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
      <button onClick={resetErrorBoundary}>再試行</button>
    </div>
  );
}

<ErrorBoundary FallbackComponent={ErrorFallback}>
  <YourApp />
</ErrorBoundary>

エラーログの記録

onErrorを使用してエラーを外部サービスに送信できます。

const logError = (error, info) => {
  console.error("エラー:", error);
  // 外部APIにログを送信
};

<ErrorBoundary FallbackComponent={ErrorFallback} onError={logError}>
  <YourApp />
</ErrorBoundary>

useErrorBoundaryフック

非同期処理やイベントハンドラー内のエラーを捕捉する場合はuseErrorBoundaryフックを使用します。

import { useErrorBoundary } from "react-error-boundary";

function MyComponent() {
  const { showBoundary } = useErrorBoundary();

  const handleClick = async () => {
    try {
      await fetchData();
    } catch (error) {
      showBoundary(error);
    }
  };

  return <button onClick={handleClick}>データ取得</button>;
}

参考