/**
 * 捕獲同步代碼錯(cuò)誤
 * @param {Function} fn - 要執(zhí)行的函數(shù)
 * @param {Function} fallback - 錯(cuò)誤處理函數(shù)
 * @returns {any} 函數(shù)執(zhí)行結(jié)果
 */
function safeExecute(fn, fallback) {
  try {
    return fn();
  } catch (error) {
    console.error('執(zhí)行出錯(cuò):', error);
    return fallback ? fallback(error) : null;
  }
}

// 使用示例
safeExecute(
  () => {
    const result = 10 / 0; // 會(huì)導(dǎo)致錯(cuò)誤
    return result;
  },
  (error) => {
    console.log('捕獲到錯(cuò)誤，執(zhí)行備用方案');
    return 0;
  }
);

/**
 * 全局錯(cuò)誤捕獲
 */
function setupGlobalErrorHandler() {
  window.onerror = function(message, source, lineno, colno, error) {
    console.error('全局錯(cuò)誤:', {
      message,
      source,
      lineno,
      colno,
      error
    });
    // 這里可以添加錯(cuò)誤上報(bào)邏輯
    return true; // 阻止默認(rèn)處理
  };
}

// 啟用全局錯(cuò)誤捕獲
setupGlobalErrorHandler();

/**
 * Promise 錯(cuò)誤捕獲
 */
function setupPromiseErrorHandler() {
  window.addEventListener('unhandledrejection', function(event) {
    console.error('未處理的Promise錯(cuò)誤:', {
      reason: event.reason,
      promise: event.promise
    });
    // 這里可以添加錯(cuò)誤上報(bào)邏輯
    event.preventDefault(); // 阻止默認(rèn)處理
  });
}

// 啟用Promise錯(cuò)誤捕獲
setupPromiseErrorHandler();

import Vue from 'vue';

/**
 * Vue 錯(cuò)誤捕獲
 */
Vue.config.errorHandler = function(err, vm, info) {
  console.error('Vue 錯(cuò)誤:', {
    error: err,
    component: vm ? vm.$options.name || 'Anonymous Component' : 'Unknown',
    info // 錯(cuò)誤發(fā)生的位置信息
  });
  // 這里可以添加錯(cuò)誤上報(bào)邏輯
};

import { createApp } from 'vue';

const app = createApp(App);

app.config.errorHandler = (err, instance, info) => {
  console.error('Vue 3 錯(cuò)誤:', {
    error: err,
    instance,
    info
  });
  // 這里可以添加錯(cuò)誤上報(bào)邏輯
};

app.mount('#app');

/**
 * 白屏監(jiān)控 - 基于DOM元素
 * @param {string} selector - 關(guān)鍵DOM元素選擇器
 * @param {number} timeout - 超時(shí)時(shí)間(ms)
 * @param {Function} callback - 白屏回調(diào)
 */
function monitorWhiteScreen(selector, timeout = 3000, callback) {
  const checkTime = Date.now();
  
  function checkElement() {
    const element = document.querySelector(selector);
    if (element) {
      console.log('頁面正常加載');
    } else {
      if (Date.now() - checkTime > timeout) {
        console.error('檢測到白屏');
        if (callback) {
          callback();
        }
      } else {
        requestAnimationFrame(checkElement);
      }
    }
  }
  
  requestAnimationFrame(checkElement);
}

// 使用示例
monitorWhiteScreen('#app', 5000, () => {
  // 白屏處理邏輯
  console.log('上報(bào)白屏事件');
});

/**
 * 白屏監(jiān)控 - 基于視覺
 * @param {number} threshold - 閾值(0-1)
 * @param {number} timeout - 超時(shí)時(shí)間(ms)
 * @param {Function} callback - 白屏回調(diào)
 */
function monitorVisualWhiteScreen(threshold = 0.8, timeout = 3000, callback) {
  const checkTime = Date.now();
  
  function checkVisual() {
    if (Date.now() - checkTime > timeout) {
      const body = document.body;
      const rect = body.getBoundingClientRect();
      const area = rect.width * rect.height;
      
      if (area === 0) {
        console.error('檢測到白屏：body面積為0');
        if (callback) callback();
        return;
      }
      
      // 這里可以添加更復(fù)雜的視覺檢測邏輯
      // 例如使用Canvas截圖分析像素
      
      console.log('頁面視覺檢查通過');
    } else {
      requestAnimationFrame(checkVisual);
    }
  }
  
  requestAnimationFrame(checkVisual);
}

/**
 * 白屏監(jiān)控 - 基于性能指標(biāo)
 * @param {number} timeout - 超時(shí)時(shí)間(ms)
 * @param {Function} callback - 白屏回調(diào)
 */
