react-error-boundary
Error BoundaryをFunctional Componentでも定義できるようにするlibrary
React v17時点ではError Boundaryのfallbackする処理をclass componentでしか定義できない
defaultではError Boundaryが捕捉しないerrorの制限があるが、このlibraryだとfetch時のerrorも捕捉できる
例
tsimport {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するとトップページに飛ぶ
ts<Button className="mt-4" onClick={() => window.location.assign(window.location.origin)}>
Refresh
</Button>なぜtop pageに飛ばすか？
なるほど
reloadだと、errorの内容によっては無限にerrorが出続ける可能性がある
類似
参考