React如何使用錯誤邊界(Error Boundaries)捕獲組件錯誤

更新時間：2025年03月23日 09:16:50 作者：前端大白話

在 React 里,錯誤邊界就像是一個“小衛(wèi)士”,專門負(fù)責(zé)在組件出現(xiàn)錯誤時挺身而出,避免整個應(yīng)用因?yàn)橐粋€小錯誤就崩潰掉,下面小編就來為大家介紹一下如何利用它捕獲組件錯誤吧

在 React 里，錯誤邊界就像是一個“小衛(wèi)士”，專門負(fù)責(zé)在組件出現(xiàn)錯誤時挺身而出，避免整個應(yīng)用因?yàn)橐粋€小錯誤就崩潰掉。接下來我會詳細(xì)介紹它，并且在代碼里加上注釋，讓你輕松理解。

什么是錯誤邊界

想象一下，你有一個大型的 React 應(yīng)用，里面有好多好多組件，就像一個熱鬧的城市里有各種各樣的建筑。要是其中一個建筑出了問題（組件報錯），要是沒有防護(hù)措施，整個城市可能都會受到影響（應(yīng)用崩潰）。而錯誤邊界就像是給每個區(qū)域設(shè)置了一個“保護(hù)罩”，當(dāng)某個區(qū)域的建筑出問題時，保護(hù)罩能把問題隔離起來，不讓它影響到其他區(qū)域。

在 React 中，錯誤邊界是一個特殊的組件，它可以捕獲并處理在它的子組件樹中發(fā)生的 JavaScript 錯誤，然后展示一個備用的 UI，而不是讓整個應(yīng)用崩潰。

如何創(chuàng)建一個錯誤邊界組件

下面是一個簡單的錯誤邊界組件示例，代碼里我會加上詳細(xì)的注釋：

import React, { Component } from 'react';

// 定義一個錯誤邊界組件，繼承自 React.Component
class ErrorBoundary extends Component {
    // 構(gòu)造函數(shù)，初始化狀態(tài)
    constructor(props) {
        super(props);
        // 定義一個 state 變量 hasError，用于標(biāo)記是否發(fā)生錯誤
        this.state = { hasError: false };
    }

    // 靜態(tài)方法，當(dāng)子組件拋出錯誤時會被調(diào)用
    static getDerivedStateFromError(error) {
        // 更新 state 中的 hasError 為 true，表示發(fā)生了錯誤
        return { hasError: true };
    }

    // 當(dāng)錯誤發(fā)生時會調(diào)用這個方法，可以在這里進(jìn)行錯誤日志記錄等操作
    componentDidCatch(error, errorInfo) {
        // 這里可以添加代碼將錯誤信息發(fā)送到服務(wù)器進(jìn)行日志記錄
        console.log('錯誤信息:', error);
        console.log('錯誤詳情:', errorInfo);
    }

    // 渲染方法
    render() {
        // 如果 hasError 為 true，說明發(fā)生了錯誤，渲染備用的 UI
        if (this.state.hasError) {
            return <div>哎呀，這里好像出了點(diǎn)問題，請稍后再試！</div>;
        }
        // 如果沒有錯誤，正常渲染子組件
        return this.props.children;
    }
}

export default ErrorBoundary;

如何使用錯誤邊界組件

現(xiàn)在我們已經(jīng)有了一個錯誤邊界組件，接下來看看怎么使用它。下面是一個簡單的示例：

import React from 'react';
import ErrorBoundary from './ErrorBoundary';

// 定義一個可能會出錯的組件
const ProblematicComponent = () => {
    // 模擬一個錯誤，這里會拋出一個未定義變量的錯誤
    throw new Error('哎呀，我出錯啦！');
    return <div>這是一個可能會出錯的組件</div>;
};

const App = () => {
    return (
        <div>
            <h1>我的 React 應(yīng)用</h1>
            {/* 使用錯誤邊界組件包裹可能會出錯的組件 */}
            <ErrorBoundary>
                <ProblematicComponent />
            </ErrorBoundary>
        </div>
    );
};

export default App;

代碼解釋

錯誤邊界組件 ErrorBoundary：

