封裝一個最簡單ErrorBoundary組件處理react異常
前言
從 React 16 開始，引入了 Error Boundaries 概念，它可以捕獲它的子組件中產(chǎn)生的錯誤，記錄錯誤日志，并展示降級內(nèi)容，具體 官網(wǎng)地址
錯誤邊界避免一個組件錯誤導(dǎo)致整個頁面白屏不能使用等情況，使用優(yōu)雅降級的方式呈現(xiàn)備用的 UI，錯誤邊界可以在渲染期間、生命周期和整個組件樹的構(gòu)造函數(shù)中捕獲錯誤。自 React 16 起，任何未被錯誤邊界捕獲的錯誤將會導(dǎo)致整個 React 組件樹被卸載
ErrorBoundary 意義
- 某些 UI 崩潰，不至于整個 webapp 崩潰
在瀏覽頁面時，由于后端返回異?；蛘咔岸说哪承╁e誤校驗，會導(dǎo)致用戶體驗很差，你想想，你帶著老婆，坐著火車，吃著火鍋唱著歌，突然被麻匪劫了，突然就報錯了，有些場景下，比如正在設(shè)置金額，或者查看關(guān)鍵頁面時，這樣的體驗就會很糟糕，比如你游戲充值了 500，結(jié)果由于接口原因顯示出來充值NaN，這種顯示比不顯示還讓人苦惱，不過相信大家對 JS 異常捕獲很熟悉了，try-catch 一包業(yè)務(wù)代碼就收工了。不過，在組件里對異常捕獲，需要用到的是 React 提供的 Error Boundary 錯誤邊界特性，用 componentDidCatch 鉤子來對頁面異常進(jìn)行捕獲，以至于不會將異常擴(kuò)散到整個頁面，有效防止頁面白屏。
官網(wǎng)如何實現(xiàn)
👉 如果一個 class 組件中定義了 static getDerivedStateFromError() 或 componentDidCatch() 這兩個生命周期方法中的任意一個（或兩個）時，那么它就變成一個錯誤邊界。當(dāng)拋出錯誤后，請使用 static getDerivedStateFromError() 渲染備用 UI ，使用 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) {
// 你同樣可以將錯誤日志上報給服務(wù)器
logErrorToMyService(error, errorInfo);
}
render() {
if (this.state.hasError) {
// 你可以自定義降級后的 UI 并渲染
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
然后你可以將它作為一個常規(guī)組件去使用：
<ErrorBoundary> <MyWidget /> </ErrorBoundary>
錯誤邊界的工作方式類似于 JavaScript 的 catch {}，不同的地方在于錯誤邊界只針對 React 組件。只有 class 組件才可以成為錯誤邊界組件。大多數(shù)情況下, 你只需要聲明一次錯誤邊界組件, 并在整個應(yīng)用中使用它，在使用時被包裹組件出現(xiàn)的錯誤或者throw new Error()拋出的異常都可以被錯誤邊界組件捕獲，并且顯示出兜底 UI
封裝一個可配置的 ErrorBoundary
了解了官網(wǎng)實現(xiàn)錯誤邊界組件的方法，我們可以封裝一個ErrorBoundary組件，造一個好用的輪子，而不是直接寫死return <h1>Something went wrong</h1>，學(xué)習(xí)了react-redux原理后我們知道可以用高階組件來包裹react組件，將store中的數(shù)據(jù)和方法全局注入，同理，我們也可以使用高階組件包裹使其成為一個能夠錯誤捕獲的 react 組件
1.創(chuàng)造一個可配置的 ErrorBoundary 類組件
相比與官網(wǎng)的 ErrorBoundary，我們可以將日志上報的方法以及顯示的 UI 通過接受傳參的方式進(jìn)行動態(tài)配置，對于傳入的UI，我們可以設(shè)置以react組件的方式 或 是一個React Element進(jìn)行接受，而且通過組件的話，我們可以傳入?yún)?shù)，這樣可以在兜底 UI 中拿到具體的錯誤信息
- componentDidCatch() : 錯誤日志處理的鉤子函數(shù)
- static getDerivedStateFromError() : 它將拋出的錯誤作為參數(shù)，并返回一個值以更新 state
class ErrorBoundary extends React.Component {
state = { error: false };
static getDerivedStateFromError(error) {
return { error };
}
componentDidCatch(error, errorInfo) {
if (this.props.onError) {
//上報日志通過父組件注入的函數(shù)進(jìn)行執(zhí)行
this.props.onError(error, errorInfo.componentStack);
}
}
render() {
const { fallback, FallbackComponent } = this.props;
const { error } = this.state;
if (error) {
const fallbackProps = { error };
//判斷是否為React Element
if (React.isValidElement(fallback)) {
return fallback;
}
//組件方式傳入
if (FallbackComponent) {
return <FallbackComponent {...fallbackProps} />;
}
throw new Error("ErrorBoundary 組件需要傳入兜底UI");
}
return this.props.children;
}
}
這樣就可以對兜底UI顯示和錯誤日志進(jìn)行動態(tài)獲取，使組件更加靈活，但是又有一個問題出現(xiàn)，有時候會遇到這種情況：服務(wù)器突然 503、502 了，前端獲取不到響應(yīng)，這時候某個組件報錯了，但是過一會又正常了。比較好的方法是用戶點一下被ErrorBoundary封裝的組件中的一個方法來重新加載出錯組件，不需要重刷頁面，這時候需要兜底的組件中應(yīng)該暴露出一個方法供ErrorBoundary進(jìn)行處理
1.在 ErrorBoundary 中添加方法，檢測是否有注入重置方法，如果有重置方法就執(zhí)行并且重置 state 中的 error，使其錯誤狀態(tài)為 false
resetErrorBoundary = () => {
if (this.props.onReset) this.props.onReset();
this.setState({ error: false });
};
2.在 render 中添加函數(shù)組件類型進(jìn)行渲染，可以將重置的方法以及錯誤信息當(dāng)做參數(shù)進(jìn)行傳遞到當(dāng)前組件進(jìn)行處理
render() {
const { fallback, FallbackComponent, fallbackRender } = this.props;
const { error } = this.state;
if (error) {
const fallbackProps = {
error,
resetErrorBoundary: this.resetErrorBoundary,
};
...
if (typeof fallbackRender === "function")return fallbackRender(fallbackProps);
...
}
return this.props.children;
}
2.將 ErrorBoundary 通過高階函數(shù)進(jìn)行包裹返回
import React from "react";
import DefaultErrorBoundary from "./core";
const catchreacterror = (Boundary = DefaultErrorBoundary) => InnerComponent => {
return props => (
<Boundary {...props}>
<InnerComponent {...props} />
</Boundary>
);
};
使用&測試
通過一個點擊自增的 Demo，當(dāng)數(shù)字到達(dá)某值，拋出異常，這里分別對 class 組件和 Function 組件作為發(fā)起異常的組件進(jìn)行測試
- 發(fā)起異常的組件
//Function組件
const fnCount1 = ({ count }) => {
if (count == 3) throw new Error("count is three");
return <span>{count}</span>;
};
//Class組件
class fnCount2 extends React.Component {
render() {
const { count } = this.props;
if (count == 2) throw new Error("count is two");
return <span>{count}</span>;
}
}
- 處理錯誤異常的函數(shù)組件
const errorbackfn = ({ error: { message }, resetErrorBoundary }) => (
<div>
<p>出錯啦</p>
<pre>{message}</pre>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
);
- 處理錯誤異常的普通組件
const errorbackcom = () => <h1>出錯啦,不可撤銷</h1>;
- 測試組件
//對發(fā)起異常的組件進(jìn)行包裹處理，返回一個可以處理錯誤編輯的高階組件
const SafeCount1 = catchreacterror()(fnCount1);
const SafeCount2 = catchreacterror()(fnCount2);
//測試主組件
const App = () => {
const [count, setCount] = useState(0);
const ListenError = (arg, info) => console.log("出錯了:" + arg.message, info); //錯誤時進(jìn)行的回調(diào)
const onReset = () => setCount(0); //點擊重置時進(jìn)行的回調(diào)
return (
<div className="App">
<section>
<button onClick={() => setCount(count => count + 1)}>+</button>
<button onClick={() => setCount(count => count - 1)}>-</button>
</section>
<hr />
<div>
Class componnet:
<SafeCount2
count={count}
fallbackRender={errorbackfn}
onReset={onReset}
onError={ListenError}
/>
</div>
<div>
Function componnet:
<SafeCount1
count={count}
FallbackComponent={errorbackcom}
onError={ListenError}
/>
</div>
</div>
);
};
大功告成！
遇到的問題&總結(jié)
有很多時候 react 錯誤邊界不是萬能的比如
- 事件錯誤
上面 this.o 不存在，會報錯，window.onerror 可以捕獲，但是錯誤邊界捕獲不到。
- 異步代碼
服務(wù)端渲染 和 錯誤邊界自己的錯誤
總結(jié)
- 抽離組件 ✔
- 錯誤反饋 ✔
- UI 抽離 ✔
- 錯誤重置 ✔
- 抽離 hook 模式 ✖
- 服務(wù)端 ✖
至此，謝謝各位在百忙之中點開這篇文章，希望對你們能有所幫助，相信你對 react 中的錯誤邊界有了大概的認(rèn)實，也會編寫一個簡單的ErrorBoundary總的來說優(yōu)化的點還有很多，如有問題歡迎各位大佬指正。更多關(guān)于ErrorBoundary，react的資料請關(guān)注腳本之家其它相關(guān)文章,希望大家以后多多支持腳本之家！
相關(guān)文章
React Native設(shè)備信息查看調(diào)試詳解
這篇文章主要為大家介紹了React Native設(shè)備信息查看調(diào)試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React報錯之Object?is?possibly?null的問題及解決方法
這篇文章主要介紹了React報錯之Object?is?possibly?null的問題,造成 "Object is possibly null"的錯誤是因為useRef()鉤子可以傳遞一個初始值作為參數(shù)，而我們傳遞null作為初始值，本文給大家分享詳細(xì)解決方法，需要的朋友可以參考下2022-07-07
react+antd4實現(xiàn)優(yōu)化大批量接口請求
這篇文章主要為大家詳細(xì)介紹了如何使用react hooks + antd4實現(xiàn)大批量接口請求的前端優(yōu)化,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2024-02-02
在現(xiàn)代前端開發(fā)中,組件化是 React 的核心理念之一,組件之間的通信是構(gòu)建復(fù)雜應(yīng)用的重要組成部分,在這篇文章中,我們將深入探討 React 組件通信的多種方式,包括它們的優(yōu)缺點、使用場景以及最佳實踐,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了React 表單與事件的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
基于PixiJS實現(xiàn)react圖標(biāo)旋轉(zhuǎn)動效
PixiJS是一個開源的基于web的渲染系統(tǒng)，為游戲、數(shù)據(jù)可視化和其他圖形密集型項目提供了極快的性能，這篇文章主要介紹了用PixiJS實現(xiàn)react圖標(biāo)旋轉(zhuǎn)動效,需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了如何在React中實現(xiàn)插槽，文中的示例代碼講解詳細(xì)，對我們的學(xué)習(xí)或工作具有一定的借鑒價值，需要的可以了解一下2023-03-03
React+echarts?(echarts-for-react)?實現(xiàn)中國地圖及省份切換功能
這篇文章主要介紹了React+echarts?(echarts-for-react)?畫中國地圖及省份切換,有足夠的地圖數(shù)據(jù)，可以點擊到街道，示例我只出到市級，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)需要的朋友可以參考下2022-11-11
這篇文章主要為大家介紹了react組件中過渡動畫的問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
ReactQuery系列之?dāng)?shù)據(jù)轉(zhuǎn)換示例詳解
這篇文章主要為大家介紹了ReactQuery系列之?dāng)?shù)據(jù)轉(zhuǎn)換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11