快捷導(dǎo)航

一文詳解如何優(yōu)雅地處理前端錯(cuò)誤邊界

更新時(shí)間：2026年03月21日 15:57:31 作者：dorisrv

前端錯(cuò)誤邊界是一種用于?捕獲子組件樹中JavaScript錯(cuò)誤?、顯示降級(jí)UI而非讓整個(gè)應(yīng)用崩潰的機(jī)制,這篇文章主要介紹了如何優(yōu)雅地處理前端錯(cuò)誤邊界的相關(guān)資料,需要的朋友可以參考下

為什么需要錯(cuò)誤邊界？

在前端開發(fā)中，一個(gè)組件的錯(cuò)誤可能會(huì)導(dǎo)致整個(gè)應(yīng)用崩潰。想象一下：用戶正在填寫一個(gè)復(fù)雜的表單，突然因?yàn)槟硞€(gè)組件的小錯(cuò)誤，整個(gè)頁面白屏了——這是多么糟糕的用戶體驗(yàn)！

錯(cuò)誤邊界（Error Boundary）就是為了解決這個(gè)問題而生的。它可以捕獲子組件樹中的 JavaScript 錯(cuò)誤，記錄錯(cuò)誤信息，并顯示一個(gè)備用 UI，而不是讓整個(gè)應(yīng)用崩潰。

React 中的錯(cuò)誤邊界實(shí)現(xiàn)

基礎(chǔ)實(shí)現(xiàn)

?? 重要提示：截至 React 18，錯(cuò)誤邊界仍然只能通過類組件實(shí)現(xiàn)，這是 React 框架的限制。但我們可以結(jié)合 Hooks 來使用它！

import React from 'react';

// 錯(cuò)誤邊界必須使用類組件實(shí)現(xiàn)
class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null, errorInfo: null };

  // 靜態(tài)方法，用于在錯(cuò)誤發(fā)生后更新狀態(tài)
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  // 捕獲錯(cuò)誤并記錄
  componentDidCatch(error, errorInfo) {
    console.error('錯(cuò)誤邊界捕獲到錯(cuò)誤:', error, errorInfo);
    this.setState({ errorInfo });
    // 可以在這里上報(bào)錯(cuò)誤日志
  }

  // 重置錯(cuò)誤狀態(tài)的方法
  handleReset = () => {
    this.setState({ hasError: false, error: null, errorInfo: null });
    if (this.props.onReset) {
      this.props.onReset();
    }
  };

  render() {
    if (this.state.hasError) {
      // 支持自定義錯(cuò)誤 UI
      return this.props.fallbackUI || (
        <div className="error-boundary">
          <h2>抱歉，頁面出現(xiàn)了錯(cuò)誤 ??</h2>
          <div className="error-details">
            <p>{this.state.error?.toString()}</p>
            <details>
              <summary>錯(cuò)誤詳情</summary>
              {this.state.errorInfo?.componentStack}
            </details>
          </div>
          <button 
            onClick={this.handleReset} 
            className="retry-button"
          >
            重試
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Hooks + 錯(cuò)誤邊界的組合使用

雖然錯(cuò)誤邊界本身需要類組件，但我們可以在 Hooks 組件中輕松使用它：

import React, { useState } from 'react';
import ErrorBoundary from './ErrorBoundary';

// 一個(gè)可能出錯(cuò)的 Hooks 組件
const BuggyComponent = () => {
  const [count, setCount] = useState(0);
  
  if (count > 3) {
    // 模擬錯(cuò)誤
    throw new Error('計(jì)數(shù)超過限制了！');
  }
  
  return (
    <div>
      <h3>當(dāng)前計(jì)數(shù): {count}</h3>
      <button onClick={() => setCount(count + 1)}>增加計(jì)數(shù)</button>
    </div>
  );
};

// 在主組件中使用錯(cuò)誤邊界包裹
const App = () => {
  return (
    <div className="app">
      <h1>React 錯(cuò)誤邊界示例</h1>
      
      <ErrorBoundary
        // 可以自定義錯(cuò)誤 UI
        fallbackUI={
          <div className="custom-error">
            <h3>?? 組件出錯(cuò)了！</h3>
            <p>計(jì)數(shù)組件加載失敗，請重試</p>
          </div>
        }
      >
        <BuggyComponent />
      </ErrorBoundary>
    </div>
  );
};

export default App;

進(jìn)階優(yōu)化

1. 錯(cuò)誤日志上報(bào)

結(jié)合現(xiàn)代 JavaScript 語法和 Fetch API：

componentDidCatch(error, errorInfo) {
  // 上報(bào)錯(cuò)誤信息到服務(wù)器
  fetch('/api/error-report', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      error: error.toString(),
      stack: errorInfo.componentStack,
      userAgent: navigator.userAgent,
      url: window.location.href,
      timestamp: new Date().toISOString()
    })
  })
  .catch(reportError => {
    console.error('錯(cuò)誤上報(bào)失敗:', reportError);
  });
}

2. 支持重置回調(diào)

