問題一覧に戻る
上級高度なパターンと型
問題105: エラー境界応用

本番アプリケーション向けの高度なエラー境界技術を学びます。エラーをキャプチャし、監視サービスにログを記録し、ユーザーフレンドリーなフォールバックを表示します。エラー境界はコンポーネントツリー内のJavaScriptエラーをキャッチし、エラー情報をログに記録し、フォールバックUIを表示します。予期しないエラーを適切に処理する堅牢なアプリケーションに必須です。

import React, { Component, ErrorInfo } from 'react';

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
}

{/* エラー境界クラス */}
class ErrorBoundary extends Component<
  { children: React.ReactNode },
  ErrorBoundaryState
> {
  state: ErrorBoundaryState = { hasError: false, error: null };
  
  {/* エラーから派生状態を取得 */}
  static (error: Error) {
    return { hasError: true, error };
  }
  
  {/* コンポーネントがキャッチ */}
  (error: Error, errorInfo: ErrorInfo) {
    console.error('Error caught:', error);
    console.error('Error info:', errorInfo.componentStack);
    {/* 監視サービスにログ */}
    // logErrorToService(error, errorInfo);
  }
  
  render() {
    if (this.state.) {
      return (
        <div>
          <h2>Something went wrong</h2>
          <details>
            <summary>Error details</summary>
            <pre>{this.state.error?.toString()}</pre>
          </details>
        </div>
      );
    }
    
    return this.props.;
  }
}

function BuggyComponent() {
  const [count, setCount] = useState(0);
  
  if (count === 3) {
    throw new Error('Count reached 3!');
  }
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

function App() {
  return (
    < >
      <h1>Error Boundary Demo</h1>
      <BuggyComponent />
    </>
  );
}

export default App;