設計彈性 UI：React 中錯誤處理的進階模式和可訪問性

建構健壯的React使用者介面：進階錯誤處理模式與無障礙性

建立強大的使用者介面不僅僅是顯示錯誤訊息。本文將探討React中高階錯誤邊界模式、全域錯誤處理策略以及包容性回退UI設計的可訪問性問題。讓我們深入研究！

---

進階錯誤邊界模式

React 19 引入了內建的 ErrorBoundary 元件，簡化了錯誤處理，並與現代React實踐保持一致。

使用React內建錯誤邊界

新的 ErrorBoundary 元件是一種函數式、宣告式的方法，用於擷取和處理元件樹中的錯誤：

import { ErrorBoundary } from 'react';

const FallbackComponent = ({ error, resetErrorBoundary }) => (
  <div>
    <h2 id="发生错误">发生错误！</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>
);

關鍵特性

• fallbackComponent：宣告式地渲染回退UI。
• resetErrorBoundary：重置錯誤狀態，常用於重試機制。
• onError 回調：捕獲錯誤詳細資訊並將其記錄下來，用於偵錯或報告。

此內建解決方案無需自訂基於類別的實現，確保一致性和易用性。

---

全域錯誤處理

隨著應用程式的成長，全域處理錯誤至關重要，以防止邊緣情況被忽略。 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);
};

說明 - window.onerror：

• message：描述問題的錯誤訊息。
• source：發生錯誤的腳本的URL。
• lineno：發生錯誤的腳本的行號。
• colno：發生錯誤的列號。
• error：實際的錯誤物件（如果可用），可以提供有關問題的更多詳細資訊。

這允許您記錄相關的錯誤訊息，這有助於偵錯。 console.error 輸出可以替換為自訂錯誤處理機制，例如將日誌傳送到您的伺服器或追蹤錯誤統計資料。

說明 - window.onunhandledrejection：

• event.reason：此屬性包含與未處理的拒絕相關的理由或錯誤物件。通常，它將是 Promise 中拋出的錯誤訊息或異常。

此全域監聽器可確保擷取和記錄任何未處理的拒絕。這是一種確保非同步程式碼可預測行為的有用方法，它提供了一種識別和解決未處理的 Promise 拒絕引起的潛在問題的方法。

---

可訪問性注意事項

確保回退UI具有可訪問性有助於提高所有使用者的可用性，包括殘疾人士。

使用 ARIA 公告錯誤

使用 ARIA 即時區域動態地向螢幕閱讀器通告錯誤：

import { ErrorBoundary } from 'react';

const FallbackComponent = ({ error, resetErrorBoundary }) => (
  <div>
    <h2 id="发生错误">发生错误！</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>
);

焦點管理

當發生錯誤時，將焦點直接指向錯誤訊息，以便於導航：

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

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

---

總結

透過利用React 19內建的ErrorBoundary元件，實現全域錯誤處理並優先考慮可訪問性，您可以建立優雅地處理故障並迎合不同使用者群體的UI。記住，UI設計中的彈性不僅僅是恢復錯誤——它還關乎與使用者的信任。

您在應用程式中處理錯誤的方法是什麼？

以上是設計彈性 UI：React 中錯誤處理的進階模式和可訪問性的詳細內容。更多資訊請關注PHP中文網其他相關文章！