在上面的基礎(chǔ)實(shí)現(xiàn)中已經(jīng)包含了重置功能，使用方式：

<ErrorBoundary
  onReset={() => {
    // 重置相關(guān)狀態(tài)或執(zhí)行清理操作
    console.log('錯(cuò)誤邊界已重置');
  }}
>
  <BuggyComponent />
</ErrorBoundary>

注意事項(xiàng)

React 錯(cuò)誤邊界

只能捕獲子組件樹中的錯(cuò)誤，不能捕獲自身的錯(cuò)誤
不能捕獲異步代碼中的錯(cuò)誤（如 setTimeout、fetch 回調(diào)等）
不能捕獲事件處理器中的錯(cuò)誤（如 onClick 事件處理函數(shù)）
React 16+ 才支持錯(cuò)誤邊界
必須使用類組件實(shí)現(xiàn)（React 框架限制）

Vue 3 錯(cuò)誤處理

onErrorCaptured 鉤子只能捕獲子組件的錯(cuò)誤
可以捕獲模板編譯和渲染時(shí)的錯(cuò)誤
默認(rèn)會(huì)向上傳播錯(cuò)誤，返回 false 可以阻止傳播
對于異步錯(cuò)誤，需要使用 try/catch 或全局錯(cuò)誤處理
Vue 3 Composition API 提供了更靈活的錯(cuò)誤處理方式

Vue 3 中的錯(cuò)誤處理實(shí)現(xiàn)（Setup 語法糖）

Vue 3 提供了更現(xiàn)代的 Composition API，結(jié)合 <script setup> 語法糖，可以更優(yōu)雅地實(shí)現(xiàn)錯(cuò)誤處理：

<template>
  <div>
    <slot v-if="!hasError"></slot>
    <div v-else class="error-boundary">
      <h2>抱歉，頁面出現(xiàn)了錯(cuò)誤 ??</h2>
      <div class="error-details" v-if="error">
        <p>{{ error.message }}</p>
        <details>
          <summary>錯(cuò)誤詳情</summary>
          <pre>{{ error.stack }}</pre>
        </details>
      </div>
      <button @click="handleReset" class="retry-button">
        重試
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onErrorCaptured } from 'vue';

// 定義 props
const props = defineProps({
  // 支持自定義錯(cuò)誤 UI
  fallbackUI: {
    type: Object,
    default: null
  }
});

// 定義事件
const emit = defineEmits(['reset']);

// 錯(cuò)誤狀態(tài)
const hasError = ref(false);
const error = ref(null);
const errorInfo = ref(null);

// 捕獲子組件錯(cuò)誤的生命周期鉤子
onErrorCaptured((err, instance, info) => {
  console.error('Vue 3 錯(cuò)誤邊界捕獲到錯(cuò)誤:', err, instance, info);
  hasError.value = true;
  error.value = err;
  errorInfo.value = info;
  
  // 可以在這里上報(bào)錯(cuò)誤日志
  reportError(err, info);
  
  // 返回 false 阻止錯(cuò)誤繼續(xù)向上傳播
  return false;
});

// 錯(cuò)誤日志上報(bào)函數(shù)
const reportError = async (err, info) => {
  try {
    await fetch('/api/error-report', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        error: err.toString(),
        stack: err.stack,
        info,
        userAgent: navigator.userAgent,
        url: window.location.href,
        timestamp: new Date().toISOString()
      })
    });
  } catch (reportErr) {
    console.error('錯(cuò)誤上報(bào)失敗:', reportErr);
  }
};

// 重置錯(cuò)誤狀態(tài)
const handleReset = () => {
  hasError.value = false;
  error.value = null;
  errorInfo.value = null;
  emit('reset');
};
</script>

使用示例

<template>
  <div class="app">
    <h1>Vue 3 錯(cuò)誤處理示例</h1>
    
    <ErrorBoundary
      @reset="handleBoundaryReset"
    >
      <BuggyComponent />
    </ErrorBoundary>
    
    <!-- 也可以使用自定義錯(cuò)誤 UI -->
    <ErrorBoundary
      :fallback-ui="customFallback"
    >
      <AnotherBuggyComponent />
    </ErrorBoundary>
  </div>
</template>

<script setup>
import { h } from 'vue';
import ErrorBoundary from './ErrorBoundary.vue';
import BuggyComponent from './BuggyComponent.vue';
import AnotherBuggyComponent from './AnotherBuggyComponent.vue';

// 自定義錯(cuò)誤 UI
const customFallback = h('div', {
  class: 'custom-error'
}, [
  h('h3', '?? 圖表加載失敗'),
  h('p', '請檢查網(wǎng)絡(luò)連接后重試'),
  h('button', {
    onClick: () => console.log('重試按鈕點(diǎn)擊')
  }, '重新加載')
]);

// 錯(cuò)誤邊界重置回調(diào)
const handleBoundaryReset = () => {
  console.log('錯(cuò)誤邊界已重置，頁面恢復(fù)正常');
};
</script>