Console Errors Test Page

This page intentionally triggers console errors and warnings on page load to test detection of JavaScript issues.

Console Messages Triggered:

• console.error() - Multiple error messages
• console.warn() - Warning messages
• console.log() - Info messages (typically not flagged as issues)

What's wrong?

• Multiple console.error() calls indicating JavaScript errors
• Console.warn() calls suggesting code quality issues
• Errors may indicate broken functionality
• Poor developer experience
• May affect user experience if errors are critical
• Makes debugging harder when real issues occur

Expected Detection:

Check: no-console-errors (automatic, detection not yet implemented)

Status: Future Issue

Detection logic would need to:

• Listen to browser console events using Playwright/Puppeteer page.on('console')
• Capture error and warning level messages
• Ignore info/log/debug messages (optional)
• Filter out expected errors (e.g., third-party scripts, known issues)
• Report pages with unexpected console errors

Common Sources of Console Errors:

• Failed API/AJAX requests
• Missing JavaScript dependencies
• Syntax errors in inline scripts
• Third-party script failures
• Browser compatibility issues
• CSP (Content Security Policy) violations
• Unhandled promise rejections
• Deprecated API usage

Playwright Detection Example:

// In Playwright/Puppeteer crawler
const consoleMessages: Array<{ type: string; text: string }> = [];

page.on('console', (msg) => {
  const type = msg.type();
  if (type === 'error' || type === 'warning') {
    consoleMessages.push({
      type: type,
      text: msg.text()
    });
  }
});

await page.goto(url);

if (consoleMessages.length > 0) {
  // Flag page as having console errors
  reportIssue({
    type: 'console_errors',
    count: consoleMessages.length,
    messages: consoleMessages.slice(0, 5) // First 5
  });
}

How to Fix:

• Open browser DevTools console (F12)
• Identify the source of each error
• Fix JavaScript code causing errors
• Handle errors gracefully with try-catch
• Add proper error boundaries in React
• Validate API responses before processing
• Test across different browsers
• Set up error monitoring (Sentry, LogRocket, etc.)

Production Best Practices:

• Remove console.log() statements in production (use build tools)
• Implement proper error logging/monitoring
• Use error boundaries to catch React errors
• Handle promise rejections
• Validate data before use
• Test with browser console open
• Monitor client-side errors in production