114 lines
3.1 KiB
Markdown
114 lines
3.1 KiB
Markdown
# Phase 2.5: Pre-flight Health Check
|
|
|
|
**Purpose**: Validate app loads correctly before running full test suite - catches configuration errors early
|
|
|
|
## Steps
|
|
|
|
### 1. Launch browser and attempt to load app
|
|
|
|
```typescript
|
|
const browser = await chromium.launch();
|
|
const page = await browser.newPage();
|
|
|
|
try {
|
|
const response = await page.goto(baseURL, { timeout: 30000 });
|
|
|
|
if (!response || !response.ok()) {
|
|
throw new Error(`App returned ${response?.status()}`);
|
|
}
|
|
} catch (error) {
|
|
// Analyze error and provide guidance
|
|
}
|
|
```
|
|
|
|
### 2. Monitor console for critical errors
|
|
|
|
- Listen for console errors during page load
|
|
- Collect all error messages for pattern analysis
|
|
- Wait 2-3 seconds to let errors surface
|
|
|
|
### 3. Analyze errors against known patterns
|
|
|
|
Load `data/error-patterns.yaml` error database and match against known patterns:
|
|
|
|
**Example patterns detected**:
|
|
- Tailwind v4 syntax mismatch: "Cannot apply unknown utility class"
|
|
- PostCSS plugin error: "Plugin tailwindcss not found"
|
|
- Missing dependencies: "Module not found"
|
|
|
|
### 4. Provide actionable diagnostics
|
|
|
|
```
|
|
❌ Pre-flight check failed: Critical errors detected
|
|
|
|
Issue: Tailwind CSS v4 syntax mismatch
|
|
Root cause: CSS file uses @tailwind directives but v4 requires @import
|
|
|
|
Fix:
|
|
1. Update src/index.css (or globals.css):
|
|
Change from: @tailwind base; @tailwind components; @tailwind utilities;
|
|
Change to: @import "tailwindcss";
|
|
|
|
2. Update postcss.config.js:
|
|
Change from: plugins: { tailwindcss: {} }
|
|
Change to: plugins: { '@tailwindcss/postcss': {} }
|
|
|
|
3. Restart dev server: npm run dev
|
|
|
|
Documentation: https://tailwindcss.com/docs/upgrade-guide
|
|
```
|
|
|
|
### 5. Auto-fix if possible, otherwise halt with guidance
|
|
|
|
- For known issues with clear fixes, offer to fix automatically
|
|
- For ambiguous issues, halt and require user intervention
|
|
- Prevent running 10+ tests that will all fail due to one config issue
|
|
|
|
## Error Pattern Analysis
|
|
|
|
```typescript
|
|
function analyzeErrors(consoleErrors) {
|
|
const errorPatterns = parseYAML('data/error-patterns.yaml');
|
|
const issues = [];
|
|
|
|
for (const error of consoleErrors) {
|
|
for (const [name, pattern] of Object.entries(errorPatterns.css_errors)) {
|
|
if (pattern.pattern.test(error) ||
|
|
pattern.alternative_patterns?.some(alt => alt.test(error))) {
|
|
issues.push({
|
|
name,
|
|
severity: pattern.severity,
|
|
diagnosis: pattern.diagnosis,
|
|
recovery_steps: pattern.recovery_steps,
|
|
documentation: pattern.documentation,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
critical: issues.filter(i => i.severity === 'critical'),
|
|
allIssues: issues,
|
|
};
|
|
}
|
|
```
|
|
|
|
## Benefits
|
|
|
|
- **Fast feedback**: 2-3 seconds vs 30+ seconds for full test suite
|
|
- **Clear guidance**: Specific fix steps, not generic "tests failed"
|
|
- **Prevents cascade failures**: One config error won't fail all 10 tests
|
|
- **Educational**: Explains what went wrong and why
|
|
|
|
## Output
|
|
|
|
Health check passed, or detailed error diagnostics with fix steps
|
|
|
|
## Performance
|
|
|
|
~2-5 seconds
|
|
|
|
## Transition
|
|
|
|
If health check passes, proceed to Phase 3 (Test Generation). If fails, provide fixes and halt.
|