import React from 'react';

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

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

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

  // 重置錯誤狀態(tài)的方法
  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>抱歉，頁面出現(xiàn)了錯誤 ??</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('計數(shù)超過限制了！');
  }
  
  return (
    <div>
      <h3>當(dāng)前計數(shù): {count}</h3>
      <button onClick={() => setCount(count + 1)}>增加計數(shù)</button>
    </div>
  );
};

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

export default App;

componentDidCatch(error, errorInfo) {
  // 上報錯誤信息到服務(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('錯誤上報失敗:', reportError);
  });
}

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

<template>
  <div>
    <slot v-if="!hasError"></slot>
    <div v-else class="error-boundary">
      <h2>抱歉，頁面出現(xiàn)了錯誤 ??</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']);

// 錯誤狀態(tài)
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 阻止錯誤繼續(xù)向上傳播
  return false;
});

// 錯誤日志上報函數(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('錯誤上報失敗:', reportErr);
  }
};

// 重置錯誤狀態(tài)
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', '請檢查網(wǎng)絡(luò)連接后重試'),
  h('button', {
    onClick: () => console.log('重試按鈕點擊')
  }, '重新加載')
]);

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