Humanized Console Errors
Use this prompt to build a custom error handling system that translates complex technical error messages into clear, actionable, and beginner-friendly explanations directly in the browser console.
Add a custom error handling system to my application that displays beginner-friendly error messages in the browser console.
REQUIREMENTS:
Create a global error handler that catches all errors
For each error, log TWO messages:
First: the original technical error (for debugging)
Second: a plain-English translation in a styled, easy-to-spot format
Error translation format:
🔍 ERROR EXPLAINED FOR HUMANS:
━━━━━━━━━━━━━━━━━━━━━━━━━━━
What went wrong: [Simple explanation]
Why it happened: [Likely cause]
How to fix it: [Step-by-step solution]
Where to look: [File and line number if available]
━━━━━━━━━━━━━━━━━━━━━━━━━━━
Style the human-friendly message with:
Large, bold text
Background color to stand out
Use console.log with %c styling
Make it impossible to miss
Common error translations to include:
"Cannot read property X of undefined" → "You're trying to use something that doesn't exist yet"
"X is not a function" → "You're trying to run something that isn't a runnable function"
"Missing dependency" → "You need to install a package"
"CORS error" → "The server is blocking your request for security reasons"
"404 Not Found" → "The URL you're trying to reach doesn't exist"
Network errors → "Can't connect to the internet or server"
Syntax errors → "There's a typo or grammar mistake in your code"
For each error type, provide:
What the error actually means in plain English
The most common reason this happens
Specific fix instructions (not vague)
Related file/component name if detectable
Also add a helper function I can manually call:
explainError(errorMessage) - that I can paste any error into for translation
IMPLEMENTATION NOTES:
Use window.onerror and window.addEventListener('unhandledrejection') for global catching
Parse error stack traces to extract file names and line numbers
Make the styled console output super visible (large font, bright colors)
Keep explanations under 3 sentences each
Focus on actionable fixes, not technical jargon
Given my application context [PASTE YOUR APP CODE/DESCRIPTION], implement this error translation system.