前言

那為什么要在 React 中捕獲錯(cuò)誤呢？因?yàn)閺?React 16 開始，React 生命周期中的錯(cuò)誤如果未被停止，整個(gè)應(yīng)用就會(huì)自行卸載，導(dǎo)致崩潰。在此之前，即使組件中存在一些小錯(cuò)誤，它也會(huì)保留在屏幕上，但是現(xiàn)在，UI中某些無關(guān)緊要的部分，甚至是無法控制的某些第三方庫中的未捕獲錯(cuò)誤，都可能導(dǎo)致頁面崩潰，出現(xiàn)白屏的現(xiàn)象，影響用戶體驗(yàn)。所以，捕獲并處理 React 中的錯(cuò)誤至關(guān)重要。

在JavaScript中，我們可以使用 try...catch 來捕獲錯(cuò)誤，例如：

       
       

         
       
       
const fetchData = async () => {
  try {
    return await fetch("https://some-url-that-might-fail.com");
  } catch (error) {
    console.error(error); 
    return error;
  }
};

try...catch僅適用于命令式代碼，例如數(shù)據(jù)獲取；而不是適用于聲明式代碼，例如在組件中編寫的 JSX 就是聲明式代碼。那該如何在 React 中捕獲錯(cuò)誤呢？幸運(yùn)的是，在 React 16 中，引入了一個(gè)新概念：React Error Boundary。下面來看一下它是什么，以及如何使用。

React Error Boundary

React Error Boundary （錯(cuò)誤邊界）是 React 應(yīng)用中錯(cuò)誤處理的一種方式。它是一個(gè) React 組件，可以捕獲子組件樹中任何位置的 JavaScript 錯(cuò)誤，并記錄這些錯(cuò)誤，顯示一個(gè)備選 UI，而不是一個(gè)崩潰的組件樹（白屏）。它們就像一個(gè) JavaScript 的 catch {} 塊，但是只針對(duì)組件。

基本使用

在錯(cuò)誤邊界引入之前，組件內(nèi)部的錯(cuò)誤會(huì)不斷傳播并最終導(dǎo)致白屏或錯(cuò)誤的 UI，影響用戶體驗(yàn)。但是，使用錯(cuò)誤邊界，這些未處理的錯(cuò)誤可以被有效地包含和管理。

我們可以在整個(gè)應(yīng)用范圍內(nèi)設(shè)置錯(cuò)誤邊界，也可以在各個(gè)組件上進(jìn)行更細(xì)粒度的控制。需要注意的是，錯(cuò)誤邊界只會(huì)捕獲渲染時(shí)、生命周期方法和構(gòu)造函數(shù)中的錯(cuò)誤，但不會(huì)捕獲以下錯(cuò)誤：

• 事件處理（對(duì)于這種情況，需要使用常規(guī)的 try/catch 塊）

• 異步代碼（例如，setTimeout 或 requestAnimationFrame 回調(diào)函數(shù)）

• 服務(wù)端渲染

• 錯(cuò)誤發(fā)生在錯(cuò)誤邊界本身而不是其子組件中時(shí)

錯(cuò)誤邊界是在 React v16 中引入的，要使用錯(cuò)誤邊界，需要定義一個(gè)類組件，并添加以下生命周期方法之一或兩個(gè)：

• getDerivedStateFromError(): 這個(gè)生命周期方法在錯(cuò)誤拋出后渲染備選 UI。它在渲染階段被調(diào)用，所以不允許有副作用。

• componentDidCatch(): 這個(gè)方法用于記錄錯(cuò)誤信息。它在提交階段被調(diào)用，所以可以執(zhí)行副作用。

下面來看一個(gè) ErrorBoundary 類組件的例子，它實(shí)現(xiàn)了 getDerivedStateFromError() 和 componentDidCatch() 生命周期方法：

       
       

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

  static getDerivedStateFromError(error) {
    // 更新 state，下一次渲染將展示備選 UI。
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 可以渲染任意自定義的備選 UI
      return <h1>出錯(cuò)啦！</h1>;
    }

    return this.props.children; 
  }
}