constructor：初始化 hasError 狀態(tài)為 false，表示初始時沒有錯誤。
getDerivedStateFromError：當(dāng)子組件拋出錯誤時，這個靜態(tài)方法會被調(diào)用，將 hasError 狀態(tài)更新為 true。
componentDidCatch：在錯誤發(fā)生后調(diào)用，你可以在這里添加代碼將錯誤信息發(fā)送到服務(wù)器進(jìn)行日志記錄。
render：根據(jù) hasError 狀態(tài)決定渲染備用 UI 還是正常渲染子組件。

使用錯誤邊界組件：

ProblematicComponent：這是一個可能會出錯的組件，我們在里面模擬了一個錯誤。

App 組件：使用 ErrorBoundary 組件包裹 ProblematicComponent，當(dāng) ProblematicComponent 拋出錯誤時，ErrorBoundary 會捕獲錯誤并展示備用 UI。
通過使用錯誤邊界，你可以讓你的 React 應(yīng)用更加健壯，即使部分組件出現(xiàn)錯誤，也不會影響整個應(yīng)用的正常運(yùn)行。

React組件錯誤處理

除了使用錯誤邊界，還有其他方式處理React組件中的錯誤嗎？

除了錯誤邊界，在 React 組件里還有幾種處理錯誤的方式，下面我會詳細(xì)介紹。

1. 內(nèi)聯(lián)的 try...catch 語句

try...catch 語句是 JavaScript 里處理錯誤的基礎(chǔ)手段，能在組件內(nèi)部運(yùn)用它來捕獲并處理錯誤。不過這種方式只能處理同步代碼里的錯誤，對于異步代碼，需要搭配 async/await 或者 .then() 與 .catch() 來處理。

下面是一個簡單示例：

import React from 'react';

???????const MyComponent = () => {
    try {
        // 模擬一個會拋出錯誤的操作
        const result = 1 / 0; // 這里會拋出除零錯誤
        return <div>結(jié)果: {result}</div>;
    } catch (error) {
        return <div>出錯啦: {error.message}</div>;
    }
};

export default MyComponent;

在這個示例里，try 塊中的代碼若拋出錯誤，catch 塊就會捕獲該錯誤，并且展示錯誤信息。

2. 使用 Promise 的 .catch() 方法處理異步錯誤

要是組件里有異步操作，像 fetch 請求或者 setTimeout 之類的，就可以使用 Promise 的 .catch() 方法來處理錯誤。

示例如下：

import React, { useEffect, useState } from 'react';

const MyAsyncComponent = () => {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('https://api.example.com/data');
                if (!response.ok) {
                    throw new Error('網(wǎng)絡(luò)請求失敗');
                }
                const jsonData = await response.json();
                setData(jsonData);
            } catch (err) {
                setError(err.message);
            }
        };

        fetchData();
    }, []);

    if (error) {
        return <div>出錯啦: {error}</div>;
    }

    if (data) {
        return <div>數(shù)據(jù): {JSON.stringify(data)}</div>;
    }

    return <div>加載中...</div>;
};

export default MyAsyncComponent;

在這個示例中，fetchData 函數(shù)是一個異步函數(shù)，使用 try...catch 來捕獲 fetch 請求過程中可能出現(xiàn)的錯誤。若請求失敗，就把錯誤信息存到 error 狀態(tài)里，然后在組件中展示出來。

3. 全局錯誤處理

可以借助 window.onerror 或者 window.addEventListener('error') 來捕獲全局的 JavaScript 錯誤。不過這種方式并非專門針對 React 組件的，它會捕獲整個頁面里的所有錯誤。

示例如下：

window.onerror = function (message, source, lineno, colno, error) {
    console.log('全局錯誤捕獲:', message);
    // 可以在這里添加代碼將錯誤信息發(fā)送到服務(wù)器進(jìn)行日志記錄
    return true; // 返回 true 可以阻止錯誤冒泡
};

在這個示例中，window.onerror 函數(shù)會在任何 JavaScript 錯誤發(fā)生時被調(diào)用，并且可以把錯誤信息記錄下來。

4. 使用 React Error Event

React 17 及以上版本支持 React Error Event，這允許你在根組件中捕獲所有未處理的錯誤。

