Skip to content

Commit 6ea8914

Browse files
sayak-sarkarsayak-sarkar
committed
fix(production): revert problematic regex escaping that was causing blank pages
- Reverts commit 49ee28f which added overly aggressive regex escaping - The regex escaping in gtmetrix-optimizer.cjs was breaking JavaScript parsing
1 parent 49ee28f commit 6ea8914

12 files changed

+2047
-9
lines changed

‎frontend/docs/build-validation-system.md‎

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
1+
# Build Validation & Testing System
2+
3+
## Overview
4+
5+
This comprehensive testing system ensures that builds are free from console errors, JavaScript syntax issues, and other critical problems that could cause production failures.
6+
7+
## Features
8+
9+
### 🔍 **Static Build Validation**
10+
- JavaScript syntax validation
11+
- CSS integrity checks
12+
- HTML structure validation
13+
- Asset integrity verification
14+
- CSP (Content Security Policy) validation
15+
16+
### 🌐 **Browser Console Error Checking**
17+
- Real browser testing using Puppeteer
18+
- Console error/warning detection
19+
- CSP violation monitoring
20+
- Network error tracking
21+
- Performance issue detection
22+
23+
### ⚡ **Performance Validation**
24+
- DOM size optimization checks
25+
- Bundle size analysis
26+
- Resource loading validation
27+
- Critical rendering path analysis
28+
29+
### 🛡️ **Security Checks**
30+
- CSP policy validation
31+
- Inline script/style nonce verification
32+
- Security header validation
33+
34+
## Scripts & Commands
35+
36+
### Main Test Commands
37+
38+
```bash
39+
# Run complete build validation (recommended)
40+
npm run test
41+
42+
# Quick validation after build
43+
npm run test:quick
44+
45+
# Comprehensive testing including browser checks
46+
npm run test:comprehensive
47+
48+
# Browser-only console error checking
49+
npm run test:browser
50+
51+
# Build validation only (no browser)
52+
npm run test:validate
53+
54+
# CI-friendly testing (skips browser tests)
55+
npm run test:ci
56+
```
57+
58+
### Build Commands with Validation
59+
60+
```bash
61+
# Standard build with validation
62+
npm run build
63+
64+
# Fast build with basic validation
65+
npm run build:fast
66+
67+
# Safe build with comprehensive validation
68+
npm run build:safe
69+
```
70+
71+
## Script Details
72+
73+
### 1. `build-validator.cjs`
74+
**Static build validation that checks:**
75+
- ✅ JavaScript syntax and common error patterns
76+
- ✅ CSS structure and validity
77+
- ✅ HTML document structure
78+
- ✅ Asset file integrity
79+
- ✅ CSP implementation
80+
- ✅ File reference validation
81+
82+
**Usage:**
83+
```bash
84+
node scripts/build-validator.cjs
85+
```
86+
87+
### 2. `browser-console-checker.cjs`
88+
**Browser-based validation using Puppeteer:**
89+
- 🌐 Loads pages in headless browser
90+
- 🔍 Captures all console messages
91+
- ❌ Detects JavaScript errors
92+
- ⚠️ Monitors warnings and CSP violations
93+
- 📊 Performance metrics collection
94+
95+
**Usage:**
96+
```bash
97+
# Check localhost server
98+
node scripts/browser-console-checker.cjs http://localhost:4173
99+
100+
# Auto-detects preview server
101+
npm run preview & npm run test:browser
102+
```
103+
104+
### 3. `test-runner.cjs`
105+
**Comprehensive test orchestrator:**
106+
- 🔄 Runs all validation checks
107+
- 🚀 Starts preview server automatically
108+
- 📊 Generates detailed reports
109+
- 🧹 Handles cleanup automatically
110+
111+
**Usage:**
112+
```bash
113+
# Full test suite
114+
node scripts/test-runner.cjs
115+
116+
# With options
117+
node scripts/test-runner.cjs --skip-browser --port 3000
118+
```
119+
120+
### 4. `post-build-validation.cjs`
121+
**Quick post-build checks:**
122+
- ⚡ Fast validation immediately after build
123+
- 🔍 Critical error detection
124+
- 📁 File existence verification
125+
- 🚫 Build failure prevention
126+
127+
**Usage:**
128+
```bash
129+
node scripts/post-build-validation.cjs
130+
```
131+
132+
## Integration with Build Process
133+
134+
The validation system is integrated into the build pipeline:
135+
136+
1. **Build Stage**: Vite builds the application
137+
2. **Optimization Stage**: Images, CSS, JavaScript optimization
138+
3. **Validation Stage**: Post-build validation runs automatically
139+
4. **Deployment Stage**: Only proceeds if validation passes
140+
141+
## Error Detection
142+
143+
### JavaScript Errors Detected
144+
- ❌ Syntax errors (invalid regex patterns, unclosed brackets)
145+
- ❌ Runtime errors (undefined references, type errors)
146+
- ❌ Import/export issues
147+
- ❌ Critical console errors
148+
149+
### CSS Issues Detected
150+
- ❌ Unclosed braces or invalid syntax
151+
- ❌ Missing properties or invalid values
152+
- ❌ Broken references
153+
154+
### Browser Issues Detected
155+
- ❌ Console errors and exceptions
156+
- ❌ Network request failures
157+
- ❌ CSP violations
158+
- ⚠️ Performance warnings
159+
- ⚠️ Accessibility issues
160+
161+
## Reports & Output
162+
163+
### Validation Report Example
164+
```
165+
🔍 BUILD VALIDATION REPORT
166+
============================================================
167+
📊 Overall Score: 95% ✅ PASS
168+
❌ Errors: 0
169+
⚠️ Warnings: 2
170+
171+
📋 Validation Results:
172+
✅ PASS JS VALIDATION
173+
✅ PASS CSS VALIDATION
174+
✅ PASS HTML VALIDATION
175+
✅ PASS ASSET INTEGRITY
176+
✅ PASS BROWSER CONSOLE
177+
✅ PASS CSP VALIDATION
178+
179+
💡 RECOMMENDATIONS:
180+
🎉 Excellent! Your build passes all quality checks
181+
============================================================
182+
```
183+
184+
### Browser Console Report Example
185+
```
186+
🌐 BROWSER CONSOLE CHECK REPORT
187+
============================================================
188+
❌ Console Errors: 0
189+
⚠️ Console Warnings: 1
190+
🔒 CSP Violations: 0
191+
🌐 Network Errors: 0
192+
⚡ Performance Warnings: 0
193+
============================================================
194+
```
195+
196+
## Configuration Options
197+
198+
### Environment Variables
199+
```bash
200+
# Skip browser tests in CI
201+
export SKIP_BROWSER_TESTS=true
202+
203+
# Custom server port
204+
export TEST_SERVER_PORT=3000
205+
206+
# Timeout for tests
207+
export TEST_TIMEOUT=60000
208+
```
209+
210+
### Command Line Options
211+
```bash
212+
# Skip specific test types
213+
npm run test:comprehensive -- --skip-browser --skip-performance
214+
215+
# Custom port
216+
npm run test:comprehensive -- --port 3000
217+
218+
# Custom timeout
219+
npm run test:comprehensive -- --timeout 30000
220+
```
221+
222+
## CI/CD Integration
223+
224+
### GitHub Actions Example
225+
```yaml
226+
- name: Build and Test
227+
run: |
228+
npm ci
229+
npm run build
230+
npm run test:ci
231+
```
232+
233+
### Pre-deployment Validation
234+
```bash
235+
# Recommended pre-deployment check
236+
npm run build:safe && npm run test:comprehensive
237+
```
238+
239+
## Troubleshooting
240+
241+
### Common Issues
242+
243+
**1. "Puppeteer not found"**
244+
```bash
245+
# Install Puppeteer
246+
npm install puppeteer --save-dev
247+
```
248+
249+
**2. "Port already in use"**
250+
```bash
251+
# Use different port
252+
npm run test:comprehensive -- --port 3001
253+
```
254+
255+
**3. "Build validation failed"**
256+
- Check console output for specific errors
257+
- Run `npm run test:validate` for detailed error information
258+
- Fix reported issues and rebuild
259+
260+
**4. "Browser tests timeout"**
261+
```bash
262+
# Increase timeout
263+
npm run test:comprehensive -- --timeout 120000
264+
```
265+
266+
### Debug Mode
267+
```bash
268+
# Enable verbose logging
269+
DEBUG=true npm run test:comprehensive
270+
```
271+
272+
## Best Practices
273+
274+
### 1. **Run Tests Regularly**
275+
- Include tests in pre-commit hooks
276+
- Run comprehensive tests before deployment
277+
- Use quick validation during development
278+
279+
### 2. **Fix Issues Immediately**
280+
- Don't ignore console errors or warnings
281+
- Address CSP violations promptly
282+
- Resolve performance warnings
283+
284+
### 3. **Monitor Build Quality**
285+
- Aim for 95%+ validation scores
286+
- Keep error count at zero
287+
- Minimize warnings
288+
289+
### 4. **CI/CD Integration**
290+
- Always run tests in CI pipeline
291+
- Block deployments on test failures
292+
- Use appropriate test commands for environment
293+
294+
## Future Enhancements
295+
296+
- 🔮 Visual regression testing
297+
- 🔮 A11y (accessibility) automated testing
298+
- 🔮 SEO validation checks
299+
- 🔮 Performance budget enforcement
300+
- 🔮 Bundle size regression detection
301+
302+
## Support
303+
304+
For issues or questions about the testing system:
305+
1. Check this documentation
306+
2. Review console output for specific errors
307+
3. Run individual test components to isolate issues
308+
4. Check GitHub issues for known problems