// 在組件中使用
class App extends React.Component {
  render() {
    return (
      <ErrorBoundary>
        <MyComponent />
      </ErrorBoundary>
    );
  }
}

這里定義了一個(gè)名為 ErrorBoundary 的錯(cuò)誤邊界組件。它的構(gòu)造函數(shù)初始化了狀態(tài)對(duì)象，并設(shè)置 hasError 屬性為 false，表示當(dāng)前沒有發(fā)生錯(cuò)誤。

• getDerivedStateFromError() 方法在捕獲到錯(cuò)誤時(shí)會(huì)被調(diào)用。它接收一個(gè) error 對(duì)象作為參數(shù)，并返回一個(gè)新的狀態(tài)對(duì)象，將 hasError 屬性設(shè)置為 true，以便在下一次渲染時(shí)展示備選的 UI。

• componentDidCatch() 方法在捕獲到錯(cuò)誤后會(huì)被調(diào)用。在這個(gè)例子中，將錯(cuò)誤和錯(cuò)誤信息輸出到控制臺(tái)。

在 render() 方法中，根據(jù) hasError 的值來決定渲染原始子組件還是備選的 UI。如果 hasError 為 true，則渲染 <h1>出錯(cuò)啦！</h1>，否則渲染原始子組件。在組件中使用錯(cuò)誤邊界時(shí)，將需要進(jìn)行錯(cuò)誤邊界保護(hù)的組件包裹在 <ErrorBoundary> 組件中即可。

在React組件中，我們可以使用 Error Boundary 來包裹任何組件，這樣就不會(huì)因?yàn)橐粋€(gè)小組件的崩潰，而導(dǎo)致整個(gè)組件崩潰，致使出現(xiàn)白屏。只有出現(xiàn)錯(cuò)誤的組件處不能正常渲染，而是渲染備選 UI。也方便我們快速查找是哪個(gè)組件出了問題。

實(shí)現(xiàn)錯(cuò)誤邊界的通用設(shè)計(jì)模式

在實(shí)現(xiàn) React 錯(cuò)誤邊界時(shí)，可以根據(jù)實(shí)際情況使用以下三種設(shè)計(jì)模式。

組件級(jí)錯(cuò)誤邊界

這種方法涉及將單個(gè)組件包裝在錯(cuò)誤邊界中。這提供了高度的細(xì)粒度，允許單獨(dú)處理每個(gè)組件中的錯(cuò)誤。如果一個(gè)組件崩潰，錯(cuò)誤邊界可以捕獲錯(cuò)誤并阻止其向上傳播到組件樹。這意味著只有崩潰的組件受到影響，其余的應(yīng)用可以繼續(xù)正常運(yùn)行。

組件級(jí)錯(cuò)誤邊界在有彼此隔離且不共享狀態(tài)的組件時(shí)特別有用。如果其中一個(gè)組件渲染失敗，它不會(huì)影響其他組件。然而，如果許多組件需要擁有自己的錯(cuò)誤邊界，這種方法可能導(dǎo)致很多重復(fù)代碼。

布局級(jí)錯(cuò)誤邊界

布局級(jí)錯(cuò)誤邊界位于組件樹中更高的位置，通常包裝相關(guān)組件組。當(dāng)有密切相關(guān)的組件并共享一個(gè)公共狀態(tài)時(shí)，這是一個(gè)不錯(cuò)的選擇。

當(dāng)一個(gè)組件發(fā)生錯(cuò)誤時(shí)，布局級(jí)別的錯(cuò)誤邊界可以捕獲它并為整個(gè)組件組顯示一個(gè)錯(cuò)誤消息或備用 UI。這可以成為處理影響應(yīng)用整個(gè)部分的錯(cuò)誤的一種好方法，例如側(cè)邊欄或儀表板等。

