react-error-boundary

Error BoundaryをFunctional Componentでも定義できるようにするlibrary

React v17時点ではError Boundaryのfallbackする処理をclass componentでしか定義できない

defaultではError Boundaryが捕捉しないerrorの制限があるが、このlibraryだとfetch時のerrorも捕捉できる

例

code:ts

import {ErrorBoundary} from 'react-error-boundary'

function ErrorFallback({error}) {

return (

<p>Something went wrong:</p>

<pre style={{color: 'red'}}>{error.message}</pre>

</div>

)

}

function App() {

return (

<div>

<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に飛ばすか？

なるほどmrsekut.icon

reloadだと、errorの内容によっては無限にerrorが出続ける可能性がある

類似

参考