React 中的錯誤邊界（Error Boundaries），如何使用它們捕獲組件錯誤

大白話React 中的錯誤邊界（Error Boundaries），如何使用它們捕獲組件錯誤

在 React 里，錯誤邊界就像是一個“小衛士”，專門負責在組件出現錯誤時挺身而出，避免整個應用因為一個小錯誤就崩潰掉。接下來我會詳細介紹它，并且在代碼里加上注釋，讓你輕松理解。

什么是錯誤邊界？

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

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

如何創建一個錯誤邊界組件？

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

import React, { Component } from 'react';// 定義一個錯誤邊界組件，繼承自 React.Component
class ErrorBoundary extends Component {// 構造函數，初始化狀態constructor(props) {super(props);// 定義一個 state 變量 hasError，用于標記是否發生錯誤this.state = { hasError: false };}// 靜態方法，當子組件拋出錯誤時會被調用static getDerivedStateFromError(error) {// 更新 state 中的 hasError 為 true，表示發生了錯誤return { hasError: true };}// 當錯誤發生時會調用這個方法，可以在這里進行錯誤日志記錄等操作componentDidCatch(error, errorInfo) {// 這里可以添加代碼將錯誤信息發送到服務器進行日志記錄console.log('錯誤信息:', error);console.log('錯誤詳情:', errorInfo);}// 渲染方法render() {// 如果 hasError 為 true，說明發生了錯誤，渲染備用的 UIif (this.state.hasError) {return <div>哎呀，這里好像出了點問題，請稍后再試！</div>;}// 如果沒有錯誤，正常渲染子組件return this.props.children;}
}export default ErrorBoundary;

如何使用錯誤邊界組件？

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

import React from 'react';
import ErrorBoundary from './ErrorBoundary';// 定義一個可能會出錯的組件
const ProblematicComponent = () => {// 模擬一個錯誤，這里會拋出一個未定義變量的錯誤throw new Error('哎呀，我出錯啦！');return <div>這是一個可能會出錯的組件</div>;
};const App = () => {return (<div><h1>我的 React 應用</h1>{/* 使用錯誤邊界組件包裹可能會出錯的組件 */}<ErrorBoundary><ProblematicComponent /></ErrorBoundary></div>);
};export default App;

代碼解釋

  1. 錯誤邊界組件 ErrorBoundary：
    • constructor：初始化 hasError 狀態為 false，表示初始時沒有錯誤。
    • getDerivedStateFromError：當子組件拋出錯誤時，這個靜態方法會被調用，將 hasError 狀態更新為 true。
    • componentDidCatch：在錯誤發生后調用，你可以在這里添加代碼將錯誤信息發送到服務器進行日志記錄。
    • render：根據 hasError 狀態決定渲染備用 UI 還是正常渲染子組件。
  2. 使用錯誤邊界組件：
    • ProblematicComponent：這是一個可能會出錯的組件，我們在里面模擬了一個錯誤。
    • App 組件：使用 ErrorBoundary 組件包裹 ProblematicComponent，當 ProblematicComponent 拋出錯誤時，ErrorBoundary 會捕獲錯誤并展示備用 UI。

通過使用錯誤邊界，你可以讓你的 React 應用更加健壯，即使部分組件出現錯誤，也不會影響整個應用的正常運行。

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

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

1. 內聯的 try...catch 語句

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

下面是一個簡單示例：

import React from 'react';const MyComponent = () => {try {// 模擬一個會拋出錯誤的操作const result = 1 / 0; // 這里會拋出除零錯誤return <div>結果: {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('網絡請求失敗');}const jsonData = await response.json();setData(jsonData);} catch (err) {setError(err.message);}};fetchData();}, []);if (error) {return <div>出錯啦: {error}</div>;}if (data) {return <div>數據: {JSON.stringify(data)}</div>;}return <div>加載中...</div>;
};export default MyAsyncComponent;

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

3. 全局錯誤處理

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

示例如下：

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

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

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);// 可以在這里添加代碼將錯誤信息發送到服務器進行日志記錄
});

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

在React中使用錯誤邊界有哪些注意事項？

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

1. 錯誤邊界的適用范圍

  • 只能捕獲特定類型的錯誤：錯誤邊界只能捕獲其子組件樹中發生的渲染期間、生命周期方法以及構造函數里的 JavaScript 錯誤，無法捕獲以下幾種錯誤：
    • 事件處理中的錯誤：在 React 里，事件處理函數不會在渲染期間執行，所以錯誤邊界無法捕獲這些錯誤。你可以使用 try...catch 語句來處理事件處理函數中的錯誤。例如：
