logging

name	logging
description	Structured logging, OpenTelemetry integration, error boundaries. Use when adding logging, tracing, error handling, or observability. Triggers: "logging", "log", "trace", "error boundary", "telemetry".
category	web-ui

Skill: logging

Commands

# Find console.log usage (should be console.error/warn in production)
grep -r "console.log" src/ examples/ --include='*.js'

# Check error handlers present
grep -rE "window\.onerror|onunhandledrejection" src/ examples/ --include='*.js'

Error Boundary

window.addEventListener('error', (e) => {
  console.error('[App]', e.error || e.message);
});
window.addEventListener('unhandledrejection', (e) => {
  console.error('[App] Unhandled promise rejection', e.reason);
});

Structured Logging

// Use structured objects, not string concatenation
console.error('[Module]', { action: 'fetch', error: err.message });

// Not:
console.log('Error: ' + err);

Rules

• Global error boundary on every page
• All errors logged with context (module, action, error)
• No console.log in production code (use console.error/warn)
• Sensitive data never logged