コードレビュー上級約18分

レビュー: エラー境界の問題

typescriptreacterror-handlingerror-boundary

コードレビュー課題

以下のReact + TypeScriptコードをレビューしてください。

背景

エラーバウンダリ(Error Boundary)コンポーネントの実装です。エラーハンドリングとユーザー体験に問題があります。

レビュー観点

componentDidCatchの実装
エラー情報のロギング
フォールバックUIの適切性
エラーリカバリー機能

あなたの回答

ErrorBoundary.tsxtypescript

import React, { Component, ReactNode } from 'react';
 
interface Props {
  children: ReactNode;
}
 
interface State {
  hasError: boolean;
  errorMessage: string;
}
 
class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      hasError: false,
      errorMessage: ''
    };
  }
 
  componentDidCatch(error: Error) {
    this.setState({
      hasError: true,
      errorMessage: error.message
    });
    console.log('Error occurred:', error);
  }
 
  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Something went wrong</h1>
          <p>Error: {this.state.errorMessage}</p>
          <pre>{this.state.errorMessage}</pre>
        </div>
      );
    }
 
    return this.props.children;
  }
}
 
export default ErrorBoundary;

行番号をクリックしてコメントを追加（Shift+クリックで範囲選択）

レビューサマリー

最低100文字必要です

承認判定

全体の重大度

コメントを追加し、サマリーを100文字以上入力してください

模範解答

回答を送信するか、「表示する」をクリックすると模範解答が表示されます。