Initial commit: Clean DSS implementation
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm
Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)
Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability
Migration completed: $(date)
🤖 Clean migration with full functionality preserved
This commit is contained in:
158
.dss/GET_BROWSER_LOGS.sh
Executable file
158
.dss/GET_BROWSER_LOGS.sh
Executable file
@@ -0,0 +1,158 @@
|
||||
#!/bin/bash
|
||||
#
|
||||
# GET_BROWSER_LOGS.sh - Hook to capture browser logs from DSS dashboard
|
||||
#
|
||||
# Usage:
|
||||
# ./GET_BROWSER_LOGS.sh
|
||||
#
|
||||
# This script provides instructions for capturing browser logs when debugging DSS
|
||||
#
|
||||
|
||||
cat << 'EOF'
|
||||
╔══════════════════════════════════════════════════════════════╗
|
||||
║ DSS Browser Log Capture - Quick Hook ║
|
||||
╚══════════════════════════════════════════════════════════════╝
|
||||
|
||||
STEP 1: Open DSS Dashboard
|
||||
→ https://dss.overbits.luz.uy/
|
||||
→ Or: http://localhost:3456/admin-ui/index.html
|
||||
|
||||
STEP 2: Open Browser DevTools
|
||||
→ Chrome/Edge: F12 or Cmd+Option+I (Mac) or Ctrl+Shift+I (Windows)
|
||||
→ Firefox: F12 or Cmd+Option+K (Mac) or Ctrl+Shift+K (Windows)
|
||||
→ Go to "Console" tab
|
||||
|
||||
STEP 3: Run Commands in Console
|
||||
|
||||
📊 Get System Diagnostic:
|
||||
──────────────────────────
|
||||
window.__DSS_BROWSER_LOGS.diagnostic()
|
||||
|
||||
❌ Get All Errors:
|
||||
──────────────────────────
|
||||
window.__DSS_BROWSER_LOGS.errors()
|
||||
|
||||
🌐 Get Network Activity:
|
||||
──────────────────────────
|
||||
window.__DSS_BROWSER_LOGS.network()
|
||||
|
||||
📋 Get All Logs:
|
||||
──────────────────────────
|
||||
window.__DSS_BROWSER_LOGS.all()
|
||||
|
||||
💾 Export Everything as JSON:
|
||||
──────────────────────────
|
||||
JSON.stringify(window.__DSS_BROWSER_LOGS.export(), null, 2)
|
||||
|
||||
📄 Download Logs to File:
|
||||
──────────────────────────
|
||||
const data = window.__DSS_BROWSER_LOGS.export();
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'dss-browser-logs-' + Date.now() + '.json';
|
||||
a.click();
|
||||
|
||||
STEP 4: Analyze Results
|
||||
|
||||
The diagnostic will show:
|
||||
✓ Session ID
|
||||
✓ Uptime
|
||||
✓ Total logs captured
|
||||
✓ Error count
|
||||
✓ Warning count
|
||||
✓ Network request count
|
||||
✓ Memory usage
|
||||
✓ Recent errors (last 5)
|
||||
✓ Recent network requests (last 5)
|
||||
|
||||
STEP 5: Advanced Filtering
|
||||
|
||||
Search for specific issues:
|
||||
──────────────────────────
|
||||
window.__DSS_BROWSER_LOGGER.getLogs({
|
||||
search: 'config', // Search term
|
||||
level: 'error', // Filter by level
|
||||
category: 'fetch', // Filter by category
|
||||
limit: 50 // Max results
|
||||
})
|
||||
|
||||
Get logs from time range:
|
||||
──────────────────────────
|
||||
const oneHourAgo = Date.now() - (60 * 60 * 1000);
|
||||
window.__DSS_BROWSER_LOGGER.getLogs({
|
||||
minTime: oneHourAgo,
|
||||
limit: 100
|
||||
})
|
||||
|
||||
TROUBLESHOOTING
|
||||
───────────────────────────────────────────────────────────────
|
||||
|
||||
If window.__DSS_BROWSER_LOGS is undefined:
|
||||
|
||||
1. Check browser-logger.js is loaded:
|
||||
→ Check Network tab for /admin-ui/js/core/browser-logger.js
|
||||
→ Should see 200 OK response
|
||||
|
||||
2. Manually load it:
|
||||
→ import('/admin-ui/js/core/browser-logger.js').then(() => {
|
||||
console.log('Logger loaded:', window.__DSS_BROWSER_LOGS);
|
||||
})
|
||||
|
||||
3. Check for JavaScript errors:
|
||||
→ Look for red errors in Console tab
|
||||
→ Fix any module loading issues
|
||||
|
||||
WHAT'S CAPTURED AUTOMATICALLY
|
||||
───────────────────────────────────────────────────────────────
|
||||
|
||||
✓ All console.log/warn/error/info/debug calls
|
||||
✓ Uncaught JavaScript errors
|
||||
✓ Unhandled promise rejections
|
||||
✓ Network requests (fetch API)
|
||||
✓ Performance metrics (page load time, etc.)
|
||||
✓ Memory usage warnings (if >80%)
|
||||
✓ Long tasks (>50ms execution time)
|
||||
|
||||
DATA STRUCTURE
|
||||
───────────────────────────────────────────────────────────────
|
||||
|
||||
Each log entry contains:
|
||||
{
|
||||
timestamp: 1733456789000, // Unix timestamp
|
||||
relativeTime: 1234, // Ms since session start
|
||||
level: 'log|warn|error|info', // Log level
|
||||
category: 'console|fetch|...', // Category
|
||||
message: 'Description', // Human-readable message
|
||||
data: { ... }, // Additional context
|
||||
url: 'https://...', // Page URL
|
||||
userAgent: 'Mozilla/...' // Browser info
|
||||
}
|
||||
|
||||
INTEGRATION STATUS
|
||||
───────────────────────────────────────────────────────────────
|
||||
|
||||
✅ browser-logger.js created
|
||||
⏳ Need to import in index.html or app.js
|
||||
⏳ Need to test in browser
|
||||
⏳ API endpoint not yet created (optional)
|
||||
|
||||
RELATED TOOLS
|
||||
───────────────────────────────────────────────────────────────
|
||||
|
||||
Server-side debugging:
|
||||
→ window.__DSS_DEBUG.printDiagnosis()
|
||||
→ See .dss/DSS_SELF_DEBUG_METHODOLOGY.md
|
||||
|
||||
Full documentation:
|
||||
→ .dss/BROWSER_LOG_CAPTURE_PROCEDURE.md
|
||||
→ .dss/DEBUG_QUICKSTART.md
|
||||
|
||||
EOF
|
||||
|
||||
echo ""
|
||||
echo "📖 Full documentation: .dss/BROWSER_LOG_CAPTURE_PROCEDURE.md"
|
||||
echo "🔧 Browser logger module: admin-ui/js/core/browser-logger.js"
|
||||
echo ""
|
||||
echo "Next step: Import browser-logger.js in admin-ui/index.html or app.js"
|
||||
Reference in New Issue
Block a user