Error Boundary
React ComponentのrenderingにおけるError Handling
子Componentのrendering時に、errorが発生した際に、fallbackを提供する
実行時errorが起きた時に、代替表示をする
仮にError Boundaryを使っていない場合、unmountされる ref
だから画面全体が真っ白になるわけではない
Component上の
try/catch のようなもの通常のComponentのrenderingが
try の中で実行され、errorが起きた際は、子から最も近いError Boundaryが
catch するラベルとしては、以下のようなclass Componentのことを「Error Boundary」と呼ぶ
static getDerivedStateFromError() か componentDidCatch() のいずれかまたは両方を定義したclass Component
Reaact v17の時点では、classにしか対応していない
FC及びhooksを使っては書けない
だたし、FCでも同じようなことを実現するlibraryにreact-error-boundaryがある
何が嬉しいか
子Componentはerrorがなかったときの処理に集中できる
Component内に
if(isError) {..} のようなものを書く必要がなくなる複数のComponentのerrorをまとめて処理したい場合に書くのが簡単
それらをまとめて
<ErrorBoundary /> で囲うだけで良いErrorBoundaryで囲う粒度
一番rootに一つだけ書いても良いし、細かく刻んでも良い
仮にproject全体を1箇所だけしか囲わなかった場合、
sidebarやfooterの一部でerrorがで起きただけなのに、project全体でfallbackが表示されることになる
tsReactDOM.render(
<ErrorBoundary>
<App />
</ErrorBoundary>,
document.getElementById("root")
);methods
static getDerivedStateFromError() fallback UIをrenderingする為に使う
componentDidCatch() error情報をlogに記録するために使う
例
errorを補足し、fallbackを返すComponentをclassで定義する
tsclass ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
// これ
componentDidCatch(error, info) {
this.setState({ hasError: true });
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
// fallback用のUI
return <h1>errorが発生しました</h1>;
}
return this.props.children;
}
}捕捉したいまとまりを囲んで使う
ts<A>
<B/>
<ErrorBoundary1>
<C/>
<ErrorBoundary2>
<D/>
<E/>
</ErrorBoundary2>
<ErrorBoundary3>
<F />
</ErrorBoundary3>
</ErrorBoundary1>
<A/>Bでerrorになった場合は、補足されない
CやErrorBoundery2自身がerrorになった場合は、ErroBoundary1がfallbackする
Dでerrorになった場合は、DとEが一緒にfallbackされる
Fでerrorになった場合は、Eのみでfallbackされる。B,C,D,Eなどには影響がない
普通にtry/catch書いている時と同じ