Ux Test Debugging

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

🧪 UX Test - Debugging Guide

Specific troubleshooting guide for the UX Test application

🚨 Quick Fixes for Common Issues

Angular 20 Compatibility Issues ✅ SOLVED

App Won't Start After Angular 20 Update

Symptoms:

provideProtractorTestingSupport import errors
fullTemplateTypeCheck TypeScript compilation errors
Nx cache ENOENT errors

🚀 Immediate Solution:

# 1. Clear Nx cache completely
cd /path/to/editor
rm -rf .nx/cache
nx reset
mkdir -p .nx/cache/terminalOutputs
chmod -R 755 .nx

# 2. Fix deprecated Angular 20 imports
# Edit apps/ux-test/src/app/app.config.ts
# Remove provideProtractorTestingSupport from imports:
# OLD: import { provideClientHydration, BrowserModule, provideProtractorTestingSupport } from '@angular/platform-browser';
# NEW: import { provideClientHydration, BrowserModule } from '@angular/platform-browser';

# 3. Remove deprecated TypeScript options from all tsconfig files:
# - apps/ux-test/tsconfig.app.json
# - apps/ux-test/tsconfig.json
# - apps/ux-test/tsconfig.prod.json
# - apps/ux-test/tsconfig.federation.json
# Remove: "fullTemplateTypeCheck": true/false

# 4. Start the app
nx serve ux-test --port=5300

# 5. Verify it's working
curl -s http://localhost:5300 | head -5

Expected Result:

App starts successfully on port 5300
HTML response contains <!DOCTYPE html>
No compilation errors
Angular application loads correctly

🛠️ UX Test Specific Issues

Port 5300 Already in Use

# Check what's using port 5300
lsof -i :5300

# Kill the process
kill -9 [PID]

# Or start on different port
nx serve ux-test --port=5301

Theme System Issues

Theme Not Loading

# Check theme runtime dependencies
grep -r "theme-runtime" apps/ux-test/src/

# Verify providers in app.config.ts
grep -A 10 "provideUnifiedThemeSystem" apps/ux-test/src/app/app.config.ts

# Check theme initialization
grep -A 5 "APP_INITIALIZER" apps/ux-test/src/app/app.config.ts

Database Theme Storage Errors

Error: Database connectivity test failed

# Check IndexedDB support
# In browser console:
# typeof indexedDB !== 'undefined'

# Force localStorage mode
# Add to localStorage: theme-system:use-local-storage = 'true'
localStorage.setItem('theme-system:use-local-storage', 'true');

Widget Testing Errors

Widget Components Not Loading

# Check widget imports
grep -r "@ux-framework" apps/ux-test/src/

# Verify widget dependencies are built
nx build ux-framework
nx build widgets
nx build shared-ui

# Check for circular dependencies
npx madge --circular apps/ux-test/src/

AI Integration Issues

# Check GoGrab-AI integration
grep -r "provideGograbAI" apps/ux-test/src/

# Verify AI service injection
grep -r "AIFactoryService" apps/ux-test/src/

# Check environment configuration
grep -A 10 "gograbAi" apps/ux-test/src/environments/

📊 Performance Debugging

Slow Loading Times

# Check bundle sizes
nx build ux-test --stats-json
npx webpack-bundle-analyzer dist/apps/ux-test/stats.json

# Monitor memory usage
# In browser DevTools > Performance tab

# Check for memory leaks
# Monitor heap size over time

High Memory Usage

# Check for subscription leaks
grep -r "\.subscribe" apps/ux-test/src/ | grep -v "unsubscribe"

# Verify OnDestroy implementations
grep -A 5 "OnDestroy" apps/ux-test/src/

# Check effect() cleanup
grep -A 3 "effect(" apps/ux-test/src/

🧪 Testing and Development

Component Testing Issues

# Run component tests
nx test ux-test

# Check test configuration
cat apps/ux-test/jest.config.ts

# Debug specific test
nx test ux-test --testNamePattern="ComponentName"

E2E Testing Problems

# Run E2E tests
nx e2e ux-test-e2e

# Check Cypress configuration
cat apps/ux-test-e2e/cypress.config.ts

