react的boundary

react-boundary文檔地址
如果沒有找到 ErrorBoundary，錯誤會傳播到全局，導致應用崩潰。

實現核心邏輯

在 React 中，當子組件拋出錯誤時，React 會執行以下步驟：

1. 查找最近的 ErrorBoundary: React 會從拋出錯誤的組件向上查找其父組件樹，尋找最近的 ErrorBoundary 組件。
2. 調用 componentDidCatch: 如果找到 ErrorBoundary，React 會調用該組件的 componentDidCatch(error, info) 方法，傳遞錯誤信息和其他信息（如錯誤發生的組件樹）。
3. 更新狀態: ErrorBoundary 可以根據捕獲的錯誤更新自身的狀態，通常用于顯示備用 UI（如錯誤提示）。
4. 渲染備用 UI: 一旦狀態更新，ErrorBoundary 會重新渲染，展示備用 UI，而不是子組件的正常內容。

無法處理的情況

• 事件處理函數（比如 onClick,onMouseEnter)
• 異步代碼（如 requestAnimationFrame，setTimeout,promise)
• 服務端渲染
• ErrorBoundary 組件本身的錯誤。

包含函數詳細介紹getDerivedStateFromError和componentDidCatch

作用

getDerivedStateFromError 和 componentDidCatch 都是 React 的錯誤邊界方法，用于處理子組件的錯誤。這兩個方法共同作用，確保組件能夠優雅地處理和恢復錯誤。它們的觸發時間點和方式如下：

1. getDerivedStateFromError:
   • 觸發時機: 當子組件拋出錯誤時，React 會首先調用這個靜態方法。
   • 功能: 允許你更新狀態以便在渲染錯誤界面之前準備新狀態。
   • 返回值: 返回一個對象來更新組件狀態，或者返回 null。
2. componentDidCatch:
   • 觸發時機: 在 getDerivedStateFromError 之后調用，主要用于執行副作用，比如日志記錄。
   • 功能: 可以處理錯誤信息，進行記錄或其他操作。
   • 參數: 接收兩個參數：錯誤信息和錯誤的組件棧。

為什么分開調用

分開調用 getDerivedStateFromError 和 componentDidCatch 的原因主要有以下幾點：

1. 職責分離:
   • getDerivedStateFromError 專注于根據錯誤更新狀態，以便渲染一個替代的 UI。
   • componentDidCatch 處理副作用（如日志記錄），關注于錯誤的處理和反饋。
2. 性能優化:
   • 分開調用允許 React 在渲染過程中優化性能，避免不必要的重新渲染。
3. 靈活性:
   • 這種設計允許開發者在狀態更新和副作用處理之間做出不同的決策，使得組件更具靈活性。
4. 一致性:
   • getDerivedStateFromError 是一個靜態方法，適用于類組件，而 componentDidCatch 是實例方法，保持了 API 的一致性。
     通過分開處理，React 能夠提供更清晰的錯誤處理機制，提高了組件的可維護性和可讀性。

代碼實現（補充其他異常捕捉）

當你想補充異步等異常也同步到錯誤邊界組件，如在一個 try-catch 語句中捕獲異常并將其同步到錯誤邊界組件，如下：

• 事件處理函數（比如 onClick,onMouseEnter)
• 異步代碼（如 requestAnimationFrame，setTimeout,promise)
• 服務端渲染
• ErrorBoundary 組件本身的錯誤。

1. 自定義錯誤邊界：首先，創建一個錯誤邊界組件，使用 componentDidCatch 捕捉錯誤。

class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error) {return { hasError: true };}componentDidCatch(error, info) {// 你可以在這里記錄錯誤信息console.error("Error caught in ErrorBoundary:", error, info);}render() {if (this.state.hasError) {return <h1>Something went wrong.</h1>;}return this.props.children;}
}

2. 在組件中使用 try-catch：在你的組件中，使用 try-catch 捕獲異常，并調用 setState 來更新錯誤狀態。
   直接在render拋出異常throw this.state.error; // 拋出錯誤以讓錯誤邊界捕獲