示例如下：

import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

window.addEventListener('error', (event) => {
    console.log('React 錯誤捕獲:', event.message);
    // 可以在這里添加代碼將錯誤信息發(fā)送到服務(wù)器進(jìn)行日志記錄
});

在這個示例中，window.addEventListener('error') 會捕獲所有未處理的 React 錯誤。

注意事項(xiàng)

在React中使用錯誤邊界有哪些注意事項(xiàng)？

在 React 中使用錯誤邊界時，有以下這些注意事項(xiàng)：

1. 錯誤邊界的適用范圍

只能捕獲特定類型的錯誤：錯誤邊界只能捕獲其子組件樹中發(fā)生的渲染期間、生命周期方法以及構(gòu)造函數(shù)里的 JavaScript 錯誤，無法捕獲以下幾種錯誤：
事件處理中的錯誤：在 React 里，事件處理函數(shù)不會在渲染期間執(zhí)行，所以錯誤邊界無法捕獲這些錯誤。你可以使用 try...catch 語句來處理事件處理函數(shù)中的錯誤。例如：

import React from 'react';

const MyComponent = () => {
    const handleClick = () => {
        try {
            // 可能會出錯的代碼
            throw new Error('事件處理出錯');
        } catch (error) {
            console.log('捕獲到事件處理中的錯誤:', error.message);
        }
    };

    return (
        <button onClick={handleClick}>點(diǎn)擊我</button>
    );
};

export default MyComponent;

- **異步代碼中的錯誤**：像 `setTimeout`、`Promise` 或者 `async/await` 這類異步操作中的錯誤，錯誤邊界也無法捕獲。你需要在異步代碼里使用 `try...catch` 或者 `.catch()` 方法來處理錯誤。

- **服務(wù)端渲染時的錯誤**：錯誤邊界在服務(wù)端渲染（SSR）時不會捕獲錯誤，需要使用其他方法來處理 SSR 中的錯誤。

2. 錯誤邊界組件的實(shí)現(xiàn)

類組件的使用：截至 React 18，錯誤邊界只能通過類組件來實(shí)現(xiàn)，因?yàn)?getDerivedStateFromError 和 componentDidCatch 這兩個方法是類組件特有的。不過，未來 React 可能會提供函數(shù)組件實(shí)現(xiàn)錯誤邊界的方式。例如：

import React, { Component } from 'react';

class ErrorBoundary extends 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 <div>哎呀，這里好像出了點(diǎn)問題，請稍后再試！</div>;
        }
        return this.props.children;
    }
}

export default ErrorBoundary;

狀態(tài)管理：在錯誤邊界組件里，不要嘗試在 componentDidCatch 方法中更新子組件的狀態(tài)，因?yàn)榇藭r子組件可能已經(jīng)因?yàn)殄e誤而無法正常更新狀態(tài)了。通常，錯誤邊界組件只更新自身的狀態(tài)，用來展示備用 UI。

3. 錯誤邊界的嵌套與位置

嵌套錯誤邊界：可以嵌套使用多個錯誤邊界組件，內(nèi)層的錯誤邊界會先捕獲錯誤，若內(nèi)層錯誤邊界無法處理，外層的錯誤邊界會繼續(xù)嘗試捕獲。不過，要避免過度嵌套錯誤邊界，以免讓代碼變得復(fù)雜。

合理放置錯誤邊界：要根據(jù)應(yīng)用的結(jié)構(gòu)和需求，合理放置錯誤邊界組件。一般來說，把錯誤邊界放在可能會出錯的組件外層，或者放在一些關(guān)鍵組件的外層，以防止錯誤影響到整個應(yīng)用。

4. 錯誤日志與監(jiān)控

記錄錯誤信息：在 componentDidCatch 方法中，要記錄詳細(xì)的錯誤信息，比如錯誤對象和錯誤信息，方便后續(xù)調(diào)試和定位問題?？梢詫㈠e誤信息發(fā)送到服務(wù)器進(jìn)行日志記錄，例如使用 fetch 請求將錯誤信息發(fā)送到后端。

