ReactJS - 錯誤邊界

通常，捕獲錯誤並在不影響應用程式 UI 的情況下處理錯誤是一項非常具有挑戰性的任務。React 引入了一個名為錯誤邊界的概念，用於在 UI 渲染過程中捕獲錯誤，在後臺處理它，並在前端應用程式中顯示備用 UI。這不會影響 UI 應用程式，因為它使用替代 UI（例如警告訊息）而不是損壞的頁面來處理。

讓我們在本節中學習什麼是錯誤邊界以及如何在我們的應用程式中應用它。

錯誤邊界的概念

錯誤邊界是具有特殊功能的普通 React 元件，可以捕獲元件樹中任何位置發生的任何錯誤。捕獲到的錯誤可以在處理過程中記錄，然後可以向用戶顯示指定錯誤的替代使用者介面。

透過實現兩個函式，可以將基於普通 React 類的元件升級為支援錯誤邊界的元件。

static getDerivedStateFromError() − 這是一個靜態函式，當應用程式中發生錯誤時將被呼叫。

static getDerivedStateFromError(error) {
   return { hasError: true };
}

這裡，hasError 是一個自定義狀態變數，指定應用程式存在一些錯誤，可以在後續渲染中使用它來顯示備用 UI 而不是普通 UI。

componentDidCatch() − 當元件樹中發生錯誤時，將使用錯誤資訊呼叫此元件生命週期事件。

componentDidCatch(error, errorInfo) {
   // log the error in console or store it somewhere using a log service
}

一旦元件升級為處理錯誤，它就可以像普通元件一樣在應用程式中的任何位置使用。讓我們考慮元件的名稱為 SimpleErrorBoundary，則其使用方法如下所示：

<SimpleErrorBoundary>
   <MyComponent />
</SimpleErrorBoundary>

這裡：

React 將捕獲 MyComponent 元件中發生的任何錯誤，並將其傳送到 SimpleErrorBoundary 元件以進行進一步處理。

React 不會捕獲所有錯誤，除了以下情況下發生的錯誤：

事件處理程式 − 事件處理程式是純 JavaScript 函式，可以使用 try/catch 並自行渲染備用 UI，可能不需要錯誤邊界提示。
非同步程式碼，如 setTimeout。
伺服器端渲染。錯誤邊界專門用於前端應用程式。
錯誤邊界元件本身發生的錯誤。

應用錯誤邊界

讓我們在本節中建立一個新的 React 應用程式來學習如何在其中應用錯誤邊界。

首先，使用以下命令建立一個新的 React 應用程式並啟動它。

create-react-app myapp
cd myapp
npm start

接下來，開啟 App.css (src/App.css) 並刪除所有 CSS 類。然後，建立一個簡單的元件 SimpleErrorBoundary (src/Components/SimpleErrorBoundary.js) 並渲染錯誤期間的備用 UI 或子元件，如下所示：

import React from "react";
class SimpleErrorBoundary extends React.Component {
   
   constructor(props) {
      super(props);
      this.state = { hasError: false };
   }
   static getDerivedStateFromError(error) {
      return { hasError: true };
   }
   
   componentDidCatch(error, errorInfo) {
      console.log(error);
      console.log(errorInfo);
   }
   
   render() {
      if (this.state.hasError) {
         return <h1>Please contact the administrator.</h1>;
      }
      return this.props.children;
   }
}
export default SimpleErrorBoundary;

這裡：

hasError 是一個初始化值為 false 的狀態變數。
getDerivedStateFromError 在發生錯誤時更新錯誤狀態。
componentDidCatch 將錯誤記錄到控制檯。
render 將根據應用程式中的錯誤渲染錯誤 UI 或子元件。

接下來，建立一個簡單的元件 Hello (src/Components/Hello.js) 並渲染一個簡單的文字訊息，如下所示：

import React from "react";
class Hello extends React.Component {
   constructor(props) {
      super(props)
   }
   render() {
      if(this.props.name == "error") {
         throw('Invoked error')
      }
      return (
         <div>Hello, {this.props.name}</div>
      );
   }
}
export default Hello;

這裡我們有：

使用 name props 顯示問候訊息。
如果給定的名稱為 error，則丟擲錯誤。

接下來，開啟 App 元件 (src/App.js)，並使用 SimpleErrorBoundary 元件，如下所示：

import './App.css'
import React from 'react';
import SimpleErrorBoundary from './Components/SimpleErrorBoundary'
import Hello from './Components/Hello'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleErrorBoundary>
                  <Hello name="error" />
               </SimpleErrorBoundary>
            </div>
         </div>
      </div>
   );
}
export default App;

這裡我們有：

從 React 包中匯入了 SimpleErrorBoundary 元件。
使用 SimpleErrorBoundary 元件，並將 error 作為 name props 的值。

最後，在瀏覽器中開啟應用程式並檢查最終結果。

在開發者工具中開啟控制檯，您將看到如下所示的錯誤資訊：

Invoked error
SimpleErrorBoundary.js:17 {
   componentStack: '\n at Hello (https://:3000/static/js/bun…09:5)\n at
   div\n at div\n at div\n    at App'
}

總結

錯誤邊界是一個安全且有價值的元件，用於處理前端應用程式中意外發生的錯誤。如果沒有錯誤邊界，則很難隱藏錯誤並獲取有關發生錯誤的有價值的除錯資訊。

列印頁面