React:ErrorBoundaryコンポーネントの動作確認

環境

React:v18.3.1

資料

Tips

以下のパターンがある。

  • return文の前の処理で例外をスローするとErrorBoundaryコンポーネントはキャッチする。
  • useErrorBoundaryフックで取得した関数へErrorインスタンスを渡すと、ErrorBoundaryコンポーネントはキャッチする。

インストール

下記コマンドを実行して、ErrorBoundaryコンポーネントをインストールする。

% npm install react-error-boundary

コード

ErrorBoundaryParent.tsxの内容

import { ErrorBoundary } from 'react-error-boundary';
import { MouseEventHandler, ReactNode } from 'react';
import ErrorBoundaryChild from './ErrorBoundaryChild.tsx';
import ErrorBoundaryChildFunc from './ErrorBoundaryChildFunc.tsx';

type handleFallbackProps = {
  error: Error,
  resetErrorBoundary: MouseEventHandler,
}

function ErrorBoundaryParent(): ReactNode {
  const handleFallback = ({ error, resetErrorBoundary }: handleFallbackProps) => (
    <>
      <div>
        以下のエラーが発生しました。
      </div>
      <p>{error.message}</p>
      <button
        type="button"
        onClick={resetErrorBoundary}
      >
        Retry
      </button>
    </>
  );

  const handleReset = () => {
    console.log('Retryボタンがクリックされました');
  };

  return (
    <>
      <div>
        ErrorBoundaryParent.tsx
      </div>

      <hr />
      <br />
      <ErrorBoundary
        fallback={<div>エラーが発生しました</div>}
        onError={(error) => console.log('ErrorBoundaryParent error = ', error)}
      >
        <ErrorBoundaryChild />
      </ErrorBoundary>

      <hr />
      <br />
      <ErrorBoundary
        onReset={handleReset}
        fallbackRender={handleFallback}
      >
        <ErrorBoundaryChild />
      </ErrorBoundary>

      <hr />
      <br />
      <ErrorBoundary
        fallback={<div>ErrorBoundaryChildFuncでエラーが発生しました</div>}
        onError={(error) => console.log('ErrorBoundaryChildFunc error = ', error)}
      >
        <ErrorBoundaryChildFunc />
      </ErrorBoundary>
    </>
  );
}

export default ErrorBoundaryParent;

ErrorBoundaryChild.tsxの内容

function ErrorBoundaryChild() {
  throw new Error('ErrorBoundaryChild Error');

  return (
    <div>
      ErrorBoundaryChild.tsx
    </div>
  );
}

export default ErrorBoundaryChild;

ErrorBoundaryChildFunc.tsxの内容

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

function ErrorBoundaryChildFunc() {
  const { showBoundary } = useErrorBoundary();
  const handleBtnClick = () => {
    try {
      throw new Error('ErrorBoundaryChildFunc');
    } catch (e) {
      showBoundary(e);
    }
  };

  return (
    <>
      <div>
        ErrorBoundaryChildFunc.tsx
      </div>
      <button
        type="button"
        onClick={handleBtnClick}
      >
        エラー発生
      </button>
    </>
  );
}

export default ErrorBoundaryChildFunc;

結果

  • Retryボタンを押下すると、コンソールに「Retryボタンがクリックされました」と表示される。
  • エラー発生ボタンを押下すると、fallbackの内容が表示される。

初期表示は下記画像のようになる。

コメント

タイトルとURLをコピーしました