// 常見(jiàn)錯(cuò)誤類(lèi)型
// 1. 空值引用
const userInfo = null;
console.log(userInfo.name); // TypeError: Cannot read property 'name' of null

// 2. 異步錯(cuò)誤未捕獲
asyncfunction loadData() {
const response = await fetch('/api/user');
const data = await response.json();
// 如果接口返回格式異常，下面代碼會(huì)報(bào)錯(cuò)
document.getElementById('username').textContent = data.user.name;
}

// 資源加載容錯(cuò)
function loadCriticalResource(primaryUrl, fallbackUrl) {
returnnewPromise((resolve, reject) => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = primaryUrl;
    
    link.onload = resolve;
    link.onerror = () => {
      // 主資源失敗，加載備用資源
      link.href = fallbackUrl;
      link.onerror = reject;
    };
    
    document.head.appendChild(link);
  });
}

// 統(tǒng)一接口錯(cuò)誤處理
asyncfunction apiRequest(url, options = {}) {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 10000);

try {
    const response = await fetch(url, {
      ...options,
      signal: controller.signal
    });
    
    clearTimeout(timeoutId);
    
    if (!response.ok) {
      thrownewError(`HTTP ${response.status}: ${response.statusText}`);
    }
    
    returnawait response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      thrownewError('請(qǐng)求超時(shí)，請(qǐng)稍后重試');
    }
    throw error;
  }
}

/* 可能導(dǎo)致白屏的CSS */
.content {
  color: white;
  background: white; /* 白色文字配白色背景 */
}

.container {
  position: absolute;
  left: -9999px; /* 內(nèi)容移出可視區(qū)域 */
}

// 移動(dòng)端vConsole集成
import VConsole from 'vconsole';

if (process.env.NODE_ENV === 'development' || window.location.search.includes('debug=1')) {
  new VConsole();
}

// React錯(cuò)誤邊界
class ErrorBoundary extends React.Component {
constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 上報(bào)錯(cuò)誤
    console.error('頁(yè)面錯(cuò)誤:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return<div className="error-fallback">頁(yè)面出現(xiàn)錯(cuò)誤，請(qǐng)刷新重試</div>;
    }
    returnthis.props.children;
  }
}

// Sentry錯(cuò)誤監(jiān)控
import * as Sentry from"@sentry/browser";

Sentry.init({
dsn: "YOUR_DSN_HERE",
environment: process.env.NODE_ENV,
});

// 全局錯(cuò)誤捕獲
window.addEventListener('error', (event) => {
  Sentry.captureException(event.error);
});

window.addEventListener('unhandledrejection', (event) => {
  Sentry.captureException(event.reason);
});

// 關(guān)鍵特性檢測(cè)
function checkCompatibility() {
const requiredFeatures = [
    () =>typeofPromise !== 'undefined',
    () => typeof fetch !== 'undefined',
    () => typeofObject.assign !== 'undefined'
  ];

const unsupported = requiredFeatures.filter(check => !check());

if (unsupported.length > 0) {
    document.body.innerHTML = `
      <div style="text-align: center; padding: 50px;">
        <h2>瀏覽器版本過(guò)低</h2>
        <p>請(qǐng)升級(jí)瀏覽器以獲得最佳體驗(yàn)</p>
      </div>
    `;
    returnfalse;
  }

returntrue;
}