function monitorPerformanceWhiteScreen(timeout = 5000, callback) {
  const checkTime = Date.now();
  
  function checkPerformance() {
    if (Date.now() - checkTime > timeout) {
      const navigation = performance.getEntriesByType('navigation')[0];
      if (navigation) {
        console.log('頁面性能指標(biāo):', {
          domContentLoadedEventEnd: navigation.domContentLoadedEventEnd,
          loadEventEnd: navigation.loadEventEnd
        });
        
        // 如果關(guān)鍵時(shí)間點(diǎn)為0，可能發(fā)生了白屏
        if (navigation.domContentLoadedEventEnd === 0) {
          console.error('檢測到白屏：DOM未加載完成');
          if (callback) callback();
        }
      }
    } else {
      requestAnimationFrame(checkPerformance);
    }
  }
  
  requestAnimationFrame(checkPerformance);
}

/**
 * 構(gòu)建錯(cuò)誤上報(bào)數(shù)據(jù)
 * @param {Error} error - 錯(cuò)誤對象
 * @param {string} type - 錯(cuò)誤類型
 * @returns {Object} 錯(cuò)誤上報(bào)數(shù)據(jù)
 */
function buildErrorReport(error, type = 'js') {
  return {
    // 錯(cuò)誤基本信息
    type,
    message: error.message || '未知錯(cuò)誤',
    stack: error.stack || '',
    
    // 上下文信息
    url: window.location.href,
    userAgent: navigator.userAgent,
    timestamp: Date.now(),
    
    // 設(shè)備信息
    device: {
      screenWidth: window.screen.width,
      screenHeight: window.screen.height,
      language: navigator.language
    },
    
    // 網(wǎng)絡(luò)信息
    network: navigator.connection ? {
      type: navigator.connection.type,
      effectiveType: navigator.connection.effectiveType,
      rtt: navigator.connection.rtt
    } : null,
    
    // 用戶信息（可選，需注意隱私）
    userId: getUserId() // 假設(shè)有一個(gè)獲取用戶ID的函數(shù)
  };
}

/**
 * 錯(cuò)誤上報(bào)管理器
 */
class ErrorReporter {
  constructor() {
    this.queue = [];
    this.batchSize = 10; // 批量上報(bào)大小
    this.debounceTime = 1000; // 防抖時(shí)間(ms)
    this.debounceTimer = null;
    this.apiUrl = '/api/error-report'; // 上報(bào)接口
  }
  
  /**
   * 上報(bào)錯(cuò)誤
   * @param {Object} errorData - 錯(cuò)誤數(shù)據(jù)
   */
  report(errorData) {
    this.queue.push(errorData);
    this.scheduleReport();
  }
  
  /**
   * 調(diào)度上報(bào)
   */
  scheduleReport() {
    if (this.queue.length >= this.batchSize) {
      this.flush();
      return;
    }
    
    if (this.debounceTimer) {
      clearTimeout(this.debounceTimer);
    }
    
    this.debounceTimer = setTimeout(() => {
      this.flush();
    }, this.debounceTime);
  }
  
  /**
   * 執(zhí)行上報(bào)
   */
  async flush() {
    if (this.queue.length === 0) return;
    
    const errors = [...this.queue];
    this.queue = [];
    
    try {
      const response = await fetch(this.apiUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ errors })
      });
      
      if (!response.ok) {
        console.error('錯(cuò)誤上報(bào)失敗:', response.status);
        // 失敗后可以重試或存儲到本地
        this.queue.unshift(...errors);
      } else {
        console.log('錯(cuò)誤上報(bào)成功');
      }
    } catch (error) {
      console.error('上報(bào)網(wǎng)絡(luò)錯(cuò)誤:', error);
      // 網(wǎng)絡(luò)錯(cuò)誤時(shí)存儲到本地
      this.queue.unshift(...errors);
    }
  }
}

// 創(chuàng)建錯(cuò)誤上報(bào)實(shí)例
const errorReporter = new ErrorReporter();

/**
 * 增強(qiáng)版錯(cuò)誤上報(bào)管理器
 */
class EnhancedErrorReporter extends ErrorReporter {
  constructor() {
    super();
    this.storageKey = 'error-reports';
    this.loadFromStorage();
  }
  
  /**
   * 從本地存儲加載錯(cuò)誤
   */
  loadFromStorage() {
    try {
      const stored = localStorage.getItem(this.storageKey);
      if (stored) {
        const errors = JSON.parse(stored);
        this.queue.push(...errors);
        localStorage.removeItem(this.storageKey);
        console.log('從本地存儲恢復(fù)錯(cuò)誤報(bào)告:', errors.length);
      }
    } catch (error) {
      console.error('加載本地錯(cuò)誤報(bào)告失敗:', error);
    }
  }
  
  /**
   * 保存錯(cuò)誤到本地存儲
   */
  saveToStorage() {
    try {
      if (this.queue.length > 0) {
        localStorage.setItem(this.storageKey, JSON.stringify(this.queue));
        console.log('錯(cuò)誤報(bào)告已保存到本地存儲');
      }
    } catch (error) {
      console.error('保存錯(cuò)誤報(bào)告到本地存儲失敗:', error);
    }
  }
  
