try {
  // 可能拋出錯(cuò)誤的代碼
  const result = JSON.parse(invalidJson);
} catch (error) {
  // 錯(cuò)誤處理邏輯
  console.error('解析JSON失敗:', error.message);
  // 可記錄錯(cuò)誤到服務(wù)端
  reportErrorToServer(error);
}

// 錯(cuò)誤示例：setTimeout 內(nèi)的錯(cuò)誤無(wú)法被捕獲
try {
  setTimeout(() => {
    // 這里的錯(cuò)誤會(huì)在異步隊(duì)列執(zhí)行，此時(shí) try...catch 已結(jié)束
    JSON.parse('invalid-json'); // 拋出錯(cuò)誤
  }, 1000);
} catch (error) {
  // 永遠(yuǎn)不會(huì)進(jìn)入這里！
  console.log('捕獲到錯(cuò)誤:', error); 
}

// 錯(cuò)誤示例：未 await 的 Promise 錯(cuò)誤無(wú)法被捕獲
try {
  // Promise 回調(diào)是異步的，throw 時(shí) try...catch 已執(zhí)行完
  Promise.resolve().then(() => {
    throw new Error('Promise 內(nèi)的錯(cuò)誤');
  });
} catch (error) {
  // 也不會(huì)進(jìn)入這里！
  console.log('捕獲到錯(cuò)誤:', error);
}

// 正確示例：await 配合 try...catch 捕獲異步錯(cuò)誤
async function fetchData() {
  try {
    // await 會(huì)等待 Promise 執(zhí)行，若失敗則拋出錯(cuò)誤
    const response = await fetch('https://api.example.com/invalid-url');
  } catch (error) {
    // 能捕獲到 fetch 失敗、HTTP 錯(cuò)誤、JSON 解析錯(cuò)誤等所有異步相關(guān)錯(cuò)誤
    console.log('捕獲到異步錯(cuò)誤:', error.message);
    // 可做降級(jí)處理（如返回默認(rèn)數(shù)據(jù)）
    return { defaultData: [] };
  }
}
fetchData();