然而，布局級(jí)錯(cuò)誤邊界比組件級(jí)粒度更大。一個(gè)組件的錯(cuò)誤可能會(huì)影響整個(gè)組件組，即使其他組件可以正常工作。

頂層錯(cuò)誤邊界

頂層錯(cuò)誤邊界位于組件樹的最頂部。它是一個(gè)通用的解決方案，可以處理應(yīng)用中發(fā)生的任何錯(cuò)誤。這種方法確保如果應(yīng)用中的任何地方發(fā)生錯(cuò)誤，都可以捕獲并進(jìn)行優(yōu)雅處理。

這可以防止整個(gè)應(yīng)用在發(fā)生錯(cuò)誤時(shí)崩潰。然而，頂層錯(cuò)誤邊界是粒度最大的方法。一個(gè)錯(cuò)誤可能會(huì)影響整個(gè)應(yīng)用，而不僅僅是錯(cuò)誤發(fā)生的組件或組件組。

react-error-boundary

上面我們提到，React Error Boundary 有一些限制，無法處理某些特殊情況。下面就介紹一個(gè)更強(qiáng)大的 React 錯(cuò)誤處理方式：**react-error-boundary。**它是一個(gè)小型的 React 錯(cuò)誤處理庫，它提供了增強(qiáng)的錯(cuò)誤處理功能和更靈活的方法來處理 React 應(yīng)用中的錯(cuò)誤，使開發(fā)人員能夠創(chuàng)建更強(qiáng)大且用戶友好的錯(cuò)誤處理機(jī)制。

react-error-boundary 使用了更現(xiàn)代化的方法，采用了 React Hooks 和函數(shù)組件，與當(dāng)前 React 開發(fā)的趨勢(shì)更加一致。它使用了一個(gè)簡(jiǎn)單的組件叫做 ErrorBoundary，可以用它來包裹潛在的容易出錯(cuò)的代碼。

下面是 react-error-boundary 提供的 props：

• FallbackComponent：用于指定一個(gè)自定義組件，在錯(cuò)誤邊界內(nèi)發(fā)生錯(cuò)誤時(shí)進(jìn)行渲染。它提供了靈活性，可以創(chuàng)建一個(gè)視覺上吸引人且信息豐富的用戶界面來顯示錯(cuò)誤，并提供任何必要的操作。

• fallbackRender：類似于 FallbackComponent，該屬性用于定義一個(gè)自定義的渲染函數(shù)來渲染錯(cuò)誤回退界面。它提供了對(duì)渲染過程的更多控制，并允許進(jìn)行更高級(jí)的錯(cuò)誤處理邏輯。

• onError：其接受一個(gè)回調(diào)函數(shù)，在錯(cuò)誤邊界捕獲到錯(cuò)誤時(shí)調(diào)用該函數(shù)，并傳遞錯(cuò)誤對(duì)象和組件堆棧跟蹤信息。它使我們能夠執(zhí)行額外的操作，例如記錄錯(cuò)誤或?qū)㈠e(cuò)誤報(bào)告發(fā)送到外部服務(wù)。

• onReset：其接受一個(gè)回調(diào)函數(shù)，在錯(cuò)誤邊界成功重置后觸發(fā)。它可以用于執(zhí)行清理操作或在錯(cuò)誤恢復(fù)后更新組件的狀態(tài)。

• fallbackProps：允許向 FallbackComponent 或 fallbackRender 函數(shù)傳遞額外的 props。它可以用于提供上下文或附加數(shù)據(jù)給錯(cuò)誤回退界面。

• retry：布爾值，確定錯(cuò)誤邊界是否允許重試導(dǎo)致錯(cuò)誤的操作。當(dāng)設(shè)置為 true 時(shí)，resetErrorBoundary 函數(shù)可以從錯(cuò)誤回退界面中調(diào)用以重試操作。

