Next.jsにおけるエラー境界の実装

Next.jsでは、ReactのError Boundaryを使用して、予期しないエラーが発生した際にアプリケーションの一部がクラッシュするのを防ぐことができます。エラーをキャッチし、ユーザーにカスタムメッセージやエラーページを表示することで、アプリケーションの安定性を向上させます。ここでは、エラー境界の基本的な実装方法と、その活用法について解説します。

ReactのErrorBoundaryを使ったエラー境界

Next.jsのアプリケーションでエラーをキャッチするには、ErrorBoundaryを利用する方法があります。これは、子コンポーネントで発生したエラーをキャッチし、代わりにフォールバックUIを表示する仕組みです。

import React from 'react';
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    console.error(error, errorInfo);
  }
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}
export default ErrorBoundary;

このErrorBoundaryコンポーネントでアプリケーション全体や特定の部分をラップし、エラー発生時に安全なUIに切り替えることができます。

global-error.jsの利用

Next.jsのApp Routerで、アプリ全体のエラーを処理するためにglobal-error.jsを使用することができます。このファイルは、アプリ全体で発生するエラーを包括的にキャッチし、フォールバックUIを表示する役割を果たします。

'use client';
import React from 'react';
export default function GlobalError({ error, reset }) {
  return (
    <div>
      <h1>エラーが発生しました。</h1>
      <button onClick={reset}>もう一度試す</button>
    </div>
  );
}

このglobal-error.jsは、クライアントサイドで動作し、本番環境でのみ有効です。開発中にはデフォルトのエラーメッセージが表示されます。

ユーザー入力を保持するための工夫

エラーが発生した際に、フォームの入力内容が失われないようにするためには、sessionStorageを使ったキャッシュの手法が効果的です。例えば、GitHubのようなサイトでは、入力中のデータが自動的に保存され、エラー後やページのリロード後でも復元可能です。

sessionStorage.setItem('formData', JSON.stringify(formData));
const savedData = JSON.parse(sessionStorage.getItem('formData'));

この方法を使用すると、エラー時に入力データを保持でき、ユーザー体験を向上させることができます。

まとめ

Next.jsでのエラー境界の実装は、アプリケーションの安定性を保ち、ユーザーに快適な体験を提供するために不可欠です。ErrorBoundaryやglobal-error.jsを利用して、エラー発生時に適切な処理を行いましょう。また、ユーザー入力をキャッシュする工夫を取り入れることで、エラー時でもデータを失わない工夫が可能です。

参照:

`Next.js`のError Boundaryについて