// 示例：Promise.catch 配合 try...catch
function fetchData() {
  return new Promise((resolve, reject) => {
    fetch('https://api.example.com/invalid-url')
      .then(response => {
        if (!response.ok) throw new Error(`請(qǐng)求失敗: ${response.status}`);
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => {
        // 手動(dòng)把異步錯(cuò)誤拋到外層
        reject(error);
      });
  });
}

// 外層用 try...catch 捕獲 reject 的錯(cuò)誤
async function wrapper() {
  try {
    await fetchData();
  } catch (error) {
    console.log('捕獲到異步錯(cuò)誤:', error.message);
  }
}

wrapper();

// 全局錯(cuò)誤監(jiān)聽
window.onerror = function(message, source, lineno, colno, error) {
  // 關(guān)鍵參數(shù)說(shuō)明：
  // message：錯(cuò)誤描述（如"Uncaught ReferenceError: xxx is not defined"）
  // source：錯(cuò)誤發(fā)生的腳本URL（方便定位哪個(gè)文件出錯(cuò)）
  // lineno/colno：錯(cuò)誤行號(hào)/列號(hào)
  // error：完整的Error對(duì)象（包含stack堆棧信息）
  
  // 過(guò)濾掉無(wú)關(guān)錯(cuò)誤（比如某些第三方庫(kù)的非致命警告）
  if (message.includes('script error') && !source) return true;
  
  console.error('全局同步錯(cuò)誤:', {
    message,
    source: source?.split('/').pop(), // 簡(jiǎn)化文件名
    line: lineno,
    column: colno,
    stack: error?.stack
  });
  
  // 上報(bào)錯(cuò)誤（生產(chǎn)環(huán)境必備）
  reportGlobalError(error);
  
  // 返回true：阻止瀏覽器默認(rèn)錯(cuò)誤提示（避免用戶看到難看的控制臺(tái)報(bào)錯(cuò)）
  return true;
};

window.addEventListener('unhandledrejection', (event) => {
  // 阻止瀏覽器默認(rèn)提示（部分瀏覽器會(huì)在控制臺(tái)警告）
  event.preventDefault();
  
  const error = event.reason; // Promise拒絕的原因（Error對(duì)象）
  console.error('未捕獲的Promise錯(cuò)誤:', {
    message: error.message,
    stack: error.stack,
    // 額外信息：比如是哪個(gè)接口請(qǐng)求失敗
    requestUrl: error.config?.url || '未知'
  });
  
  // 上報(bào)異步錯(cuò)誤
  reportAsyncError(error);
});

Promise.reject(new Error('Unhandled Promise rejection'))

<!-- ErrorSafeChart.vue：包裹易出錯(cuò)的圖表組件 -->
<template>
  <div class="chart-container">
    <!-- 錯(cuò)誤時(shí)顯示降級(jí)UI -->
    <div v-if="hasError" class="error-tip">
      <icon name="warning" /> 圖表加載失敗，點(diǎn)擊重試
      <button @click="resetError">重試</button>
    </div>
    <ComplexChart v-else :data="chartData" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComplexChart from './ComplexChart.vue';

const hasError = ref(false);
const chartData = ref([]);

// 組件內(nèi)錯(cuò)誤捕獲生命周期
const errorCaptured = (error, instance, info) => {
  // 參數(shù)說(shuō)明：
  // error：錯(cuò)誤對(duì)象
  // instance：發(fā)生錯(cuò)誤的子組件實(shí)例（這里是ComplexChart）
  // info：錯(cuò)誤發(fā)生的場(chǎng)景（如"render"渲染時(shí)、"watch"監(jiān)聽時(shí)）
  
  hasError.value = true;
  console.error('圖表組件錯(cuò)誤:', {
    component: instance.$options.name || 'ComplexChart',
    scene: info,
    error: error.message
  });
  
  // 上報(bào)組件錯(cuò)誤
  reportVueComponentError(error, instance, info);
  
  // 關(guān)鍵：返回false阻止錯(cuò)誤向上傳播（不會(huì)觸發(fā)全局errorHandler和window.onerror）
  // 適合處理已知的非致命錯(cuò)誤，避免全局告警
  return false;
};

// 重置錯(cuò)誤狀態(tài)（重試邏輯）
const resetError = () => {
  hasError.value = false;
  // 重新加載圖表數(shù)據(jù)
  fetchChartData();
};

// 加載圖表數(shù)據(jù)
const fetchChartData = async () => {
  // ... 數(shù)據(jù)請(qǐng)求邏輯
};
</script>

// main.js：Vue入口文件
import { createApp } from 'vue';
import App from './App.vue';
import { reportVueGlobalError } from './utils/errorReport';

const app = createApp(App);

// 配置Vue全局錯(cuò)誤處理器
app.config.errorHandler = (error, instance, info) => {
  // 過(guò)濾掉已處理過(guò)的錯(cuò)誤（比如某些組件手動(dòng)標(biāo)記過(guò)）
  if (error.__vue_handled__) return;
  
  console.error('Vue全局錯(cuò)誤:', {
    component: instance?.$options.name || '根組件',
    scene: info, // 如"render"、"watch"、"v-on handler"
    message: error.message,
    stack: error.stack
  });
  
  // 標(biāo)記錯(cuò)誤已處理，避免重復(fù)上報(bào)
  error.__vue_handled__ = true;
  
  // 上報(bào)全局錯(cuò)誤（生產(chǎn)環(huán)境必加）
  reportVueGlobalError(error, instance, info);
  
  // 可選：全局提示用戶（如頂部Toast）
  showGlobalToast('系統(tǒng)出現(xiàn)小錯(cuò)誤，請(qǐng)刷新頁(yè)面重試');
};

// 配置Vue警告處理器（開發(fā)環(huán)境輔助調(diào)試）
if (import.meta.env.DEV) {
  app.config.warnHandler = (msg, instance, trace) => {
    console.warn('Vue警告:', {
      message: msg,
      component: instance?.$options.name,
      trace: trace // 警告的調(diào)用棧
    });
  };
}

app.mount('#app');

// components/ErrorBoundary.jsx
import React from 'react';
import { reportReactError } from '../utils/errorReport';
import ErrorFallback from './ErrorFallback'; // 自定義降級(jí)UI組件

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false, // 是否發(fā)生錯(cuò)誤
      error: null,     // 錯(cuò)誤對(duì)象
      errorInfo: null  // 錯(cuò)誤詳情（含組件棧）
    };
  }

  // 靜態(tài)方法：更新錯(cuò)誤狀態(tài)（渲染前觸發(fā)）
  static getDerivedStateFromError(error) {
    // 返回新狀態(tài)，讓下一次渲染顯示降級(jí)UI
    return { hasError: true, error };
  }

  // 錯(cuò)誤發(fā)生后觸發(fā)（可執(zhí)行副作用，如日志上報(bào)）
  componentDidCatch(error, errorInfo) {
    // 記錄錯(cuò)誤詳情（errorInfo含componentStack，能定位哪個(gè)組件出錯(cuò)）
    this.setState({ errorInfo });
    
    console.error('React組件錯(cuò)誤:', {
      error: error.message,
      componentStack: errorInfo.componentStack,
      // 從props獲取額外上下文（如當(dāng)前頁(yè)面路由）
      page: this.props.currentPage
    });
    
    // 上報(bào)React錯(cuò)誤
    reportReactError({
      error,
      componentStack: errorInfo.componentStack,
      page: this.props.currentPage
    });
  }

  // 重置錯(cuò)誤狀態(tài)（支持重試）
  resetError = () => {
    this.setState({ hasError: false, error: null, errorInfo: null });
  };

  render() {
    const { hasError, error, errorInfo } = this.state;
    const { children, fallback } = this.props;

    // 有錯(cuò)誤：顯示降級(jí)UI（優(yōu)先用props傳入的fallback，否則用默認(rèn)）
    if (hasError) {
      return fallback ? (
        React.cloneElement(fallback, { 
          error, 
          resetError: this.resetError 
        })
      ) : (
        <ErrorFallback 
          error={error} 
          errorInfo={errorInfo} 
          onReset={this.resetError} 
        />
      );
    }

    // 無(wú)錯(cuò)誤：渲染子組件
    return children;
  }
}

