// 典型商品詳情組件結構
const ProductDetail = ({ product }) => {
  return (
    <div className="product-page">
      <h2>{product.name}</h2>
      <div className="gallery">
        {product.images.map(img => (
          <img key={img.id} 
               src={img.cdnUrl}  // ?? 故障點：CDN可能不可用
               alt={product.name} 
          />
        ))}
      </div>
      {/* 其他關鍵內容 */}
    </div>
  )
}

// 圖像加載器組件（核心降級邏輯）
function ResilientImage({ src, alt, fallbacks = [] }) {
  const [currentSrc, setCurrentSrc] = React.useState(src)
  
  // 1. 主CDN加載失敗處理
  const handleError = (e) => {
    // ?? 決策點1：優(yōu)先嘗試備用CDN
    if (fallbacks.length > 0) {
      setCurrentSrc(fallbacks.shift())
      return
    }
    
    // ?? 決策點2：無備用時啟用占位圖系統(tǒng)
    e.target.onerror = null // 防止循環(huán)報錯
    applyPlaceholderStrategy(e.target)
  }

  // 多級占位策略
  const applyPlaceholderStrategy = (imgEl) => {
    // 策略1：LQIP（低質量圖像占位）
    if (imgEl.dataset.lqip) {
      imgEl.src = imgEl.dataset.lqip
      return
    }
    
    // 策略2：CSS漸變占位（僅需50字節(jié)）
    imgEl.outerHTML = `
      <div class="gradient-placeholder" 
           aria-label="${alt}加載失敗"
           style="background:linear-gradient(120deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%)">
      </div>
    `
  }

  return <img src={currentSrc} alt={alt} onError={handleError} />
}

// 實際業(yè)務調用
<ProductImage 
  src="https://cdn1.example.com/prod_123.jpg"
  fallbacks={[
    'https://backup-cdn.example.com/prod_123.jpg',
    'https://storage.oss.com/prod_123.jpg'
  ]}
  data-lqip="data:image/webp;base64,UklGRh4A..." 
/>

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|webp)$/,
        use: [
          {
            loader: 'responsive-loader',
            options: {
              // ?? 生成LQIP占位符
              placeholder: true,
              placeholderSize: 20 // 超小尺寸預覽
            }
          },
          {
            loader: 'image-cdn-loader',
            options: {
              primary: 'https://cdn1.example.com/[path]',
              fallbacks: [
                'https://backup1.example.com/[path]',
                'https://object-storage.example.com/[path]'
              ]
            }
          }
        ]
      }
    ]
  }
}

# CDN故障自動回退方案
server {
  location ~* \.(jpg|jpeg|png|webp)$ {
    # ?? 三級回退策略
    proxy_pass https://main-cdn.com$uri;
    proxy_intercept_errors on;
    
    error_page 404 500 502 503 504 = @img_fallback;

    # 設置快速失?。ū苊庾枞?
    proxy_connect_timeout 1s;
    proxy_read_timeout 2s;
  }

  location @img_fallback {
    # 優(yōu)先嘗試備份CDN
    proxy_pass https://backup-cdn.com$uri;
    
    # 二次回退到OSS
    error_page 404 500 502 503 504 = @oss_fallback;
  }

  location @oss_fallback {
    # 最后回源到自有存儲
    proxy_pass https://storage.example.com$uri;
    
    # 仍失敗則返回占位圖
    error_page 404 500 502 503 504 = /placeholders/$1;
  }
}

// 字體加載監(jiān)控
document.fonts.load('1em MainFont').then(() => {
  document.documentElement.classList.add('fonts-loaded')
}, () => {
  // ?? 降級到系統(tǒng)字體
  document.documentElement.classList.add('fonts-fallback')
})

/* CSS備用方案 */
.fonts-fallback body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  /* 啟用備用排版方案 */
  letter-spacing: 0.03em;
}

<!-- 支付SDK動態(tài)加載 -->
<script>
window.paymentSDKReady = () => {
  // 正常初始化
}
</script>

<script src="https://payment-sdk.com/v3" 
        onerror="loadLocalFallback()"></script>

<script>
function loadLocalFallback() {
  // ?? 加載備用支付流程
  const script = document.createElement('script')
  script.src = '/static/payment-fallback.js'
  document.body.appendChild(script)
}
</script>

<!-- 關鍵CSS內聯(lián) -->
<style>
/* 首屏核心樣式 */
</style>

<!-- 異步加載完整CSS -->
<link rel="preload" href="main.css" rel="external nofollow"  rel="external nofollow"  as="style" onload="this.rel='stylesheet'">
<noscript>
  <!-- ?? 無JS環(huán)境降級 -->
  <link rel="stylesheet" href="main.css" rel="external nofollow"  rel="external nofollow" >
</noscript>

<script>
// 加載失敗轉備用CDN
document.querySelector('link[rel="preload"]').onerror = function() {
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.
  document.head.appendChild(link)
}
</script>

// 錯誤示例：圖片加載失敗阻塞關鍵操作
getProductData().then(data => {
  preloadImages(data.gallery).then(renderPage) // 風險點
})

// 資源加載超時控制
function loadWithTimeout(url, timeout = 3000) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) => 
      setTimeout(reject, timeout)
    )
  ])
}

// 資源錯誤全局監(jiān)聽
window.addEventListener('error', e => {
  if (e.target.tagName === 'IMG') {
    analytics.send('IMG_LOAD_FAIL', {
      src: e.target.src,
      timestamp: Date.now()
    })
  }
}, true) // 捕獲階段