環境
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の内容が表示される。
初期表示は下記画像のようになる。
