Console Errors vs Network Errors vs UI Issues

Rihario categorizes issues into three types: console errors (JavaScript problems), network errors (API/request failures), and UI issues (visual/layout problems). Understanding the difference helps you prioritize fixes and know where to look for solutions.

Console Errors

What They Are

Console errors are JavaScript errors logged to the browser console:

• JavaScript exceptions
• Type errors, reference errors, etc.
• Runtime errors in your code
• Third-party library errors

Common Examples

• Cannot read property 'value' of null
• Uncaught TypeError: ... is not a function
• Failed to load resource
• Unhandled promise rejection

What They Indicate

Console errors usually mean:

• Bug in your code - Something broke in JavaScript
• Missing dependency - Library or resource failed to load
• Runtime error - Code executed but hit an error

Network Errors

What They Are

Network errors are failed HTTP requests:

• API requests that failed
• 404 Not Found errors
• 500 Server errors
• Timeout errors
• CORS errors

Common Examples

• 404 Not Found - Resource doesn't exist
• 500 Internal Server Error - Server error
• Network timeout - Request took too long
• CORS policy blocked - Cross-origin request blocked

What They Indicate

Network errors usually mean:

• Backend issue - API or server problem
• Missing resource - File or endpoint doesn't exist
• Infrastructure problem - Server down or slow
• Configuration issue - CORS or routing misconfigured

UI Issues

What They Are

UI issues are visual or layout problems:

• Broken layouts
• Overlapping elements
• Missing styles
• Visual regressions
• Responsive design issues

Common Examples

• Elements overlapping when they shouldn't
• Content cut off or overflowing
• Buttons not visible or clickable
• Forms with broken validation styling
• Text unreadable (low contrast)

What They Indicate

UI issues usually mean:

• CSS problem - Styles broken or missing
• Layout bug - CSS layout issue
• Responsive issue - Doesn't work on certain screen sizes
• Visual regression - Design changed unintentionally

Comparison Table

How to Fix Each Type

Fixing Console Errors

1. Open browser DevTools console
2. Reproduce the error
3. Read the error message
4. Check the stack trace
5. Fix the JavaScript code
6. Test the fix

Fixing Network Errors

1. Open browser DevTools Network tab
2. Find the failed request
3. Check response status and body
4. Fix the backend/API
5. Check server logs
6. Test the fix

Fixing UI Issues

1. Review the screenshot
2. Inspect the element in DevTools
3. Check CSS styles
4. Fix layout/CSS
5. Test on different viewports
6. Verify the fix

Priority

Generally, prioritize fixes in this order:

1. Console errors - Break functionality, need immediate fix
2. Network errors - Break functionality, need immediate fix
3. UI issues - Break UX, but app still works

However, prioritize based on impact:

• High-impact UI issues - Might be more urgent than low-impact console errors
• Critical flows - Errors in checkout more urgent than errors in footer
• User-facing - UI issues visible to users might need quick fixes

Next Steps

• Generate fix prompts from errors
• See how evidence is collected
• Understand test results