錯誤監(jiān)控：結(jié)合第三方錯誤監(jiān)控工具，像 Sentry、Bugsnag 等，來實(shí)時監(jiān)控應(yīng)用中的錯誤，及時發(fā)現(xiàn)和解決問題。

5. 開發(fā)與生產(chǎn)環(huán)境的差異

開發(fā)環(huán)境：在開發(fā)環(huán)境中，錯誤邊界可能會隱藏一些有用的錯誤信息，導(dǎo)致調(diào)試?yán)щy?？梢栽陂_發(fā)環(huán)境中暫時禁用錯誤邊界，或者使用 React 的嚴(yán)格模式來幫助發(fā)現(xiàn)潛在的問題。

生產(chǎn)環(huán)境：在生產(chǎn)環(huán)境中，錯誤邊界是保證應(yīng)用穩(wěn)定性的重要手段，要確保錯誤邊界組件能夠正常工作，并且展示友好的錯誤信息給用戶。
除了錯誤邊界，還有哪些方式可以處理 React 組件中的錯誤？

React處理錯誤常見方式

除了錯誤邊界，在 React 組件中處理錯誤還有以下幾種常見方式：

1. Promise 的 .catch() 方法

當(dāng)組件中使用異步操作（如 fetch 請求、Promise 等）時，可使用 .catch() 方法來捕獲異步操作中的錯誤。

import React, { useEffect, useState } from 'react';

const MyAsyncComponent = () => {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('https://api.example.com/data');
                if (!response.ok) {
                    throw new Error('請求失敗');
                }
                const jsonData = await response.json();
                setData(jsonData);
            } catch (err) {
                setError(err.message);
            }
        };

        fetchData();
    }, []);

    if (error) {
        return <div>錯誤: {error}</div>;
    }

    if (data) {
        return <div>數(shù)據(jù): {JSON.stringify(data)}</div>;
    }

    return <div>加載中...</div>;
};

export default MyAsyncComponent;

這里使用 try...catch 包裹異步操作，在 catch 塊中處理請求可能出現(xiàn)的錯誤，將錯誤信息存儲在狀態(tài)里并顯示給用戶。

2. 全局錯誤處理

可以通過 window.onerror 和 window.addEventListener('error') 來捕獲整個頁面中的 JavaScript 錯誤，不過這并非專門針對 React 組件，但能捕獲 React 組件之外的錯誤。

// 在入口文件中添加
window.onerror = function (message, source, lineno, colno, error) {
    console.log('全局錯誤捕獲:', message);
    // 可添加代碼將錯誤信息發(fā)送到服務(wù)器
    return true; 
};

或者使用 addEventListener：

window.addEventListener('error', (event) => {
    console.log('全局錯誤捕獲:', event.message);
    // 可添加代碼將錯誤信息發(fā)送到服務(wù)器
});

這種方式能捕獲各種未被捕獲的錯誤，但缺乏對錯誤來源的精確控制。

3. React Error Event（React 17 及以上）

import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

window.addEventListener('error', (event) => {
    console.log('React 錯誤捕獲:', event.message);
    // 可添加代碼將錯誤信息發(fā)送到服務(wù)器
});

此方法可以捕獲未被其他方式處理的 React 錯誤，便于統(tǒng)一管理和監(jiān)控。

4. 使用 useEffect 清理副作用時的錯誤處理

在 useEffect 的清理函數(shù)中可能會出現(xiàn)錯誤，可使用 try...catch 進(jìn)行處理。

import React, { useEffect } from 'react';

const MyEffectComponent = () => {
    useEffect(() => {
        const cleanup = () => {
            try {
                // 模擬清理時可能出錯的操作
                throw new Error('清理出錯');
            } catch (error) {
                console.log('清理副作用時出錯:', error.message);
            }
        };

        return cleanup;
    }, []);

    return <div>組件內(nèi)容</div>;
};

export default MyEffectComponent;

這樣能保證在組件卸載時，清理副作用的過程中出現(xiàn)的錯誤可以被捕獲和處理。

以上就是React如何使用錯誤邊界(Error Boundaries)捕獲組件錯誤的詳細(xì)內(nèi)容，更多關(guān)于React錯誤邊界Error Boundaries的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: