Reactのerror boundaryでキャッチされないエラーをキャッチできるようにする

2022.03.17

WEB

システム開発

INDEX

Reactのerror boundary
error boundaryがキャッチしないエラー
Window: unhandledrejection イベント
error boundary が非同期コードをキャッチできない理由
unhandledrejectionに対応したerror boundary
まとめ

Reactのerror boundary

error boundary は自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチし、エラーを記録し、クラッシュしたコンポーネントツリーの代わりにフォールバック用の UI を表示する React コンポーネントです。error boundary は配下のツリー全体のレンダー中、ライフサイクルメソッド内、およびコンストラクタ内で発生したエラーをキャッチします。Error Boundary―React

子コンポーネントでエラーが発生した時にエラー画面をフォールバックUIとして表示してくれる機能です。

今回試していませんが、error boundaryをシンプルで再利用可能なラッパーを提供しているライブラリも存在するようです。

参照

https://github.com/bvaughn/react-error-boundary

2022年3月の時点では、関数コンポーネントのerror boundaryはサポートされていないので、クラスコンポーネントで記述します。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

公式ドキュメントより引用

https://ja.reactjs.org/docs/error-boundaries.html#introducing-error-boundaries

基本的な使い方はerror boundaryを作成して、以下のようにエラーをキャッチしたいコンポーネントをラップする形です。
こうすることでErrorBoundaryコンポーネントでラップした子コンポーネントで発生したエラーをキャッチしてくれるようになります。

import React from "react";
import ErrorBoundary from "./src/components/ErrorBoundary";

export const App = () => {
  return (
    <ErrorBoundary>
      <Component />
    </ErrorBoundary>
  )
}

ただし公式ドキュメントにも記載されている通り、全てのエラーをキャッチしてくれるわけではありません。

error boundaryがキャッチしないエラー

error boundary は以下のエラーをキャッチしません：

イベントハンドラ（詳細）
非同期コード（例：setTimeout や requestAnimationFrame のコールバック）
サーバサイドレンダリング
（子コンポーネントではなく）error boundary 自身がスローしたエラー

Error Boundary―React

非同期コードで発生したエラーをキャッチできないのは困るので、error boundaryでもエラーをキャッチできるようにした方法がGitHubのissueに載っています。

setState(() =>  { 
  throw new Error('hi')
})

参照

https://github.com/facebook/react/issues/14981#issuecomment-468460187

これでerror boundaryでも非同期コードで発生したエラーを補足できるようになりました。めでたしめでたし。

と言いたいところですが、大抵のWebアプリケーションではREST　APIやGraphQLなどのWeb APIを叩くような非同期コードを実行することが多いです。毎回適切にエラー処理が出来ていればいいのですが、エラー処理のし忘れやエラーを握りつぶしてしまうこともあります。人間だもの。

できることなら復旧可能なエラー以外は直ちにアプリケーションをクラッシュさせてエラー画面を表示したい、つまりerror boundaryでエラーをキャッチしたいのが心情です。そこで探してみると別の方法が同じissueと辿ったissueで紹介されていました。

   static getDerivedStateFromError(error) {
     // Update state so the next render will show the fallback UI.
     return { hasError: true };
   }

+  componentDidMount() {
+    window.addEventListener("unhandledrejection", this.onUnhandledRejection);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("unhandledrejection", this.onUnhandledRejection);
+  }
+
+  onUnhandledRejection = (event: PromiseRejectionEvent) => {
+    event.promise.catch((error) => {
+      this.setState(TopLevelErrorBoundary.getDerivedStateFromError(error));
+    });
+  };

参照

これで非同期コードで発生したエラーをerror boundaryでキャッチできるようになりました。

Window: unhandledrejection イベント

unhandledrejection イベントとは何ぞやということで調べました。

参照

ステータスがrejectedのPromiseが誰にもキャッチされなかった時に、JavaScriptエンジンがグローバルエラーを生成し、そのイベント名が unhandledrejection のようです。

error boundaryでWindowオブジェクトの unhandlerejection イベントを購読することで非同期コードで発生したエラーに対応しているんですね。

では、そもそもなぜerror boundaryは非同期コードのエラーをキャッチできないのでしょうか。

その謎を解明するべく、我々はアマゾンの奥地へと向かった。

error boundary が非同期コードをキャッチできない理由

色々と調べると素晴らしい記事を見つけました。

参照

https://dev.to/artemmalko/error-boundaries-in-react-how-its-made-3lam

ざっくり理解した要約：

Promiseのexecutorでエラーが発生すると、暗黙的にエラーをPromise.rejectとして扱う（Promise.rejectでエラーをラップする）［1］
error boundaryは同期コードのエラーはキャッチできるが、Promise.rejectでラップされたエラーはawait（Promise.catch）で待ち受けていないので、エラーとしてではなくステータスがrejectedのPromiseとして扱われてcatchブロックをすり抜ける［2］
結果、error boundaryで非同期コードをキャッチできない

unhandledrejectionに対応したerror boundary

最後に unhandledrejection に対応したerror boundaryを再掲します。

参照

https://github.com/facebook/react/issues/14981#issuecomment-743916884

import React from "react";

export class TopLevelErrorBoundary extends React.Component<{}, { hasError: boolean }> {
  constructor(props: {}) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(_error: any) {
    return { hasError: true };
  }

  componentDidMount() {
    window.addEventListener("unhandledrejection", this.onUnhandledRejection);
  }

  componentWillUnmount() {
    window.removeEventListener("unhandledrejection", this.onUnhandledRejection);
  }

  onUnhandledRejection = (event: PromiseRejectionEvent) => {
    event.promise.catch((error) => {
      this.setState(TopLevelErrorBoundary.getDerivedStateFromError(error));
    });
  };

  componentDidCatch(error: any, errorInfo: any) {
    console.log("Unexpected error occurred!", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <YourErrorViewHere />
      );
    }

    return this.props.children;
  }
}