# Debug E2E test
nx e2e ux-test-e2e --watch

🔍 Debug Mode and Logging

Enable Debug Mode

// In apps/ux-test/src/app/app.config.ts
// Add debug configuration to theme system
provideUnifiedThemeSystem({
  debug: true, // Enable debug logging
  defaultMode: 'light'
})

Console Debugging

// In browser console, check UX Test specific globals
console.log('Theme System:', window.themeSystem);
console.log('Current Theme:', window.themeSystem?.currentTheme);
console.log('Available Themes:', window.themeSystem?.availableThemes);

// Check UX Test app state
console.log('App Component:', document.querySelector('app-root'));
console.log('Router Outlet:', document.querySelector('router-outlet'));

// Monitor theme changes
window.themeSystem?.themeChanged$.subscribe(theme => 
  console.log('Theme changed:', theme)
);

🚨 Emergency Recovery Procedures

Complete UX Test Recovery

# 1. Stop all UX Test processes
pkill -f "ux-test"

# 2. Clear all caches
rm -rf .nx/cache
rm -rf apps/ux-test/dist
rm -rf node_modules/.cache

# 3. Reset Nx daemon
nx reset

# 4. Reinstall dependencies (if needed)
yarn install

# 5. Rebuild dependencies
nx build core-types
nx build core
nx build theme-runtime
nx build shared-ui
nx build ux-framework

# 6. Start UX Test
nx serve ux-test --port=5300

Database Reset

# Clear IndexedDB (in browser console)
indexedDB.deleteDatabase('widgets-db');
localStorage.clear();
sessionStorage.clear();

# Reload application
location.reload();

✅ Health Check Commands

Quick Status Check

# Check if UX Test is running
curl -I http://localhost:5300

# Check process status
ps aux | grep "ux-test"

# Check port availability
lsof -i :5300

Dependency Health Check

# Check if all dependencies are built
ls -la dist/libs/ | grep -E "(core|theme|shared|ux-framework)"

# Verify imports are working
node -e "
try {
  require('./@core.js');
  console.log('✅ Core library OK');
} catch(e) {
  console.log('❌ Core library issue:', e.message);
}
"

📝 Known Issues and Solutions

Angular 20 Migration Issues ✅ FIXED

Issue	Symptom	Solution
`provideProtractorTestingSupport`	Import error	Remove import from app.config.ts
`fullTemplateTypeCheck`	TypeScript error	Remove from all tsconfig files
Nx cache corruption	ENOENT errors	`rm -rf .nx/cache && nx reset`

Theme System Issues

Issue	Symptom	Solution
Theme not applying	White/unstyled page	Check provideUnifiedThemeSystem in config
IndexedDB errors	Database errors in console	Force localStorage mode
Theme initialization timeout	Slow loading	Reduce initialization timeout

Widget Integration Issues

Issue	Symptom	Solution
Components not found	Module not found errors	Build framework dependencies first
Circular dependencies	Import cycle warnings	Use madge to identify and resolve
AI service injection	NullInjectorError	Check provideGograbAI configuration

📞 Escalation Procedures

When to Escalate

Complete app failure after following recovery procedures
Data loss or corruption in theme storage
Performance degradation below 2-second load time
Security issues with widget testing environment
Unknown errors not covered in this guide

Information to Gather Before Escalation

# 1. System information
node --version
yarn --version
uname -a

# 2. App-specific logs
tail -50 .nx/daemon.log
console.log from browser DevTools

# 3. Configuration dump
cat apps/ux-test/src/app/app.config.ts
cat apps/ux-test/tsconfig.json

# 4. Recent changes
git log --oneline -10 apps/ux-test/
git status

🎯 Success Criteria

After resolving any issue, verify:

UX Test starts on port 5300 without errors
Main navigation loads correctly
Theme system is operational
Widget demos are accessible
No console errors in browser DevTools
Memory usage remains stable
All core functionality works as expected

This debugging guide is specific to UX Test app issues. For general app debugging, see the main Apps Debugging Guide.

Last Updated: Based on Angular 20 Migration Fix
Version: 1.0
Status: Production Ready