class MyComponent extends React.Component {constructor(props) {super(props);this.state = { error: null };}handleClick = () => {try {// 可能拋出錯誤的代碼} catch (error) {this.setState({ error: true });}};render() {try {// 可能拋出異常的代碼} catch (error) {this.setState({ error });}if (this.state.error) {throw this.state.error; // 拋出錯誤以讓錯誤邊界捕獲}return <div>正常內容button onClick={this.handleClick}>Click me</button>;</div>;}
}

3. 包裹組件：在應用中使用錯誤邊界包裹你的組件。

<ErrorBoundary><MyComponent />
</ErrorBoundary>

函數組件與useErrorBoundary（需自定義Hook）

   function useErrorBoundary() {const [error, setError] = useState(null);const [info, setInfo] = useState(null);const handleError = (err, errorInfo) => {setError(err);setInfo(errorInfo);// 上報錯誤};useEffect(() => {const errorBoundary = React.useErrorBoundary(handleError);return () => errorBoundary.unsubscribe();}, []);if (error) {return <div>錯誤：{error.message}</div>;}return null;}

幾個關鍵點，完善一下（還是建議官方的類方式處理）：

• 使用 useCallback 緩存錯誤處理函數，避免重復渲染
• 通過動態創建類組件的方式實現錯誤邊界功能
• 提供了錯誤狀態重置功能（重試按鈕）
• 展示了更友好的錯誤 UI，包括錯誤信息和組件堆棧
• 實現了組件卸載時的資源清理
  在生產環境中使用時，還應該考慮添加以下功能：
• 更完善的錯誤上報邏輯
• 錯誤 UI 的樣式定制
• 錯誤邊界的嵌套策略
• 與 Suspense 的集成（處理異步加載錯誤）

import { useEffect, useState, useCallback } from 'react';function useErrorBoundary() {const [hasError, setHasError] = useState(false);const [error, setError] = useState(null);const [errorInfo, setErrorInfo] = useState(null);// 錯誤處理函數const handleError = useCallback((err, info) => {setHasError(true);setError(err);setErrorInfo(info);// 上報錯誤到監控系統console.error('Error Boundary Captured:', err, info);reportErrorToService(err, info); // 假設這是一個錯誤上報函數}, []);// 用于捕獲后代組件錯誤的 effectuseEffect(() => {// 創建一個錯誤邊界實例class ErrorBoundary extends React.Component {componentDidCatch(error, errorInfo) {handleError(error, errorInfo);}render() {return this.props.children;}}// 為當前組件創建一個錯誤邊界包裝器const ErrorBoundaryWrapper = ({ children }) => (<ErrorBoundary>{children}</ErrorBoundary>);// 將錯誤邊界包裝器掛載到當前組件const wrapperElement = document.createElement('div');document.body.appendChild(wrapperElement);// 渲染錯誤邊界組件const root = ReactDOM.createRoot(wrapperElement);root.render(<ErrorBoundaryWrapper>{children}</ErrorBoundaryWrapper>);// 清理函數return () => {root.unmount();document.body.removeChild(wrapperElement);};}, [handleError]);// 重置錯誤狀態const resetErrorBoundary = useCallback(() => {setHasError(false);setError(null);setErrorInfo(null);}, []);// 錯誤發生時返回錯誤 UIif (hasError) {return (<div className="error-boundary"><div className="error-message"><h2>發生錯誤</h2><p>{error?.message || '未知錯誤'}</p>{errorInfo && (<div className="error-details"><h3>錯誤詳情</h3><pre>{errorInfo.componentStack}</pre></div>)}</div><button onClick={resetErrorBoundary}>重試</button></div>);}// 沒有錯誤時返回 nullreturn null;
}// 示例使用方法
function MyComponent() {const errorBoundary = useErrorBoundary();return (<div>{errorBoundary}<RiskyComponent /> {/* 可能拋出錯誤的組件 */}</div>);
}

vue的boundary

在 Vue 中，實現這個用errorCaptured捕捉
其中，errorCaptured 鉤子可以捕捉到以下類型的錯誤：

1. 子組件的生命周期鉤子中的錯誤：如 created、mounted 等。
2. 渲染函數中的錯誤：在模板或渲染函數中發生的錯誤。
3. 事件處理器中的錯誤：在事件處理函數中拋出的錯誤。
   但是，errorCaptured 無法捕捉到以下類型的錯誤：
4. 全局未處理的 Promise 拒絕：這些錯誤需要使用全局的 window.onunhandledrejection 來捕獲。
5. 異步操作中的錯誤：如 setTimeout、setInterval 中的錯誤，除非在其中手動捕獲并處理。
6. Vue 實例的錯誤：如在根實例中發生的錯誤，需在全局范圍內捕獲。
   總之，errorCaptured 主要用于捕捉組件內部的錯誤，而不適用于全局或異步錯誤。

實現代碼：

<!-- AdvancedErrorBoundary.vue -->
<template><div><slot v-if="!errorState" name="default"></slot><slot v-else name="fallback" :error="errorState"><div class="error-view"><h3>?? 組件異常</h3><p>{{ errorState.message }}</p><button @click="reset">重新加載</button></div></slot></div>
</template><script>
export default {data: () => ({errorState: null}),errorCaptured(err, vm, info) {this.errorState = {error: err,component: vm,info,timestamp: Date.now()};this.reportError(err); // 錯誤上報return false;},methods: {reset() {this.errorState = null;},reportError(err) {// 發送錯誤到監控系統}}
};
</script>

實際應用(異步捕捉手動觸發錯誤邊界)：

export default {components: { ErrorBoundary },methods: {async fetchData() { //handleClick 點擊事件同理try {// 異步操作await apiCall();} catch (e) {// 1. 手動觸發錯誤邊界this.$emit('error', e); // 2. 或調用父組件方法if (this.parentErrorHandler) {this.parentErrorHandler(e);}}},
};
</script>

全局異常捕捉：

// vue2
Vue.config.errorHandler = (err, vm, info) => {// 1. 處理全局錯誤console.error('Global error:', err, info);// 2. 顯示全局錯誤提示showGlobalErrorOverlay();
};
// vue3
app.config.errorHandler = (err, vm, info) => {// 錯誤處理邏輯
};

全局異步異常捕捉：

通過 window.addEventListener('unhandledrejection') 捕獲。

nuxt 的 Error boundary

nuxt的組件方式實現，是基于vue的errorCaptured，全局如下：

插件捕捉

// 創建插件 plugins/error-handler.js
export default function ({ error }) {// 可在此處添加錯誤上報邏輯console.error('Nuxt 錯誤捕獲:', error);
}

// 并在 nuxt.config.js 中注冊
export default {plugins: ['~/plugins/error-handler'],
};

微信小程序 Error boundary

實現方式

// components/ErrorBoundary/index.js
Component({options: {multipleSlots: true, // 啟用多slot支持},properties: {fallback: {type: String,value: '頁面加載失敗，請稍后再試',},showError: {type: Boolean,value: false,},},data: {hasError: false,errorInfo: '',},methods: {// 重置錯誤狀態resetErrorBoundary() {this.setData({hasError: false,errorInfo: '',});// 觸發自定義事件通知父組件this.triggerEvent('reset');},},// 組件生命周期函數，在組件實例進入頁面節點樹時執行attached() {this.setData({hasError: this.properties.showError,});},// 錯誤捕獲處理函數pageLifetimes: {show() {// 頁面顯示時重置錯誤狀態（可選）if (this.data.hasError) {this.resetErrorBoundary();}},},// 捕獲當前組件錯誤lifetimes: {error(err) {console.error('ErrorBoundary捕獲到錯誤:', err);this.setData({hasError: true,errorInfo: err.toString(),});// 觸發自定義事件通知父組件this.triggerEvent('error', { error: err });},},
});    

使用方式

// wxml
<!-- 在頁面中使用ErrorBoundary -->
<ErrorBoundary fallback="組件加載失敗" bind:error="handleError" bind:reset="handleReset"><!-- 可能出錯的組件 --><RiskyComponent />
</ErrorBoundary>
// js
// 頁面JS
Page({methods: {handleError(e) {console.log('頁面收到錯誤信息:', e.detail.error);// 可以在這里添加錯誤上報邏輯},handleReset() {console.log('用戶點擊了重試按鈕');// 可以在這里添加重新加載數據的邏輯},},
});

h5的Error boundary

在純HTML/JavaScript環境中實現類似React的Error Boundaries功能需要創建一個自定義的錯誤邊界組件，能夠捕獲子元素的渲染錯誤并提供降級UI。

<script>// 錯誤邊界實現const errorBoundaries = {};function createErrorBoundary(containerId) {const container = document.getElementById(containerId);let hasError = false;let error = null;let errorInfo = null;function render() {if (!hasError) {container.innerHTML = `<div class="error-boundary-content"><div class="safe-component"><div class="component-title">安全組件</div><div class="component-content">這個組件運行正常</div></div><div class="unstable-component"><div class="component-title">不穩定組件</div><div class="component-content">點擊按鈕觸發錯誤</div></div></div>`;} else {container.innerHTML = `<div class="error-ui"><div class="error-header"><span class="error-icon">??</span><div class="error-title">組件渲染錯誤</div></div><div class="error-message">${error.message}</div><div class="actions"><button class="retry-btn" onclick="resetBoundary('${containerId}')">重試</button><button class="report-btn" onclick="reportError()">報告問題</button></div></div>`;}}function captureError(err, info) {hasError = true;error = err;errorInfo = info;render();console.error('ErrorBoundary caught:', err, info);}function reset() {hasError = false;error = null;errorInfo = null;render();}// 初始渲染render();return {captureError,reset};}// 創建錯誤邊界實例errorBoundaries['boundary1'] = createErrorBoundary('boundary1');errorBoundaries['boundary2'] = createErrorBoundary('boundary2');// 觸發錯誤函數function triggerError(boundaryId) {try {// 模擬一個可能出錯的函數const invalidObj = null;// 故意訪問null對象的屬性來拋出錯誤invalidObj.someProperty = 'test';} catch (error) {// 捕獲錯誤并傳遞給錯誤邊界errorBoundaries[`boundary${boundaryId}`].captureError(new Error('組件渲染時發生錯誤: ' + error.message),{ componentStack: '在UnstableComponent中' });}}// 重置錯誤邊界function resetBoundary(boundaryId) {errorBoundaries[boundaryId].reset();}// 報告錯誤function reportError() {alert('錯誤已報告給開發團隊，感謝您的反饋！');}// 初始化時隨機觸發一個錯誤setTimeout(() => {if (Math.random() > 0.5) {triggerError(2);}}, 1500);
</script>

使用方式

// 創建錯誤邊界
const boundary = createErrorBoundary('containerId');// 在可能出錯的地方捕獲錯誤
try {// 可能出錯的代碼
} catch (error) {boundary.captureError(error, { componentStack: '...' });
}// 重置錯誤邊界
boundary.reset();

總結

Vue 與 React 的差異：

1. Vue 的錯誤捕獲是單向的（父 → 子），而 React 是雙向的（子 → 父）。
   Vue 的 errorCaptured 鉤子僅捕獲渲染期間的錯誤，不捕獲異步錯誤（如 Promise 錯誤）。
2. 異步錯誤處理：
   全局異步錯誤需通過 window.addEventListener(‘unhandledrejection’) 捕獲。
   在 Nuxt 中，異步錯誤可通過 try…catch 或全局錯誤頁面處理。
3. 生產環境錯誤上報：
   建議集成 Sentry 等錯誤監控工具，在錯誤捕獲時自動上報。