react-error-boundary
Error BoundaryをFunctional Componentでも定義できるようにするlibrary
React v17時点ではError Boundaryのfallbackする処理をclass componentでしか定義できない
github
defaultではError Boundaryが捕捉しないerrorの制限があるが、このlibraryだとfetch時のerrorも捕捉できる
useErrorHandlerを使う
例
code:ts
import {ErrorBoundary} from 'react-error-boundary'
function ErrorFallback({error}) {
return (
<div role="alert">
<p>Something went wrong:</p>
<pre style={{color: 'red'}}>{error.message}</pre>
</div>
)
}
function App() {
return (
<div>
<ErrorBoundary FallbackComponent={ErrorFallback}>
<A />
<B />
</ErrorBoundary>
</div>
)
}
fallbackする処理をFCで書いて、<ErrorBoundary />のpropsにわたすだけ
bulletproof-reactで使われている
実装箇所
rootに近い箇所で1つだけ使っている
Errorが起きた場合は、「Refresh」と書かれたボタンを表示する
clickするとトップページに飛ぶ
code:ts
<Button className="mt-4" onClick={() => window.location.assign(window.location.origin)}>
Refresh
</Button>
なぜtop pageに飛ばすか?
https://zenn.dev/meijin/articles/bulletproof-react-is-best-architecture#エラーハンドリングが勉強になる
なるほどmrsekut.icon
reloadだと、errorの内容によっては無限にerrorが出続ける可能性がある
windowlocation.assign
類似
use-error-boundary
https://github.com/JoschuaSchneider/use-error-boundary
参考
Use react-error-boundary to handle errors in React