export default ErrorBoundary;

// App.jsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ErrorBoundary from './components/ErrorBoundary';
import Home from './pages/Home';
import Order from './pages/Order';
import NotFound from './pages/NotFound';
import GlobalErrorFallback from './components/GlobalErrorFallback';

function App() {
  return (
    <Router>
      {/* 全局ErrorBoundary：捕獲所有路由頁(yè)面的錯(cuò)誤 */}
      <ErrorBoundary 
        currentPage="全局"
        fallback={<GlobalErrorFallback />}
      >
        <Routes>
          {/* 頁(yè)面級(jí)ErrorBoundary：針對(duì)特定頁(yè)面單獨(dú)處理 */}
          <Route 
            path="/order" 
            element={
              <ErrorBoundary 
                currentPage="訂單頁(yè)"
                fallback={<div>訂單頁(yè)加載失敗，<button onClick={(e) => e.target.onReset()}>重試</button></div>}
              >
                <Order />
              </ErrorBoundary>
            } 
          />
          <Route path="/" element={<Home />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </ErrorBoundary>
    </Router>
  );
}

export default App;

// pages/Home.jsx
import ErrorBoundary from '../components/ErrorBoundary';
import PaymentForm from '../components/PaymentForm'; // 高危組件：支付表單
import ProductList from '../components/ProductList';

function Home() {
  return (
    <div className="home-page">
      <h1>首頁(yè)</h1>
      {/* 只包裹高危組件，不影響其他部分 */}
      <ErrorBoundary 
        currentPage="首頁(yè)-支付表單"
        fallback={<div>支付表單加載失敗，請(qǐng)稍后再試</div>}
      >
        <PaymentForm />
      </ErrorBoundary>
      <ProductList /> {/* 普通組件，不包裹 */}
    </div>
  );
}