import React from 'react';const MyComponent = () => {const handleClick = () => {try {// 可能會出錯的代碼throw new Error('事件處理出錯');} catch (error) {console.log('捕獲到事件處理中的錯誤:', error.message);}};return (<button onClick={handleClick}>點擊我</button>);
};export default MyComponent;

- **異步代碼中的錯誤**：像 `setTimeout`、`Promise` 或者 `async/await` 這類異步操作中的錯誤，錯誤邊界也無法捕獲。你需要在異步代碼里使用 `try...catch` 或者 `.catch()` 方法來處理錯誤。
- **服務端渲染時的錯誤**：錯誤邊界在服務端渲染（SSR）時不會捕獲錯誤，需要使用其他方法來處理 SSR 中的錯誤。

2. 錯誤邊界組件的實現

  • 類組件的使用：截至 React 18，錯誤邊界只能通過類組件來實現，因為 getDerivedStateFromError 和 componentDidCatch 這兩個方法是類組件特有的。不過，未來 React 可能會提供函數組件實現錯誤邊界的方式。例如：
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>哎呀，這里好像出了點問題，請稍后再試！</div>;}return this.props.children;}
}export default ErrorBoundary;
  • 狀態管理：在錯誤邊界組件里，不要嘗試在 componentDidCatch 方法中更新子組件的狀態，因為此時子組件可能已經因為錯誤而無法正常更新狀態了。通常，錯誤邊界組件只更新自身的狀態，用來展示備用 UI。

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

  • 嵌套錯誤邊界：可以嵌套使用多個錯誤邊界組件，內層的錯誤邊界會先捕獲錯誤，若內層錯誤邊界無法處理，外層的錯誤邊界會繼續嘗試捕獲。不過，要避免過度嵌套錯誤邊界，以免讓代碼變得復雜。
  • 合理放置錯誤邊界：要根據應用的結構和需求，合理放置錯誤邊界組件。一般來說，把錯誤邊界放在可能會出錯的組件外層，或者放在一些關鍵組件的外層，以防止錯誤影響到整個應用。

4. 錯誤日志與監控

  • 記錄錯誤信息：在 componentDidCatch 方法中，要記錄詳細的錯誤信息，比如錯誤對象和錯誤信息，方便后續調試和定位問題。可以將錯誤信息發送到服務器進行日志記錄，例如使用 fetch 請求將錯誤信息發送到后端。
  • 錯誤監控：結合第三方錯誤監控工具，像 Sentry、Bugsnag 等，來實時監控應用中的錯誤，及時發現和解決問題。

5. 開發與生產環境的差異

  • 開發環境：在開發環境中，錯誤邊界可能會隱藏一些有用的錯誤信息，導致調試困難。可以在開發環境中暫時禁用錯誤邊界，或者使用 React 的嚴格模式來幫助發現潛在的問題。
  • 生產環境：在生產環境中，錯誤邊界是保證應用穩定性的重要手段，要確保錯誤邊界組件能夠正常工作，并且展示友好的錯誤信息給用戶。

除了錯誤邊界，還有哪些方式可以處理 React 組件中的錯誤？

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

1. 內聯 try...catch 語句

在組件的函數體中使用 try...catch 語句來捕獲同步代碼塊中的錯誤。它適合處理組件內部特定邏輯中可能出現的錯誤。

import React from 'react';const MyComponent = () => {try {// 模擬可能出錯的操作，這里故意除零const result = 1 / 0; return <div>計算結果: {result}</div>;} catch (error) {return <div>出現錯誤: {error.message}</div>;}
};export default MyComponent;

這種方式能精確控制特定代碼塊的錯誤處理，但只適用于同步代碼，對于異步操作需要額外處理。

2. Promise 的 .catch() 方法

當組件中使用異步操作（如 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>數據: {JSON.stringify(data)}</div>;}return <div>加載中...</div>;
};export default MyAsyncComponent;

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

3. 全局錯誤處理

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

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

或者使用 addEventListener：

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

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

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

在 React 17 及更高版本中，可以通過監聽 window 的 error 事件來捕獲未處理的 React 錯誤。

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);// 可添加代碼將錯誤信息發送到服務器
});

此方法可以捕獲未被其他方式處理的 React 錯誤，便于統一管理和監控。

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

在 useEffect 的清理函數中可能會出現錯誤，可使用 try...catch 進行處理。

