React でエラー境界をマスターする: 効果的なエラー処理のガイド

エラー境界とは何ですか?

アプリケーションを構築する際、エラーは避けられません。これらは API、UI、またはその他の場所から取得される可能性があります。

これらのエラーを適切に処理し、エラーにもかかわらず良好な UX を維持することが非常に重要です。

エラー境界は、React でのエラー処理方法の 1 つです。

---

エラー境界はどのように役立ちますか?

これを理解するために、エラー境界が導入される前の状況を理解しましょう。

エラー境界より前は、コンポーネント内で発生したエラーが最終的に伝播し、UI が壊れたり、白い画面がレンダリングされたりしました。

これにより、非常に悪い UX が発生しました。

エラー境界は、そのようなエラーを処理し、UI を壊したり白い画面が表示されたりするのではなく、フォールバック UI を表示するのに役立ちます。

---

エラー境界の使い方は？

React v16 ではエラー境界が正式に導入されました。

これは、アプリケーションをラップするために使用できるクラスベースのコンポーネントです。

アプリケーションにエラーが発生した場合や、そうでない場合に表示されるフォールバック UI を受け入れます。単に子コンポーネントをレンダリングして、アプリケーションの通常のフローを再開します。

これは、React ドキュメントで推奨されている使用方法です。

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, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}

---

React のエラー境界の問題は何ですか?

で発生したエラーをキャッチできません

• イベント ハンドラー (これらのエラーは try-catch ブロックで処理する必要があります)
• 非同期コード (API、setTimeout、requestAnimationFrame など)
• サーバー側レンダリング
• Error Boundary 自体で発生するエラー
• 機能コンポーネントでは機能しません。ただし、コードをいくつか変更するだけで動作させることができます。
• 内部ではフックは使用できません。

---

解決策は何でしょうか？

react-error-boundary という npm パッケージがあり、これは従来の Error Boundary コンポーネントの上にあるラッパーです。

このパッケージを使用すると、従来のエラー境界コンポーネントで直面するすべての問題を克服できます。

---

使い方は？

アプリケーション全体を でラップすることも、個々のコンポーネントを でラップすることもできます。

実装の粒度はあなた次第です。

使い方を理解しましょう。

import React from 'react';
import { ErrorBoundary } from "react-error-boundary";

const App = () => {
return <ErrorBoundary fallback={<div>Something went wrong</div>}>
/* rest of your component */
</ErrorBoundary>
}

これは、ErrorBoundary を使用する最も簡単な例です。このライブラリにはさらに多くの機能があります。

---

反応エラー境界 API を理解する

さまざまなシナリオで API を理解してみましょう。

1.アプリケーションのエラーに対する汎用フォールバック UI を表示したい

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const App = () => {
 return <ErrorBoundary fallback={<div>Something went wrong</div>}>
 /* rest of your component */
 </ErrorBoundary>
 }

2.フォールバック コンポーネントで特定のエラーの詳細を表示したい

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 function fallbackRender({ error, resetErrorBoundary }) {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre style={{ color: "red" }}>{error.message}