回復力のある UI の設計: React でのエラー処理のための高度なパターンとアクセシビリティ-jsチュートリアル-php.cn

回復力のある UI の設計: React でのエラー処理のための高度なパターンとアクセシビリティ

Patricia Arquette

リリース： 2025-01-22 04:43:12

オリジナル

189 人が閲覧しました

Designing a Resilient UI: Advanced Patterns and Accessibility for Error Handling in React

堅牢な React ユーザーインターフェイスの構築: 高度なエラー処理パターンとアクセシビリティ

強力なユーザーインターフェイスの構築には、単にエラーメッセージを表示するだけではありません。この記事では、React の包括的なフォールバック UI 設計における高度なエラー境界パターン、グローバルエラー処理戦略、およびアクセシビリティの問題について検討します。掘り下げてみましょう！

高度なエラー境界モード

React 19 では、エラー処理を簡素化し、最新の React の実践に合わせた組み込みの ErrorBoundary コンポーネントが導入されています。

React の組み込みエラー境界を使用する

新しい ErrorBoundary コンポーネントは、コンポーネントツリー内のエラーをキャッチして処理する機能的で宣言的な方法です。

<code class="language-javascript">import { ErrorBoundary } from 'react';

const FallbackComponent = ({ error, resetErrorBoundary }) => (
  <div>
    <h2>发生错误！</h2>
    <p>{error.message}</p>
    <button onClick={resetErrorBoundary}>重试</button>
  </div>
);

const App = () => (
  <ErrorBoundary fallbackComponent={<FallbackComponent />} onError={(error, info) => console.error('ErrorBoundary 捕获到错误：', error, info)}>
    <MyComponent />
  </ErrorBoundary>
);</code>

ログイン後にコピー

主な機能

fallbackComponent: フォールバック UI を宣言的にレンダリングします。
resetErrorBoundary: エラーステータスをリセットします。再試行メカニズムでよく使用されます。
onError コールバック: エラーの詳細をキャプチャし、デバッグまたはレポートのためにログに記録します。

この組み込みソリューションにより、カスタムのクラスベースの実装が不要になり、一貫性と使いやすさが保証されます。

グローバルエラー処理

アプリケーションが成長するにつれて、エッジケースが無視されないようにエラーをグローバルに処理することが重要になります。 JavaScript は、アプリケーションレベルでこれらのエラーを処理できるようにするグローバルイベントリスナーを提供します。エラー処理を効果的に一元化する方法は次のとおりです:

捕捉されなかったエラーと拒否を捕捉する

グローバルイベントリスナーを使用して未処理のエラーをキャッチします:

<code class="language-javascript">// 捕获未捕获的 JavaScript 错误
window.onerror = (message, source, lineno, colno, error) => {
  console.error("捕获全局错误：", { message, source, lineno, colno, error });
};

// 捕获未处理的 Promise 拒绝
window.onunhandledrejection = (event) => {
  console.error("未处理的 Promise 拒绝：", event.reason);
};</code>

ログイン後にコピー

説明 - window.onerror:

message: 問題を説明するエラーメッセージ。
source: エラーが発生したスクリプトの URL。
lineno: エラーが発生したスクリプトの行番号。
colno: エラーが発生した列番号。
error: 実際のエラーオブジェクト (利用可能な場合)。問題の詳細を提供できます。

これにより、関連するエラー情報をログに記録でき、デバッグに役立ちます。 console.error 出力は、サーバーへのログの送信やエラー統計の追跡などのカスタムエラー処理メカニズムに置き換えることができます。

説明 - window.onunhandledrejection:

event.reason: この属性には、未処理の拒否に関連付けられた理由またはエラーオブジェクトが含まれます。通常、これは Promise からスローされるエラーメッセージまたは例外です。

このグローバルリスナーは、未処理の拒否を確実に捕捉し、ログに記録します。これは、非同期コードの予測可能な動作を保証する便利な方法であり、未処理の Promise 拒否によって引き起こされる潜在的な問題を特定して解決する方法を提供します。

アクセシビリティに関する注意事項

フォールバック UI がアクセシブルであることを確認すると、障害のある人を含むすべてのユーザーの使いやすさが向上します。

ARIA を使用してエラーを通知します

ARIA ライブ領域を使用してスクリーンリーダーにエラーを動的に通知します:

<code class="language-javascript">import { ErrorBoundary } from 'react';

const FallbackComponent = ({ error, resetErrorBoundary }) => (
  <div>
    <h2>发生错误！</h2>
    <p>{error.message}</p>
    <button onClick={resetErrorBoundary}>重试</button>
  </div>
);

const App = () => (
  <ErrorBoundary fallbackComponent={<FallbackComponent />} onError={(error, info) => console.error('ErrorBoundary 捕获到错误：', error, info)}>
    <MyComponent />
  </ErrorBoundary>
);</code>

ログイン後にコピー

フォーカス管理

エラーが発生した場合、ナビゲーションを容易にするためにエラーメッセージに直接フォーカスを設定します:

<code class="language-javascript">// 捕获未捕获的 JavaScript 错误
window.onerror = (message, source, lineno, colno, error) => {
  console.error("捕获全局错误：", { message, source, lineno, colno, error });
};

// 捕获未处理的 Promise 拒绝
window.onunhandledrejection = (event) => {
  console.error("未处理的 Promise 拒绝：", event.reason);
};</code>

ログイン後にコピー

概要

React 19 の組み込み ErrorBoundary コンポーネントを活用し、グローバルエラー処理を実装し、アクセシビリティを優先することで、障害を適切に処理し、多様なユーザーグループに対応する UI を作成できます。 UI デザインにおける復元力は、単にエラーから回復するだけではなく、ユーザーとの信頼も重要であることを忘れないでください。

アプリケーションのエラーを処理するためのアプローチは何ですか?

以上が回復力のある UI の設計: React でのエラー処理のための高度なパターンとアクセシビリティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。