ErrorBoundary 組件

react-error-boundary 提供的 ErrorBoundary 組件有一個(gè)叫做 fallbackRender的屬性，它接受一個(gè)函數(shù)或一個(gè) React 元素，在捕獲到錯(cuò)誤時(shí)顯示。此外，它還提供了一個(gè) resetKeys 屬性，可以在特定 props 改變時(shí)重置組件的狀態(tài)。

react-error-boundary 的美妙之處在于避免了手動(dòng)編寫類組件和處理狀態(tài)，在后臺(tái)完成了所有工作，使開發(fā)人員能夠?qū)Ｗ⒂跇?gòu)建應(yīng)用。下面來看一個(gè)在組件中使用 react-error-boundary 的例子：

       
       

         
       
       
import { ErrorBoundary } from 'react-error-boundary'

function MyFallbackComponent({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>出錯(cuò)啦:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>點(diǎn)擊重試</button>
    </div>
  )
}

function MyComponent() {
  // 可能會(huì)拋出 JavaScript 錯(cuò)誤的一些組件邏輯
}

function App() {
  return (
    <ErrorBoundary
      FallbackComponent={MyFallbackComponent}
      onReset={() => {
        // 重置應(yīng)用狀態(tài)
      }}
      resetKeys={['someKey']}
    >
      <MyComponent />
    </ErrorBoundary>
  )
}

在這個(gè)例子中，當(dāng) ErrorBoundary 捕獲到錯(cuò)誤時(shí)，會(huì)渲染 MyFallbackComponent。它顯示錯(cuò)誤消息并提供一個(gè)按鈕來重置錯(cuò)誤狀態(tài)并嘗試再次渲染該組件。onReset 屬性用于清理在拋出錯(cuò)誤之前發(fā)生的副作用，而 resetKeys 屬性用于控制何時(shí)重置組件狀態(tài)。

ErrorBoundary 的onError 屬性是一個(gè)函數(shù)，每當(dāng)捕獲到錯(cuò)誤時(shí)都會(huì)被調(diào)用?？梢允褂迷搶傩詫㈠e(cuò)誤進(jìn)行上報(bào)：

       
       

         
       
       
// 錯(cuò)誤上報(bào)函數(shù)
function logErrorToService(error, info) {
  // 錯(cuò)誤上報(bào)邏輯...
  console.error("Caught an error:", error, info);
}

function App() {
  return (
    <ErrorBoundary
    	FallbackComponent={ErrorFallback}
      onError={logErrorToService}
    >
      <MyComponent />
    </ErrorBoundary>
  );
}

react-error-boundary 最強(qiáng)大的功能之一是就是能夠重置錯(cuò)誤邊界狀態(tài)，即清除錯(cuò)誤并嘗試重新渲染組件樹。當(dāng)錯(cuò)誤可能是短暫的，例如由于臨時(shí)斷開連接而發(fā)生的網(wǎng)絡(luò)錯(cuò)誤時(shí)，這是非常有用的。

可以使用提供給回退組件的 resetErrorBoundary 函數(shù)來重置錯(cuò)誤邊界。例如，可以在按鈕點(diǎn)擊時(shí)調(diào)用此函數(shù)，允許用戶手動(dòng)重試失敗的操作。

ErrorBoundary 可以接受一個(gè) onReset 屬性，該屬性是一個(gè)函數(shù)，在錯(cuò)誤狀態(tài)重置之前調(diào)用。此函數(shù)對(duì)于在錯(cuò)誤后重新渲染之前執(zhí)行任何清理或狀態(tài)重置操作非常有用。

