React エラー境界の説明

年間 500 億回以上の Web サイト アクセスを記録し、 Higglo Digital (最先端のデジタル エージェンシー) を設立したサイト全体で働いてきた私は、技術トピックについて執筆し、エンジニアがキャリアを前進させるのに役立つ強固な基盤を持つように教えています。また、デジタル遊牧民向けの素晴らしい製品も作成しています。チェックしてください!

エラー境界は React の機能で、アプリケーションの実行時エラーをキャッチして処理し、アプリケーション全体のクラッシュを防ぐことができます。これは、1 つのエラーでアプリケーション全体が壊れてしまい、ユーザー エクスペリエンスが低下する可能性がある大規模なアプリケーションで特に役立ちます。

エラー境界を作成するには、クラス コンポーネントを使用して、 という新しいライフサイクル メソッドを追加しますcomponentDidCatch。このメソッドは、エラー オブジェクトとエラー情報オブジェクトの 2 つの引数を取ります。エラー オブジェクトには実際に発生したエラーが含まれ、エラー情報オブジェクトにはコンポーネント ツリー内でエラーが発生した場所に関する詳細が含まれます。

クラス コンポーネントでエラー境界を作成する方法の例を次に示します。

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.log(error, errorInfo);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

<MyErrorBoundary>
  <MyComponent />
  <MyOtherComponent />
</MyErrorBoundary>

エラー境界は、境界内で発生したエラーのみをキャッチすることに注意してください。エラー境界の子コンポーネントでエラーが発生した場合、境界はそれをキャッチして処理します。ただし、境界の親コンポーネントでエラーが発生した場合、境界はそれをキャッチしません。

エラー境界を使用して、コンポーネントのレンダリング中に発生するエラーをキャッチすることもできます。これを行うには、エラー境界try-catchのメソッドでブロックを使用できます。render例えば：

render() {
  try {
    return this.props.children;
  } catch (error) {
    // You can also log the error to an error reporting service
    console.log(error);
    this.setState({ hasError: true });
    return <h1>Something went wrong.</h1>;
  }
}

エラー境界は、React アプリケーションでエラーを処理するための強力なツールであり、単一のエラーが原因でアプリケーション全体がクラッシュするのを防ぐことで、ユーザー エクスペリエンスを向上させるのに役立ちます。コンポーネント ツリーをエラー境界でラップすることにより、より適切でユーザー フレンドリーな方法でエラーをキャッチして処理できます。

Higglo Digital は、受賞歴のある Web サイトと最先端のデジタル戦略を使用して、ビジネスが Web ゲームを打ち負かすのを支援します。

また、 Wanderlust Extensionを作成して、厳選されたコンテンツで世界中の最も美しい場所を発見しました。見てみな！