‎frontend/package.json‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,9 @@
2424
"scripts": {
2525
"dev": "vite",
2626
"start": "vite",
27-
"build": "vite build && cp -r ../docs/* dist/docs/ && cp public/maintenance.html dist/maintenance.html && node scripts/optimize-images.cjs && node scripts/optimize-css.cjs && node scripts/optimize-accessibility.cjs && node scripts/gtmetrix-optimizer.cjs && node scripts/advanced-post-build-optimize.cjs && node scripts/bundle-optimizer.cjs && node ../scripts/fix-css-compatibility.js",
28-
"build:fast": "vite build && cp -r ../docs/* dist/docs/ && cp public/maintenance.html dist/maintenance.html && node scripts/post-build-optimize.cjs",
27+
"build": "vite build && cp -r ../docs/* dist/docs/ && cp public/maintenance.html dist/maintenance.html && node scripts/optimize-images.cjs && node scripts/optimize-css.cjs && node scripts/optimize-accessibility.cjs && node scripts/gtmetrix-optimizer.cjs && node scripts/advanced-post-build-optimize.cjs && node scripts/bundle-optimizer.cjs && node ../scripts/fix-css-compatibility.js && node scripts/post-build-validation.cjs",
28+
"build:fast": "vite build && cp -r ../docs/* dist/docs/ && cp public/maintenance.html dist/maintenance.html && node scripts/post-build-optimize.cjs && node scripts/post-build-validation.cjs",
29+
"build:safe": "npm run build && npm run test:validate",
2930
"build:analyze": "ANALYZE=true vite build",
3031
"clean": "rm -rf dist .vite",
3132
"preview": "vite preview",
@@ -61,7 +62,13 @@
6162
"format:all": "npm run format && npm run format:md && npm run lint:md:fix",
6263
"format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,css}\"",
6364
"type-check": "tsc --noEmit",
64-
"test": "echo \"No tests specified. Please add tests to improve code coverage.\" && exit 0",
65+
"test": "npm run test:build",
66+
"test:build": "npm run build && npm run test:validate",
67+
"test:validate": "node scripts/build-validator.cjs",
68+
"test:browser": "node scripts/browser-console-checker.cjs",
69+
"test:comprehensive": "node scripts/test-runner.cjs",
70+
"test:quick": "node scripts/post-build-validation.cjs",
71+
"test:ci": "npm run test:comprehensive --skip-browser",
6572
"perf:optimize": "node scripts/optimize-images.cjs && node scripts/optimize-css.cjs",
6673
"perf:gtmetrix": "node scripts/gtmetrix-optimizer.cjs && node scripts/bundle-optimizer.cjs && node scripts/gtmetrix-validator.cjs",
6774
"perf:gtmetrix:enhanced": "node scripts/enhanced-gtmetrix-optimizer.cjs && node scripts/gtmetrix-validator.cjs",
@@ -102,6 +109,7 @@
102109
"markdownlint-cli2": "^0.18.1",
103110
"postcss": "^8.4.31",
104111
"prettier": "^3.5.3",
112+
"puppeteer": "^23.9.0",
105113
"tailwindcss": "^3.3.0",
106114
"terser": "^5.43.1",
107115
"vite": "^6.3.5"

0 commit comments

Comments
 (0)