// 性能監(jiān)控
const perfData = window.performance.timing;
const loadTime = perfData.loadEventEnd - perfData.navigationStart;

// 錯(cuò)誤監(jiān)控
window.addEventListener('error', (e) => {
  logError({
    msg: e.message,
    file: e.filename,
    line: e.lineno,
    col: e.colno,
    stack: e.error?.stack
  });
});

// 未捕獲的Promise異常
window.addEventListener('unhandledrejection', (e) => {
  logError({
    msg: e.reason?.message || 'Unhandled promise rejection',
    stack: e.reason?.stack
  });
});

// 使用requestIdleCallback在空閑時(shí)段上報(bào)
window.requestIdleCallback(() => {
  reportData(analyticsData);
});

// 或使用sendBeacon在頁面卸載時(shí)可靠上報(bào)
window.addEventListener('unload', () => {
  navigator.sendBeacon('/log', analyticsData);
});

// 使用PerformanceObserver獲取現(xiàn)代性能指標(biāo)
const perfObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    switch (entry.entryType) {
      case 'paint':
        if (entry.name === 'first-paint') {
          metrics.FP = entry.startTime;
        } else if (entry.name === 'first-contentful-paint') {
          metrics.FCP = entry.startTime;
        }
        break;
      case 'largest-contentful-paint':
        metrics.LCP = entry.renderTime || entry.loadTime;
        break;
      case 'layout-shift':
        if (!entry.hadRecentInput) {
          metrics.CLS += entry.value;
        }
        break;
    }
  }
});

// 監(jiān)控的指標(biāo)類型
perfObserver.observe({entryTypes: ['paint', 'largest-contentful-paint', 'layout-shift']});

// 傳統(tǒng)性能指標(biāo)兼容方案
if (window.performance && performance.timing) {
  const pt = performance.timing;
  metrics.DNS = pt.domainLookupEnd - pt.domainLookupStart;
  metrics.TCP = pt.connectEnd - pt.connectStart;
  metrics.TTFB = pt.responseStart - pt.requestStart;
}

const firstScreenObserver = new MutationObserver(() => {
  const viewportHeight = window.innerHeight;
  const viewportWidth = window.innerWidth;
  // 計(jì)算首屏區(qū)域內(nèi)元素
});

// 1. 同步錯(cuò)誤捕獲
window.onerror = function(msg, url, line, col, error) {
  reportError({
    type: 'SYNC_ERROR',
    msg, url, line, col,
    stack: error?.stack
  });
};

// 2. 異步錯(cuò)誤捕獲
window.addEventListener('error', (event) => {
  if (event.target && (event.target.src || event.target.href)) {
    reportError({
      type: 'RESOURCE_ERROR',
      tag: event.target.tagName,
      url: event.target.src || event.target.href
    });
  }
}, true); // 使用捕獲階段

// 3. Promise異常捕獲
window.addEventListener('unhandledrejection', (event) => {
  reportError({
    type: 'PROMISE_ERROR',
    reason: event.reason?.message,
    stack: event.reason?.stack
  });
});

// 4. 框架級(jí)錯(cuò)誤捕獲（以Vue為例）
Vue.config.errorHandler = (err, vm, info) => {
  reportError({
    type: 'VUE_ERROR',
    error: err.toString(),
    component: vm?._name,
    lifecycleHook: info,
    stack: err.stack
  });
};

// 5. 跨域腳本錯(cuò)誤處理
<script crossorigin="anonymous" onerror="handleScriptError(event)"></script>

document.addEventListener('click', (e) => {
  const target = e.target;
  const path = getXPath(target);
  const position = {
    x: e.pageX,
    y: e.pageY,
    viewport: `${window.innerWidth}x${window.innerHeight}`
  };
  
  reportBehavior({
    type: 'CLICK',
    path,
    position,
    timestamp: Date.now(),
    text: getElementText(target)
  });
});

function getXPath(element) {
  // 生成元素的XPath路徑
}

let lastActiveTime = Date.now();
document.addEventListener('mousemove', updateActiveTime);
document.addEventListener('keypress', updateActiveTime);