resetKeys 屬性是一個(gè)值數(shù)組，當(dāng)更改時(shí)，會(huì)觸發(fā)錯(cuò)誤邊界的重置。當(dāng)知道更改某些 props 或狀態(tài)值應(yīng)該解決錯(cuò)誤時(shí)，這非常有用。以下是如何使用這些屬性的例子：

       
       

         
       
       
import { ErrorBoundary } from 'react-error-boundary'

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>出錯(cuò)啦:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>點(diǎn)擊重試</button>
    </div>
  )
}

function MyComponent({ someKey }) {
  // 可能會(huì)拋出 JS 錯(cuò)誤的一些組件邏輯
}

function App() {
  const [someKey, setSomeKey] = React.useState(null)

  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => setSomeKey(null)} // 在這里重置應(yīng)用狀態(tài)
      resetKeys={[someKey]} // 當(dāng) someKey 更改時(shí)重置錯(cuò)誤邊界
    >
      <MyComponent someKey={someKey} />
    </ErrorBoundary>
  )
}

在這個(gè)例子中，如果 MyComponent 中捕獲到錯(cuò)誤，則渲染 ErrorFallback 組件，顯示錯(cuò)誤消息和一個(gè)“點(diǎn)擊重試”按鈕。當(dāng)點(diǎn)擊此按鈕時(shí)，它調(diào)用 resetErrorBoundary，觸發(fā) onReset 函數(shù)并清除錯(cuò)誤狀態(tài)，從而再次渲染 MyComponent。如果 someKey prop 更改，則錯(cuò)誤邊界也會(huì)重置，提供了一種靈活的方式，根據(jù)應(yīng)用程狀態(tài)的更改恢復(fù)錯(cuò)誤。

useErrorHandler Hook

react-error-boundary 還提供了一個(gè) useErrorBoundary Hook，它是一個(gè)自定義的 React Hook，允許在函數(shù)組件的任何地方拋出錯(cuò)誤。被拋出的錯(cuò)誤將被最近的錯(cuò)誤邊界捕獲，就像從類組件的生命周期方法或渲染函數(shù)中拋出錯(cuò)誤時(shí)會(huì)被錯(cuò)誤邊界捕獲一樣。

當(dāng)處理異步代碼時(shí)，useErrorHandler Hook 特別有用，因?yàn)閽伋龅腻e(cuò)誤不會(huì)被組件的錯(cuò)誤邊界捕獲。以下是使用 useErrorHandler 的例子：

       
       

         
       
       
import { useErrorHandler } from 'react-error-boundary'

function MyComponent() {
  const handleError = useErrorHandler()

  async function fetchData() {
    try {
      // 獲取數(shù)據(jù)
    } catch (error) {
      handleError(error)
    }
  }

  return (
    ...
  );
}

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <MyComponent />
    </ErrorBoundary>
  );
}

在這個(gè)例子中，MyComponent 使用 useErrorHandler 獲取一個(gè)可以用來處理錯(cuò)誤的函數(shù)?！?函數(shù)是一個(gè)異步函數(shù)，用于獲取數(shù)據(jù)并捕獲錯(cuò)誤。如果發(fā)生錯(cuò)誤，它會(huì)傳遞給 handleError 函數(shù)，該函數(shù)會(huì)拋出錯(cuò)誤，以便可以被 ErrorBoundary 捕獲。

useErrorHandler 提供了一種強(qiáng)大的方式來處理函數(shù)組件中的錯(cuò)誤。它與 react-error-boundary 的 ErrorBoundary 組件無縫配合，使得在 React 中進(jìn)行錯(cuò)誤處理變得更加簡(jiǎn)單明了。

withErrorBoundary HOC

react-error-boundary 包還提供了一個(gè) withErrorBoundary HOC 的解決方案。它是一個(gè)高階組件，用于包裝將給定的組件，以捕獲該組件中的錯(cuò)誤。這樣做的好處是，在不改變組件原始實(shí)現(xiàn)或向組件樹中添加額外 JSX 的情況下，為組件添加錯(cuò)誤邊界。

       
       

         
       
       
import { withErrorBoundary } from 'react-error-boundary'

