// monitor-leak.js
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({
    headless: false, // 方便調試觀察
    args: ['--js-flags="--expose-gc"'] // 關鍵：允許手動觸發(fā)垃圾回收
  });
  const page = await browser.newPage();
  await page.goto('http://localhost:8080/target-page');
  // 1. 獲取基準內存
  await page.evaluate(() => window.gc()); // 強制 GC
  const initialMemory = await page.metrics();
  console.log(`初始 JSHeapSize: ${initialMemory.JSHeapUsedSize / 1024 / 1024} MB`);
  // 2. 模擬用戶操作（重復多次以放大泄漏效果）
  for (let i = 0; i < 10; i++) {
    await page.click('#open-dialog-btn');
    await page.waitForSelector('.dialog');
    await page.click('#close-dialog-btn');
    await page.waitForSelector('.dialog', { hidden: true });
  }
  // 3. 再次強制 GC 并檢測
  await page.evaluate(() => window.gc());
  const finalMemory = await page.metrics();
  console.log(`操作后 JSHeapSize: ${finalMemory.JSHeapUsedSize / 1024 / 1024} MB`);
  const diff = finalMemory.JSHeapUsedSize - initialMemory.JSHeapUsedSize;
  // 4. 設置閾值判斷（例如增長超過 1MB 視為泄漏）
  if (diff > 1024 * 1024) {
    console.error(`檢測到內存泄漏! 增長量: ${diff / 1024} KB`);
  } else {
    console.log('內存使用正常');
  }
  await browser.close();
})();

/**
 * 簡單的內存監(jiān)控上報函數(shù)
 * 建議在頁面空閑時或定期執(zhí)行
 */
function reportMemoryUsage() {
  // 僅 Chrome/Edge 支持
  if (performance && performance.memory) {
    const {
      jsHeapSizeLimit, // 內存大小限制
      totalJSHeapSize, // 可使用的內存
      usedJSHeapSize   // 實際使用的內存
    } = performance.memory;
    const usedMB = usedJSHeapSize / 1024 / 1024;
    console.log(`當前內存使用: ${usedMB.toFixed(2)} MB`);
    // 設置報警閾值，例如超過 50MB 或 占比過高時上報
    // 注意：這里的數(shù)值包含未回收的垃圾，僅作趨勢參考
    if (usedMB > 50) {
      // sendToAnalytics({ type: 'memory_warning', value: usedMB });
    }
  }
}
// 示例：每 10 秒采樣一次
setInterval(reportMemoryUsage, 10000);

module.exports = {
  // 初始訪問地址
  url: () => 'http://localhost:3000',
  // 交互操作：通常是觸發(fā)泄漏的操作
  action: async (page) => {
    await page.click('button#trigger-action');
    // 等待操作完成
    await new Promise(r => setTimeout(r, 500));
  },
  // 回退操作：試圖讓頁面回到初始狀態(tài)
  back: async (page) => {
    await page.click('button#reset-state');
    // 等待狀態(tài)恢復
    await new Promise(r => setTimeout(r, 500));
  },
  // 過濾規(guī)則：只關注特定的泄漏對象（可選）
  leakFilter: (node, snapshot, leakerRoots) => {
    // 例如只關注分離的 DOM 元素
    return node.type === 'native' && node.name.startsWith(' Detached'); 
  },
};

// 調試工具類：用于監(jiān)測組件或對象是否被回收
const registry = new FinalizationRegistry((heldValue) => {
  console.log(`? 對象 [${heldValue}] 已被垃圾回收`);
});
export function observeObject(obj, name) {
  registry.register(obj, name);
}
// 使用示例（例如在 Vue/React 組件中）
// mounted / useEffect:
// let heavyObject = { data: new Array(10000) };
// observeObject(heavyObject, 'MyHeavyData');
// heavyObject = null; // 解除引用，理論上應該觸發(fā)上面的回調