ReactJS - 錯誤邊界

你好，未來的 React 開發者！今天，我們將深入一個與騎自行車時戴安全帽一樣重要的主題——ReactJS 的錯誤邊界。如果你是新手，別擔心；我們會從基礎開始，逐步深入。在這個教程結束時，你將能夠像專業人士一樣處理錯誤！

錯誤邊界概念

說明錯誤邊界是什麼？

想像你正在建造沙堡。你辛勤地建造塔樓和護城河，但突然間，一波浪潮沖走了你作品的一部分。如果你有一堵牆可以保護你的城堡不受這些意外浪潮的侵襲，那該多好？這正是錯誤邊界對你的 React 應用程序所做的！

在 React 的術語中，錯誤邊界是一個組件，它：

1. 捕獲其子組件樹中任何地方的 JavaScript 錯誤
2. 記錄這些錯誤
3. 顯示 fallback UI，而不是崩溃的組件樹

這就像為你的 React 組件設置一個安全網。如果出了問題，錯誤邊界會捕獲它，防止整個應用程序崩溃。

我們為什麼需要錯誤邊界？

在引入錯誤邊界之前，組件中的 JavaScript 錯誤會破壞 React 的內部狀態，並在下次渲染時發出晦澀的錯誤。這就像在流沙上建造——一個小錯誤，一切都會沉沒！

錯誤邊界通過將錯誤隔離到特定的組件，解決了這個問題，讓你的應用程序的其他部分能夠正常運行。這就像把你的沙堡放在堅固的平台上——即使一部分倒塌，其餘部分仍然完好無缺。

應用錯誤邊界

現在我們了解了錯誤邊界是什麼以及我們為什麼需要它，讓我們看看如何在 React 應用程序中實現它。

創建錯誤邊界組件

要創建一個錯誤邊界，我們需要定義一個類組件，它實現了 componentDidCatch() 或 static getDerivedStateFromError() 運行周期方法。以下是一個基本範例：

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

static getDerivedStateFromError(error) {
// 更新狀態，使下一次渲染將顯示 fallback UI。
return { hasError: true };
}

componentDidCatch(error, errorInfo) {
// 你也可以將錯誤記錄到錯誤報告服務
console.log('錯誤:', error, errorInfo);
}

render() {
if (this.state.hasError) {
// 你可以渲染任何自定義的 fallback UI
return <h1>哦哦！發生錯誤了。</h1>;
}

return this.props.children;
}
}

讓我們來分析一下：

1. 我們定義了一個名為 ErrorBoundary 的類組件。
2. 在構造函數中，我們初始化狀態為 hasError: false。
3. getDerivedStateFromError() 在發生錯誤時更新狀態。
4. componentDidCatch() 記錄錯誤（你可以將其發送到錯誤報告服務）。
5. 在 render() 方法中，我們檢查是否發生了錯誤。如果是，我們渲染 fallback UI。否則，我們正常渲染子組件。

使用錯誤邊界

現在我們有了錯誤邊界組件，讓我們看看如何使用它：

function App() {
return (
<div>
<h1>歡迎來到我的應用程序</h1>
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
</div>
);
}

在這個範例中，我們用 ErrorBoundary 包裹了 MyWidget。如果 MyWidget 抛出錯誤，錯誤邊界會捕獲它並顯示 fallback UI，而不是讓整個應用程序崩溃。

錯誤邊界實際運作

為了真正理解錯誤邊界是如何工作的，讓我們創建一個故意抛出錯誤的組件：

class BuggyCounter extends React.Component {
constructor(props) {
super(props);
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(({counter}) => ({
counter: counter + 1
}));
}

render() {
if (this.state.counter === 5) {
// 模擬 JS 錯誤
throw new Error('我崩潰了！');
}
return <h1 onClick={this.handleClick}>{this.state.counter}</h1>;
}
}

function App() {
return (
<div>
<h1>我的應用程序</h1>
<ErrorBoundary>
<BuggyCounter />
</ErrorBoundary>
</div>
);
}

在這個範例中，當計數器達到 5 時，BuggyCounter 將抛出錯誤。但因其被錯誤邊界包裹，所以錯誤會被捕獲，並顯示 fallback UI，而不是讓整個應用程序崩溃。

使用錯誤邊界的最佳實踐

以下是一些讓你充分利用錯誤邊界的建議：

1. 使用錯誤邊界包裹頂級路由組件，保護應用程序中的更大範圍。
2. 在不同層次使用多個錯誤邊界，以進行更細粒度的錯誤處理。
3. 自定義你的 fallback UI，為用户提供有用的信息或恢復選項。
4. 將錯誤邊界與其他錯誤處理技術（如 try-catch）結合使用，以進行更全面的錯誤管理。

方法	目的
getDerivedStateFromError()	更新狀態以顯示 fallback UI
componentDidCatch()	記錄錯誤或執行副作用

記住，錯誤邊界是網頁開發不可預知世界中的朋友。它們就像攀岩者的安全繩——它們不能預防所有的墜落，但肯定會讓墜落不那么悲慘！

總結來說，錯誤邊界是 React 的一個強大功能，可以显著提高你的應用程序的穩定性和用戶體驗。通過明智地實現它，你可以確保你的 React 應用程序堅固且具有彈性，準備好應對任何可能出現的錯誤。祝開發愉快，願你的應用程序永遠無錯誤！

Credits: Image by storyset