function updateActiveTime() {
  const now = Date.now();
  const duration = now - lastActiveTime;
  if (duration > 3000) { // 非活躍超過3秒
    reportBehavior({
      type: 'INACTIVITY',
      duration
    });
  }
  lastActiveTime = now;
}

class Reporter {
  constructor() {
    this.queue = [];
    this.maxRetry = 3;
    this.batchSize = 5;
    this.timer = null;
    this.url = 'https://report.example.com/api';
  }
  
  add(data) {
    this.queue.push(data);
    if (this.queue.length >= this.batchSize) {
      this.send();
    } else {
      this.startTimer();
    }
  }
  
  startTimer() {
    if (!this.timer) {
      this.timer = setTimeout(() => {
        this.send();
        this.timer = null;
      }, 5000); // 5秒延遲上報(bào)
    }
  }
  
  async send() {
    if (this.queue.length === 0) return;
    
    const dataToSend = [...this.queue];
    this.queue = [];
    
    try {
      await fetch(this.url, {
        method: 'POST',
        body: JSON.stringify(dataToSend),
        headers: {'Content-Type': 'application/json'},
        keepalive: true // 確保頁面卸載時(shí)也能發(fā)送
      });
    } catch (err) {
      // 失敗重試邏輯
      if (this.retryCount < this.maxRetry) {
        this.queue.unshift(...dataToSend);
        this.retryCount++;
        setTimeout(() => this.send(), 1000 * this.retryCount);
      }
    }
  }
  
  // 頁面卸載時(shí)強(qiáng)制上報(bào)
  setupUnloadReport() {
    window.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        this.send();
      }
    });
    
    window.addEventListener('pagehide', () => {
      if (navigator.sendBeacon) {
        const data = JSON.stringify(this.queue);
        navigator.sendBeacon(this.url, data);
      } else {
        this.send();
      }
    });
  }
}

// 采樣率控制（1%采樣）
const shouldSample = () => Math.random() < 0.01;

// 數(shù)據(jù)壓縮方案
function compressData(data) {
  // 1. 移除空字段
  const filtered = Object.fromEntries(
    Object.entries(data).filter(([_, v]) => v != null)
  );
  
  // 2. 縮短字段名
  const mapping = {
    timestamp: 'ts',
    userAgent: 'ua',
    // ...其他字段映射
  };
  
  // 3. 數(shù)值型數(shù)據(jù)精度控制
  if (filtered.loadTime) {
    filtered.loadTime = Math.round(filtered.loadTime);
  }
  
  return filtered;
}

// 支付流程監(jiān)控
const paymentSteps = {
  start: 0,
  loaded: 0,
  submitted: 0,
  completed: 0
};

// 標(biāo)記支付流程節(jié)點(diǎn)
function markPaymentStep(step) {
  paymentSteps[step] = Date.now();
  
  if (step === 'completed') {
    reportPaymentFlow({
      loadTime: paymentSteps.loaded - paymentSteps.start,
      submitTime: paymentSteps.submitted - paymentSteps.loaded,
      processTime: paymentSteps.completed - paymentSteps.submitted,
      paymentMethod: getSelectedPaymentMethod()
    });
  }
}

// 支付錯(cuò)誤監(jiān)控
paymentForm.addEventListener('submit', async (e) => {
  try {
    markPaymentStep('submitted');
    const result = await submitPayment();
    markPaymentStep('completed');
  } catch (err) {
    reportError({
      type: 'PAYMENT_ERROR',
      error: err.message,
      step: 'payment_submission',
      formData: getFormData()
    });
  }
});

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) { // 超過50ms的任務(wù)
      reportLongTask({
        duration: entry.duration,
        startTime: entry.startTime,
        container: entry.attribution[0]?.containerSrc
      });
    }
  }
});
observer.observe({entryTypes: ['longtask']});

setInterval(() => {
  const memory = performance.memory;
  if (memory) {
    if (memory.usedJSHeapSize > memory.jsHeapSizeLimit * 0.7) {
      reportMemoryWarning({
        used: memory.usedJSHeapSize,
        total: memory.totalJSHeapSize,
        limit: memory.jsHeapSizeLimit
      });
    }
  }
}, 10000); // 每10秒檢查一次