Zenn
Open21

Error Boundary調べ

Next.js
TypeScript
errorboundary
nus3nus3

reactのドキュメント読む
https://ja.reactjs.org/docs/error-boundaries.html

nus3nus3

ドキュメントと同じようなこと書いてる気もするけど

  • error boundaryコンポーネントの子コンポーネントのレンダリングエラーをcatchして代わりのUIを表示するもの
  • classコンポーネントでの実装
  • イベントハンドラ(handleClickとか)のerrorはcatchしない
nus3nus3

実装して動作確認してみる

nus3nus3

errorをthrowしてみる

  const handleError = () => {
    throw new Error('test')
  }
nus3nus3

yarn devの場合

yarn buildからのyarn startの場合
dialog出てこずconsoleにエラーが測れるだけ

nus3nus3

404ページを別途作る

src/pages/404.tsx
import { NextPage } from 'next'

const Error404: NextPage = () => {
  return <p>404専用ページだよ</p>
}

export default Error404
nus3nus3

該当ページでthorw errorしてもカスタムのerrorページに飛ぶわけではないと

nus3nus3

ドキュメントに書いてある通りイベントハンドラでerrorをthorwしてもErrorBoundaryは反応しない(consoleにエラーが測れるだけ)

nus3nus3

まとめ

nus3nus3

Next.jsのCustom Error Page
(クライアントサイドレンダリング前提)

  • pages/_error.tsxに定義
  • 404だけ別途pages/404.tsxに作った方が良いかも(最適化されるよ的な)
  • getInitialProps内でエラー監視(sentryとか？)の設定してもいいかも
  • page以下のコンポーネントでイベントハンドラ以外のerrorがthorwされたらcustom error pageが表示される
  • getInitialPropsでinitial pageがloadされるときのハンドリングが定義できる

Error Boundary

  • _app.tsxでError Boundary呼ぶと該当のerror(イベントハンドラ以外)がpage以下のコンポーネントでthorwされた時にError Boundary側がレンダリング される
  • 基本ClassComponentでかく

共通

  • Error Boundaryで拾ってくれるエラーはpages/_error.tsxも拾ってくれそうなのでNextのエラーハンドリングに寄せるで良さそう
  • イベントハンドラ内のエラーはpages/_error.tsxでも検知しないので別途設計が必要そう
nus3nus3

TODO

  • イベントハンドラのエラーハンドリング設計
nus3nus3

エラーハンドリングで考えること

  • ランタイムエラー
  • イベントハンドラでのエラー
    • adapter, usecase, containerなどthrowしたエラーを最終的にどこで処理するか
  • stackについて
  • エラーからのリカバリについて
    • nextjsのカスタムエラー？
    • イベントハンドラの場合は共通でなんか処理する？
  • 現状のコードではどのような場合にthrow new Error()してるか調べる
nus3nus3

わざと子コンポーネントでランタイムエラー起こそうと思ったらbuildエラーになるだけだった
(foobarは未定義の変数)

    <div>
      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
      {/* @ts-ignore */}
      {foobar}
    </div>

基本的にわざとランタイムエラーになるような書き方するとビルド時にnextjsがチェックしてくれてて、ビルドが失敗するようになってるっぽい

nus3nus3

console.errorはsentryにエラーログが収集されない
consoleの内容はちゃんと収集され取りました