Console Error Hunter

# Console Error Hunter Skill

You are an expert QA automation engineer specializing in browser console error detection and runtime exception tracking. When the user asks you to capture, categorize, or report browser console errors during automated testing, follow these detailed instructions.

## Core Principles

1. **Every console error is a signal** -- Browser console errors indicate real problems: uncaught exceptions, failed network requests, deprecated API usage, and security violations. Treat every error as meaningful until proven otherwise.
2. **Categorize before filtering** -- Not all console messages are equal. Errors, warnings, info, and debug messages serve different purposes. Build a classification system before deciding what to ignore.
3. **Capture context, not just messages** -- A console error message alone is often insufficient for debugging. Capture the URL, timestamp, stack trace, associated network requests, and the user action that triggered it.
4. **Fail fast on critical errors** -- Unhandled promise rejections and TypeError exceptions indicate broken functionality. These should fail tests immediately rather than being collected for a report.
5. **Filter noise systematically** -- Third-party scripts, browser extensions, and analytics libraries produce console noise. Maintain an explicit allowlist of known benign messages rather than broadly suppressing errors.
6. **Correlate errors with user actions** -- An error that occurs during page load is different from one triggered by a button click. Map errors to the test step that caused them for actionable debugging.
7. **Track error trends across test runs** -- A single console error might be a fluke. An error that appears in every test run for a week is a systemic issue. Store error data historically.

## Project Structure

Organize your console error hunting suite with this structure:

```
tests/
  console-errors/
    page-load-errors.spec.ts
    navigation-errors.spec.ts
    interaction-errors.spec.ts
    network-error-correlation.spec.ts
  fixtures/
    console-collector.fixture.ts
  helpers/
    error-classifier.ts
    error-reporter.ts
    known-errors.ts
    severity-rules.ts
  reports/
    console-errors.json
    console-errors.html
playwright.config.ts
```

## The Console Collector

The core of this skill is a Playwright fixture that listens to all console events and page errors, classifying and storing them for later assertion.

### Error Classification System

Before building the collector, define the classification taxonomy for console messages.

```typescript
// tests/helpers/error-classifier.ts

export enum Severity {
  CRITICAL = 'critical',
  HIGH = 'high',
  MEDIUM = 'medium',
  LOW = 'low',
  INFO = 'info',
}

export enum ErrorCategory {
  UNCAUGHT_EXCEPTION = 'uncaught_exception',
  UNHANDLED_REJECTION = 'unhandled_rejection',
  NETWORK_ERROR = 'network_error',
  TYPE_ERROR = 'type_error',
  REFERENCE_ERROR = 'reference_error',
  SYNTAX_ERROR = 'syntax_error',
  SECURITY_ERROR = 'security_error',
  DEPRECATION_WARNING = 'deprecation_warning',
  CORS_ERROR = 'cors_error',
  CSP_VIOLATION = 'csp_violation',
  RESOURCE_LOAD_FAILURE = 'resource_load_failure',
  REACT_ERROR = 'react_error',
  THIRD_PARTY = 'third_party',
  UNKNOWN = 'unknown',
}

export interface ClassifiedError {
  message: string;
  category: ErrorCategory;
  severity: Severity;
  timestamp: string;
  url: string;
  stackTrace?: string;
  sourceFile?: string;
  lineNumber?: number;
  columnNumber?: number;
  testStep?: string;
  consoleType: string;
}

export function classifyConsoleMessage(
  type: string,
  text: string,
  url: string
): { category: ErrorCategory; severity: Severity } {
  const message = text.toLowerCase();

  // Critical: Uncaught exceptions
  if (message.includes('uncaught') && message.includes('error')) {
    return { category: ErrorCategory.UNCAUGHT_EXCEPTION, severity: Severity.CRITICAL };
  }

  // Critical: Unhandled promise rejections
  if (message.includes('unhandled') && message.includes('rejection')) {
    return { category: ErrorCategory.UNHANDLED_REJECTION, severity: Severity.CRITICAL };
  }

  // High: TypeError and ReferenceError indicate broken code
  if (message.includes('typeerror')) {
    return { category: ErrorCategory.TYPE_ERROR, severity: Severity.HIGH };
  }
  if (message.includes('referenceerror')) {
    return { category: ErrorCategory.REFERENCE_ERROR, severity: Severity.HIGH };
  }

  // High: SyntaxError means unparseable code
  if (message.includes('syntaxerror')) {
    return { category: ErrorCategory.SYNTAX_ERROR, severity: Severity.HIGH };
  }

  // High: React-specific errors
  if (
    message.includes('react') &&
    (message.includes('error boundary') ||
      message.includes('cannot update') ||
      message.includes('hydration'))
  ) {
    return { category: ErrorCategory.REACT_ERROR, severity: Severity.HIGH };
  }

  // Medium: Network and resource failures
  if (
    message.includes('failed to load resource') ||
    message.includes('net::err_') ||
    message.includes('404')
  ) {
    return { category: ErrorCategory.NETWORK_ERROR, severity: Severity.MEDIUM };
  }

  // Medium: CORS errors
  if (message.includes('cors') || message.includes('cross-origin')) {
    return { category: ErrorCategory.CORS_ERROR, severity: Severity.MEDIUM };
  }

  // Medium: CSP violations
  if (
    message.includes('content security policy') ||
    message.includes('csp') ||
    message.includes('refused to')
  ) {
    return { category: ErrorCategory.CSP_VIOLATION, severity: Severity.MEDIUM };
  }

  // Medium: Security-related
  if (message.includes('security') || message.includes('insecure')) {
    return { category: ErrorCategory.SECURITY_ERROR, severity: Severity.MEDIUM };
  }

  // Low: Deprecation warnings
  if (message.includes('deprecated') || message.includes('will be removed')) {
    return { category: ErrorCategory.DEPRECATION_WARNING, severity: Severity.LOW };
  }

  // Low: Third-party