function MyComponent() {
  // 組件邏輯
}

const MyComponentWithErrorBoundary = withErrorBoundary(MyComponent, {
  FallbackComponent: ErrorFallback,
  onError: logErrorToService,
  onReset: handleReset,
  resetKeys: ['someKey']
});

function App() {
  return <MyComponentWithErrorBoundary someKey={someKey} />
}

在這個(gè)例子中，使用 withErrorBoundary 將 MyComponent 包裝在一個(gè)錯(cuò)誤邊界內(nèi)。withErrorBoundary 的第二個(gè)參數(shù)是一個(gè)可選對(duì)象，可以在其中提供與 ErrorBoundary 組件相同的 props：FallbackComponent、onError、onReset 和 resetKeys。

這種高階組件（HOC）的方法是在不修改組件實(shí)現(xiàn)的情況下為組件添加錯(cuò)誤邊界的一種優(yōu)雅的解決方案，特別適用于無法使用 Hooks 的類組件。它展示了 react-error-boundary 在適應(yīng)不同的編碼風(fēng)格和 React 開發(fā)范式方面的靈活性。

小結(jié)

看完了 react-error-boundary 的基本使用方式，我們來總結(jié)一下使用 react-error-boundary 的好處：

• 簡(jiǎn)單易用：該庫提供了簡(jiǎn)單直觀的 API，易于理解和使用。它抽象了錯(cuò)誤處理的復(fù)雜性，并向開發(fā)人員呈現(xiàn)了一種簡(jiǎn)單明了的方式來管理錯(cuò)誤。

• 適用于函數(shù)組件 ：與傳統(tǒng)的 React 錯(cuò)誤邊界需要使用類組件不同，react-error-boundary 是專為函數(shù)組件而設(shè)計(jì)的。它使用了 Hooks，更符合當(dāng)前 React 開發(fā)的趨勢(shì)。

• 靈活多樣：該庫提供了多種使用錯(cuò)誤邊界的方式，包括作為組件、高階組件 (HOC) 和自定義 Hook。這種靈活性使開發(fā)人員能夠根據(jù)自己的需求和編碼風(fēng)格選擇最佳的方法。

• 可自定義的回退界面：該庫允許在捕獲到錯(cuò)誤時(shí)顯示可自定義的回退界面。這比應(yīng)用崩潰或顯示空白屏幕要提供更好的用戶體驗(yàn)。

• 重置功能：該庫可以重置錯(cuò)誤狀態(tài)，使應(yīng)用能夠從錯(cuò)誤中恢復(fù)。這個(gè)功能對(duì)于可以在不需要完全重新加載頁面的情況下解決的臨時(shí)性錯(cuò)誤特別有用。

• 錯(cuò)誤報(bào)告：通過 onError 屬性，錯(cuò)誤可以被記錄到錯(cuò)誤報(bào)告服務(wù)中，提供了有價(jià)值的信息用于調(diào)試和解決問題。

• 社區(qū)和維護(hù)：該庫在 React 社區(qū)中得到廣泛使用，并且積極維護(hù)，因此可以期待定期的更新和改進(jìn)。

總結(jié)

無論是使用類組件還是函數(shù)組件，react-error-boundary 都能滿足需求。它靈活的API包括組件、高階組件和自定義Hooks，提供了多種將錯(cuò)誤處理集成到組件中的方式。此外，它支持自定義備用 UI、錯(cuò)誤重置功能和錯(cuò)誤報(bào)告，即使出現(xiàn)問題，也能確保順暢的用戶體驗(yàn)。

在 React 應(yīng)用中使用 react-error-boundary 可以實(shí)現(xiàn)更健壯的錯(cuò)誤處理、更容易的調(diào)試。通過使用這個(gè)庫，可以花更少的時(shí)間管理錯(cuò)誤，更多的時(shí)間專注于為構(gòu)建出色的產(chǎn)品功能。