Frontend Health Checker

Skill này tự động hóa việc phát hiện lỗi frontend (Console Errors, Network Failures, Broken Links) sử dụng Puppeteer.

Khi nào sử dụng

• User muốn kiểm tra frontend health
• Phát hiện console errors/warnings
• Tìm broken links hoặc network failures
• Verify frontend stability sau khi deploy
• Audit các trang trước khi release

Cách sử dụng

1. Chuẩn bị

Đảm bảo puppeteer đã được cài đặt:

cd frontend
npm install puppeteer

Đảm bảo frontend server đang chạy:

• Development: http://localhost:3000
• Production: http://aicmr.local hoặc domain khác

2. Thực thi check

Tạo Node.js script sử dụng Puppeteer để:

1. Login (nếu cần auth)
2. Navigate đến các trang quan trọng
3. Capture console errors, warnings, network failures
4. Report kết quả chi tiết

3. Chạy script

node _health_check.js

Danh sách check mặc định

Public Pages (không cần auth)

• / - Trang chủ
• /login - Đăng nhập
• /register - Đăng ký
• /blog - Blog

Protected Pages (cần login)

• /dashboard - Dashboard chính
• /dashboard/stats - Thống kê
• /dashboard/posts - Quản lý bài viết
• /dashboard/users-manager - Quản lý users
• /dashboard/settings - Cài đặt
• /user/profile - Profile user

Template script cơ bản

const puppeteer = require('puppeteer');
const fs = require('fs');

const BASE_URL = process.env.BASE_URL || 'http://localhost:3000';
const RESULTS = [];

async function checkPage(page, url, name, options = {}) {
  const errors = [];
  const warnings = [];
  const networkErrors = [];

  // Console listeners
  page.on('console', msg => {
    const type = msg.type();
    const text = msg.text();

    if (type === 'error') {
      errors.push({ type: 'console', text });
    } else if (type === 'warning') {
      warnings.push({ type: 'console', text });
    }
  });

  // Network listener
  page.on('response', response => {
    const status = response.status();
    if (status >= 400) {
      networkErrors.push({
        url: response.url(),
        status: status,
        text: response.statusText()
      });
    }
  });

  try {
    await page.goto(url, { waitUntil: 'networkidle2', timeout: 30000 });

    // Check for broken links
    const links = await page.evaluate(() => {
      return Array.from(document.querySelectorAll('a'))
        .map(a => a.href)
        .filter(href => href && !href.startsWith('javascript:'));
    });

    RESULTS.push({
      page: name,
      url: url,
      status: 'success',
      errors,
      warnings,
      networkErrors,
      linksCount: links.length
    });

  } catch (error) {
    RESULTS.push({
      page: name,
      url: url,
      status: 'failed',
      error: error.message
    });
  }
}

(async () => {
  const browser = await puppeteer.launch({
    headless: "new",
    args: ['--no-sandbox', '--disable-setuid-sandbox', '--ignore-certificate-errors'],
    defaultViewport: { width: 1280, height: 800 }
  });

  const page = await browser.newPage();

  // Check public pages
  const publicPages = [
    ['/', 'Home'],
    ['/login', 'Login'],
    ['/register', 'Register'],
    ['/blog', 'Blog']
  ];

  for (const [path, name] of publicPages) {
    await checkPage(page, `${BASE_URL}${path}`, name);
  }

  // TODO: Add auth flow if needed
  // await page.goto(`${BASE_URL}/login`);
  // await page.type('input[name="email"]', 'test@example.com');
  // await page.type('input[name="password"]', 'password');
  // await page.click('button[type="submit"]');
  // await page.waitForNavigation();

  await browser.close();

  // Generate report
  console.log('\n=== FRONTEND HEALTH CHECK REPORT ===\n');
  console.log(`Total pages checked: ${RESULTS.length}`);

  const failedPages = RESULTS.filter(r => r.status === 'failed');
  const pagesWithErrors = RESULTS.filter(r => r.errors && r.errors.length > 0);
  const pagesWithNetworkErrors = RESULTS.filter(r => r.networkErrors && r.networkErrors.length > 0);

  console.log(`Failed pages: ${failedPages.length}`);
  console.log(`Pages with console errors: ${pagesWithErrors.length}`);
  console.log(`Pages with network errors: ${pagesWithNetworkErrors.length}\n`);

  // Detailed report
  RESULTS.forEach(result => {
    console.log(`\n--- ${result.page} (${result.url}) ---`);
    console.log(`Status: ${result.status}`);

    if (result.errors && result.errors.length > 0) {
      console.log(`Console Errors (${result.errors.length}):`);
      result.errors.forEach(e => console.log(`  - ${e.text}`));
    }

    if (result.networkErrors && result.networkErrors.length > 0) {
      console.log(`Network Errors (${result.networkErrors.length}):`);
      result.networkErrors.forEach(e => console.log(`  - ${e.url} [${e.status}]`));
    }
  });
})();

Báo cáo kết quả

Format báo cáo nên bao gồm:

1. Tổng quan

   • Tổng số trang đã check
   • Số trang bị lỗi
   • Số trang có console errors
   • Số trang có network errors

2. Chi tiết từng trang

   • Tên trang + URL
   • Status (success/failed)
   • Console errors (nếu có)
   • Network errors (nếu có)
   • Broken links (nếu có)

3. Đề xuất fix

   • Gợi ý giải pháp cho các lỗi phổ biến
   • 404 API calls → Kiểm tra endpoint
   • React hydration errors → Kiểm tra server-side rendering
   • Missing assets → Kiểm tra file paths

Best Practices

1. Luôn chạy headless mode cho CI/CD
2. Set timeout phù hợp cho mỗi page load
3. Capture screenshots khi có lỗi để debug
4. Save results ra file JSON để history tracking
5. Integrate với CI/CD để auto-check trước khi deploy

Troubleshooting

Puppeteer không install được

# Sử dụng puppeteer-core nếu gặp vấn đề với Chrome
npm install puppeteer-core
# Hoặc cài đặt Chrome riêng

Timeout errors

• Tăng timeout trong page.goto()
• Kiểm tra network speed
• Disable unnecessary extensions

Auth không hoạt động

• Kiểm tra selectors cho login form
• Thêm delay sau khi submit form
• Verify token/cookie được set đúng