  /**
   * 執(zhí)行上報(bào)
   */
  async flush() {
    if (this.queue.length === 0) return;
    
    const errors = [...this.queue];
    
    try {
      // 調(diào)用父類的flush方法
      await super.flush();
    } finally {
      // 如果還有未上報(bào)的錯(cuò)誤，保存到本地
      if (this.queue.length > 0) {
        this.saveToStorage();
      }
    }
  }
}

/**
 * 前端監(jiān)控系統(tǒng)
 */
class FrontendMonitor {
  constructor(options = {}) {
    this.options = {
      errorReportUrl: '/api/error-report',
      whiteScreenSelector: '#app',
      whiteScreenTimeout: 5000,
      ...options
    };
    
    this.errorReporter = new EnhancedErrorReporter();
    this.errorReporter.apiUrl = this.options.errorReportUrl;
    
    this.setupErrorHandlers();
    this.setupWhiteScreenMonitor();
  }
  
  /**
   * 設(shè)置錯(cuò)誤處理器
   */
  setupErrorHandlers() {
    // 全局錯(cuò)誤處理
    window.onerror = (message, source, lineno, colno, error) => {
      const errorData = buildErrorReport(error || new Error(message), 'js');
      errorData.detail = {
        source,
        lineno,
        colno
      };
      this.errorReporter.report(errorData);
      return true;
    };
    
    // Promise錯(cuò)誤處理
    window.addEventListener('unhandledrejection', (event) => {
      const errorData = buildErrorReport(event.reason, 'promise');
      this.errorReporter.report(errorData);
      event.preventDefault();
    });
    
    // 資源加載錯(cuò)誤
    window.addEventListener('error', (event) => {
      if (event.target instanceof Element) {
        const errorData = {
          type: 'resource',
          message: `資源加載失敗: ${event.target.src || event.target.href}`,
          url: window.location.href,
          userAgent: navigator.userAgent,
          timestamp: Date.now(),
          detail: {
            tagName: event.target.tagName,
            src: event.target.src,
            href: event.target.href
          }
        };
        this.errorReporter.report(errorData);
      }
    }, true);
  }
  
  /**
   * 設(shè)置白屏監(jiān)控
   */
  setupWhiteScreenMonitor() {
    monitorWhiteScreen(
      this.options.whiteScreenSelector,
      this.options.whiteScreenTimeout,
      () => {
        const errorData = {
          type: 'white-screen',
          message: '頁面白屏',
          url: window.location.href,
          userAgent: navigator.userAgent,
          timestamp: Date.now(),
          detail: {
            selector: this.options.whiteScreenSelector,
            timeout: this.options.whiteScreenTimeout
          }
        };
        this.errorReporter.report(errorData);
      }
    );
  }
  
  /**
   * 手動(dòng)上報(bào)錯(cuò)誤
   * @param {Error|string} error - 錯(cuò)誤對象或錯(cuò)誤信息
   * @param {Object} context - 上下文信息
   */
  reportError(error, context = {}) {
    const errorObj = typeof error === 'string' ? new Error(error) : error;
    const errorData = buildErrorReport(errorObj, 'custom');
    errorData.context = context;
    this.errorReporter.report(errorData);
  }
  
  /**
   * 上報(bào)性能指標(biāo)
   * @param {Object} metrics - 性能指標(biāo)
   */
  reportPerformance(metrics) {
    const performanceData = {
      type: 'performance',
      url: window.location.href,
      userAgent: navigator.userAgent,
      timestamp: Date.now(),
      metrics
    };
    this.errorReporter.report(performanceData);
  }
}

// 初始化監(jiān)控系統(tǒng)
const monitor = new FrontendMonitor({
  errorReportUrl: 'https://monitor.example.com/api/report',
  whiteScreenSelector: '.main-content',
  whiteScreenTimeout: 8000
});

// 手動(dòng)上報(bào)錯(cuò)誤
function riskyOperation() {
  try {
    // 可能出錯(cuò)的操作
  } catch (error) {
    monitor.reportError(error, {
      operation: 'riskyOperation',
      params: { /* 相關(guān)參數(shù) */ }
    });
  }
}

// 上報(bào)性能指標(biāo)
function reportPagePerformance() {
  const navigation = performance.getEntriesByType('navigation')[0];
  if (navigation) {
    monitor.reportPerformance({
      domContentLoaded: navigation.domContentLoadedEventEnd - navigation.startTime,
      loadTime: navigation.loadEventEnd - navigation.startTime,
      firstPaint: performance.getEntriesByName('first-paint')[0]?.startTime || 0,
      firstContentfulPaint: performance.getEntriesByName('first-contentful-paint')[0]?.startTime || 0
    });
  }
}

// 頁面加載完成后上報(bào)性能
window.addEventListener('load', reportPagePerformance);