一文详解如何优雅地处理前端错误边界

import React from 'react';

// 错误边界必须使用类组件实现
class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null, errorInfo: null };

  // 静态方法，用于在错误发生后更新状态
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  // 捕获错误并记录
  componentDidCatch(error, errorInfo) {
    console.error('错误边界捕获到错误:', error, errorInfo);
    this.setState({ errorInfo });
    // 可以在这里上报错误日志
  }

  // 重置错误状态的方法
  handleReset = () => {
    this.setState({ hasError: false, error: null, errorInfo: null });
    if (this.props.onReset) {
      this.props.onReset();
    }
  };

  render() {
    if (this.state.hasError) {
      // 支持自定义错误 UI
      return this.props.fallbackUI || (
        <div className="error-boundary">
          <h2>抱歉，页面出现了错误 😢</h2>
          <div className="error-details">
            <p>{this.state.error?.toString()}</p>
            <details>
              <summary>错误详情</summary>
              {this.state.errorInfo?.componentStack}
            </details>
          </div>
          <button 
            onClick={this.handleReset} 
            className="retry-button"
          >
            重试
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

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

// 一个可能出错的 Hooks 组件
const BuggyComponent = () => {
  const [count, setCount] = useState(0);
  
  if (count > 3) {
    // 模拟错误
    throw new Error('计数超过限制了！');
  }
  
  return (
    <div>
      <h3>当前计数: {count}</h3>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
    </div>
  );
};

// 在主组件中使用错误边界包裹
const App = () => {
  return (
    <div className="app">
      <h1>React 错误边界示例</h1>
      
      <ErrorBoundary
        // 可以自定义错误 UI
        fallbackUI={
          <div className="custom-error">
            <h3>😱 组件出错了！</h3>
            <p>计数组件加载失败，请重试</p>
          </div>
        }
      >
        <BuggyComponent />
      </ErrorBoundary>
    </div>
  );
};

export default App;

componentDidCatch(error, errorInfo) {
  // 上报错误信息到服务器
  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('错误上报失败:', reportError);
  });
}

<ErrorBoundary
  onReset={() => {
    // 重置相关状态或执行清理操作
    console.log('错误边界已重置');
  }}
>
  <BuggyComponent />
</ErrorBoundary>

<template>
  <div>
    <slot v-if="!hasError"></slot>
    <div v-else class="error-boundary">
      <h2>抱歉，页面出现了错误 😢</h2>
      <div class="error-details" v-if="error">
        <p>{{ error.message }}</p>
        <details>
          <summary>错误详情</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({
  // 支持自定义错误 UI
  fallbackUI: {
    type: Object,
    default: null
  }
});

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

// 错误状态
const hasError = ref(false);
const error = ref(null);
const errorInfo = ref(null);

// 捕获子组件错误的生命周期钩子
onErrorCaptured((err, instance, info) => {
  console.error('Vue 3 错误边界捕获到错误:', err, instance, info);
  hasError.value = true;
  error.value = err;
  errorInfo.value = info;
  
  // 可以在这里上报错误日志
  reportError(err, info);
  
  // 返回 false 阻止错误继续向上传播
  return false;
});

// 错误日志上报函数
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('错误上报失败:', reportErr);
  }
};

// 重置错误状态
const handleReset = () => {
  hasError.value = false;
  error.value = null;
  errorInfo.value = null;
  emit('reset');
};
</script>

<template>
  <div class="app">
    <h1>Vue 3 错误处理示例</h1>
    
    <ErrorBoundary
      @reset="handleBoundaryReset"
    >
      <BuggyComponent />
    </ErrorBoundary>
    
    <!-- 也可以使用自定义错误 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';

// 自定义错误 UI
const customFallback = h('div', {
  class: 'custom-error'
}, [
  h('h3', '📊 图表加载失败'),
  h('p', '请检查网络连接后重试'),
  h('button', {
    onClick: () => console.log('重试按钮点击')
  }, '重新加载')
]);

// 错误边界重置回调
const handleBoundaryReset = () => {
  console.log('错误边界已重置，页面恢复正常');
};
</script>