import React, { useEffect } from 'react';const MyEffectComponent = () => {useEffect(() => {const cleanup = () => {try {// 模擬清理時可能出錯的操作throw new Error('清理出錯');} catch (error) {console.log('清理副作用時出錯:', error.message);}};return cleanup;}, []);return <div>組件內容</div>;
};export default MyEffectComponent;

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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/75687.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/75687.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/75687.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

數據庫DBA認證，選哪個認證合適？

數據庫DBA認證，選哪個認證合適？

從 Oracle、MySQL 到 云數據庫&#xff0c;結合市場認可度、考試難度及職業回報&#xff0c;為你精選高性價比認證。 一、企業級數據庫認證&#xff08;傳統場景&#xff09; 1. Oracle認證 認證等級考試代碼核心內容費用適合人群OCA1Z0-082SQL基礎、數據庫安裝與配置$245零基…
閱讀更多...
力扣刷題-熱題100題-第24題（c++、python）

力扣刷題-熱題100題-第24題（c++、python）

234. 回文鏈表 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/palindrome-linked-list/description/?envTypestudy-plan-v2&envIdtop-100-liked 常規法 數組是連續的存儲空間&#xff0c;可以根據索引到達任意位置&#xff0c;鏈表只能一個個的順…
閱讀更多...
調用通義千問實現語音合成并將合成的音頻通過揚聲器播放

調用通義千問實現語音合成并將合成的音頻通過揚聲器播放

1. 作者介紹 郭建東&#xff0c;男&#xff0c;西安工程大學電子信息學院&#xff0c;2024級研究生 研究方向&#xff1a;機器視覺與人工智能 電子郵件&#xff1a;1229963266qq.com 高金年&#xff0c;男&#xff0c;西安工程大學電子信息學院&#xff0c;2024級研究生&…
閱讀更多...
Ubuntu軟件包離線下載安裝

Ubuntu軟件包離線下載安裝

1、下載軟件包tcpd&#xff0c;并在/var/cache/apt/archives目錄中查看。 rooteducoder:~# apt-get install -d tcpd Reading package lists... Done Building dependency tree Reading state information... Done The following NEW packages will be installed:tcpd …
閱讀更多...
您的數據是如何出現在暗網上的？

您的數據是如何出現在暗網上的？

暗網是互聯網上的一個隱秘角落&#xff0c;人們可以在那里保持匿名。暗網經常與深網混淆&#xff0c;但它們并不完全相同。 深網是指網絡上所有未被搜索引擎索引的內容。這包括電子郵件帳戶、私人數據庫和付費服務等。這并不違法&#xff0c;只是無法通過簡單的 Google 搜索找…
閱讀更多...
原型模式及其應用

原型模式及其應用

引言 原型模式&#xff08;Prototype Pattern&#xff09;是一種創建型設計模式&#xff0c;它允許通過復制現有對象來創建新對象&#xff0c;而無需通過構造函數來創建。這種模式通過克隆現有對象來創建新對象&#xff0c;從而避免了復雜的初始化過程。本文將探討原型模式的好…
閱讀更多...
thinkphp漏洞再現

thinkphp漏洞再現

Thinkphp5x遠程命令執行及getshell 1、開環境 2、使用工具攻擊 開啟工具 輸入地址&#xff0c;點擊漏洞檢測 存在漏洞之后&#xff0c;選擇漏洞&#xff0c;執行命令 3、也可以執行遠程命令 執行命令 ?sindex/think\app/invokefunction&functioncall_user_func_array&…
閱讀更多...
Day16 -實例：Web利用郵箱被動繞過CDN拿真實ip

Day16 -實例：Web利用郵箱被動繞過CDN拿真實ip

本想測試一下全局ping&#xff0c;剛好注冊的時候收到了郵件&#xff0c;剛好去做一下復現。 原理&#xff1a;主動讓對方站點給我們發郵件&#xff08;注冊、修改密碼、訂閱推送等&#xff09;我們查看郵件原文&#xff0c;原文里存在真實的郵件站點ip 特點&#xff1a;郵件…
閱讀更多...
vue3 數據監聽（watch、watchEffect）

vue3 數據監聽（watch、watchEffect）

1、watch 1.1基本使用 作用&#xff1a;數據監聽 語法&#xff1a; watch(監聽的數據, (改變后的數據, 改變前的數據) > { console.log(newVal, oldVal); }) 注意點&#xff1a;watch寫法上支持一個或者多個監聽源&#xff0c;這些監聽源必須只能是getter/effect函數…
閱讀更多...
網盤解析工具更新，解決了一些bug

網盤解析工具更新，解決了一些bug

解析工具v1.2.1版本更新&#xff0c;本次是小版本更新&#xff0c;修復了一些bug。 之前小伙伴反應的網盤進入文件后不能返回上一級&#xff0c;現在這個bug修復了&#xff0c;已經可以點擊了。 點擊資源后會回到資源那一級目錄&#xff0c;操作上是方便了不少。 增加了檢查自…
閱讀更多...
推薦1款簡潔、小巧的實用收音機軟件,支持手機和電腦

推薦1款簡潔、小巧的實用收音機軟件,支持手機和電腦

聊一聊 沒想到現在還有人喜歡聽廣播。 我一直以為聽廣播必須要用那種小廣播機才可以。 原來手機或電腦上也是可以的。 今天給大家分享一款可以在電腦和手機上聽廣播的軟件。 軟件介紹 龍卷風收音機 電臺廣播收音機分電腦和手機兩個版本。 電腦端無需安裝&#xff0c;下載…
閱讀更多...
六十天前端強化訓練之第三十一天之Webpack 基礎配置 大師級講解（接下來幾天給大家講講工具鏈與工程化）

六十天前端強化訓練之第三十一天之Webpack 基礎配置 大師級講解（接下來幾天給大家講講工具鏈與工程化）

歡迎來到編程星辰海的博客講解 看完可以給一個免費的三連嗎&#xff0c;謝謝大佬&#xff01; 目錄 一、Webpack 核心概念解析 二、實戰&#xff1a;多資源打包配置&#xff08;含完整代碼&#xff09; 三、配置深度解析&#xff08;重點部分說明&#xff09; 四、效果演示…
閱讀更多...
機器學習——Bagging、隨機森林

機器學習——Bagging、隨機森林

相比于Boosting的集成學習框架&#xff0c;Bagging(Bootstrap Sampling&#xff0c;自助聚集法&#xff0c;又稱為自助采樣)作為一種自助聚集且并行化的集成學習方法&#xff0c;其通過組合多個基學習器的預測結果來提高模型的穩定性和泛化能力。其中隨機森林是Bagging學習框架…
閱讀更多...
【藍橋杯】每日練習 Day13

【藍橋杯】每日練習 Day13

前言 今天做了不少題&#xff0c;但是感覺都太水了&#xff0c;深思熟慮之下主播決定拿出兩道相對不那么水的題來說一下&#xff08;其實還是很水&#xff09;。 兩道問題&#xff0c;一道是日期問題&#xff08;模擬&#xff09;&#xff0c;一道是區間合并問題。 日期差值 …
閱讀更多...
HTML輸出流

HTML輸出流

HTML 輸出流 JavaScript 中**「直接寫入 HTML 輸出流」**的核心是通過 document.write() 方法向瀏覽器渲染過程中的數據流動態插入內容。以下是詳細解釋&#xff1a; 一、HTML 輸出流的概念 1. 動態渲染過程 HTML 文檔的加載是自上而下逐行解析的。當瀏覽器遇到 <script&…
閱讀更多...
理解文字識別：一文讀懂OCR商業化產品的算法邏輯

理解文字識別：一文讀懂OCR商業化產品的算法邏輯

文字識別是一項“歷久彌新”的技術。早在上世紀初&#xff0c;工程師們就開始嘗試使用當時有限的硬件設備掃描并識別微縮膠片、紙張上的字符。隨著時代和技術的發展&#xff0c;人們在日常生活中使用的電子設備不斷更新換代&#xff0c;文字識別的需求成為一項必備的技術基礎&a…
閱讀更多...
開源模型應用落地-語音轉文本-whisper模型-AIGC應用探索（五）

開源模型應用落地-語音轉文本-whisper模型-AIGC應用探索（五）

一、前言 在上一節中&#xff0c;學習了如何使用vLLM來部署Whisper-large-v3-turbo模型。不過&#xff0c;在實際使用時&#xff0c;模型一次只能處理30秒的音頻。今天&#xff0c;將結合實際業務&#xff0c;介紹如何處理一段完整的音頻&#xff0c;并生成相應的字幕文件。 相…
閱讀更多...
“十五五”時期航空彈藥發展環境分析

“十五五”時期航空彈藥發展環境分析

1&#xff0e;“十五五”時期航空彈藥發展環境分析 &#xff08;標題&#xff1a;小二號宋體居中&#xff09; 一、建言背景介紹 &#xff08;一級標題&#xff1a;黑體三號&#xff0c;首行空兩格&#xff09; 航空彈藥作為現代戰爭的核心裝備&#xff0c;其發展水平直接關乎…
閱讀更多...
IDEA批量替換項目下所有文件中的特定內容

IDEA批量替換項目下所有文件中的特定內容

文章目錄 1. 問題引入2. 批量替換項目下所有文件中的特定內容2.1 右鍵項目的根目錄&#xff0c;點擊在文件中替換2.2 輸入要替換的內容 3. 解決替換一整行文本后出現空行的問題4. 增加篩選條件提高匹配的精確度 更多 IDEA 的使用技巧可以查看 IDEA 專欄&#xff1a; IDEA 1. 問…
閱讀更多...
藍橋杯 臨時抱佛腳 之 二分答案法與相關題目

藍橋杯 臨時抱佛腳 之 二分答案法與相關題目

二分答案法&#xff08;利用二分法查找區間的左右端點&#xff09; &#xff08;1&#xff09;估計 最終答案可能得范圍 是什么 &#xff08;2&#xff09;分析 問題的答案 和 給定條件 之間的單調性&#xff0c;大部分時候只需要用到 自然智慧 &#xff08;3&#xff09;建…
閱讀更多...
最新文章

Copyright @ 2022~2023