ReactのcomponentDidCatchを使ってErrorハンドリングしたら開発者もユーザーも幸せになれそう

経緯

現在Reactのプロジェクトに携わっているわけですが、ユーザーからたまに下記のようなお問い合わせを受けることがあります。

「ページが真っ白で何もできない」

もちろん「500エラー」とかその辺はすでにハンドリングしているわけですが、たまにこういった問い合わせがあったります。んで、だいたいよくあるのが「ReferenceError: hoge is not defined」とかだったりするんですよね。
フロントのcomponentで起きたエラーある場合に起きるのですが、本番環境ではログは出ないようになっているので、何がundefinedなのかわからないんですよね。

その際に、どんなエラーでどこのページで起きたかわかればエラーの修正がしやすいのかなと。

componentDidCatchを使う

ってか、ほぼほぼこれだけで解決です。こいつのすごいのは子コンポーネントにも孫コンポーネントにも、てか配下のコンポーネントのどこかにフロント側のエラーがあるとエラーを返してくれます。またAPIとの通信が必要なもののエラーはキャッチしないです。例えばsubmit時のエラーでは作動しないです。
なので、一番上のコンポーネントにこんな感じのコードを書きます。

componentDidCatch(error, info) {
    if (ENV !== 'DEV' && error) {
      const errorLog = {
        path: window.location.href,
        error: `${error}`,
        id: this.props.user.userId
      }

      this.props.history.push(`/is-error?error=${JSON.stringify(errorLog)}`)
    }
  }

開発中にこのエラーを受け取ってしまうといちいち/is-error?error=に遷移してしまうので、ENV !== 'DEV'としています。
errorを受け取ったら/is-error?error=に遷移をしてurlにエラーログが入るようにしています。今回はエラーの内容とユーザーID、is-errorの前にいたページをurlに入るようにしている感じです。

ちなみに、エラーページ何かしらメッセージを表示してではトップページへの遷移ができるようにしておけば良いかと。

Google アナリティクスで検索しやすいかも

エラーが起きたらエラーページに遷移するので、Google アナリティクスさえ設定していれば「ページ」からis-errorを検索すれば、起きているエラーもわかります。
しかも、どれくらいそのエラーができているかもわかるので、エラーの修正の優先度もつけやすいのではと思います。

まとめ

このcomponentDidCatchを使ったErrorハンドリングも今後使いにくい部分も出てくると思うので、その辺は追記していきます！！