NextjsでのErrorBoundaryの使い分け（page単位とコンポーネント単位）

NextjsでのError Boundaryの使い分け

初めに

業務でNextjsでweb applicationを作成しています。
Error Boundaryを使ってエラー時のUIの対応を行いました。
error.tsxは使ったことはあるのですが、
client componentで起きているjavascriptエラーをコンポーネント単位でエラー時のUIの表示をする必要があり、error.tsxのページ単位でのエラーを表示したくない。コンポーネント単位で抑えたいという要件です。
そこでErrorBoundary.tsxを使い対応を行ったので備忘として書き記したいと思います。

上記の実装にあたり、初めてError Boundary.tsxを使い実装しました。

間違いやアドバイスあればご教示いただきたいです！

結論:使い分け

どちらもerrorboundaryに変わりはありませんが、用途は異なるようです。
自分の中では使い分けは以下で理解しました。
今回は後者のErrorBoundary.tsxについて触れます。

• error.tsx: ページレベルのエラー（nextjs特有のerrorboundary）
• ErrorBoundary.tsx: コンポーネントレベルのエラー（reactのクライアントコンポーネント用errorboundary）

概要

React Error Boundaryは、コンポーネントツリー内でJavaScriptエラーをキャッチし、フォールバックUIを表示する仕組み。

Next.js App Routerでの実装

1. 共通利用のError Boundaryコンポーネント作成

'use client'
import { Component, ReactNode } from 'react'

interface Props {
  children: ReactNode
  fallback?: ReactNode
}

interface State {
  hasError: boolean
}

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError(): State {
    return { hasError: true }
  }

  componentDidCatch(error: Error, errorInfo: any) {
    console.error('Error caught by boundary:', error, errorInfo)
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback ?? <p>エラーが発生しました。</p>
    }
    return this.props.children
  }
}

2. コンポーネントをラップしfallback要素としてエラー時に表示したい内容を渡す

<ErrorBoundary fallback={<ErrorComponent />}>
  <ComponentA/>
</ErrorBoundary>

Next.js特有の注意点

• Server Component内では使用不可 - 'use client'が必要
• Client Component境界で実装 - Server/Client間でエラーハンドリングを分離

終わりに

nextjsでのserver componentでの fetchエラー時に表示するUIの対応は以前から行っていましたが、今回初めてclient componentで発生したエラーをError Bonudry.tsxを使い対処しました。
間違えている箇所やアドバイスがあればぜひご指摘ください！

実装にあたり参考にした記事

https://zenn.dev/akfm/books/nextjs-basic-principle

https://zenn.dev/k_mori/books/24320553af0956

https://zenn.dev/hakoten/articles/f5b577d8b63a4a