Error Handling Issues Demonstration

⚠️ Important Notice

This page contains intentional error handling issues for testing and educational purposes only. These examples demonstrate common error handling mistakes like poor 404 pages, unhelpful error messages, missing error pages, and inadequate crash handling. Always provide helpful error messages and proper error pages in production.

Error Handling Issues

The following examples demonstrate common error handling problems:

1. Poor 404 Error Pages 404

404 pages that don't help users:

<!-- VIOLATION: Poor 404 page -->
<h1>404</h1>
<p>Not Found</p>
<!-- No helpful message, no navigation, no search -->
      

404

Not Found

That's it. No help, no links, nothing.

404

Error

2. Unhelpful Error Messages Messages

Error messages that don't explain what went wrong:

<!-- VIOLATION: Unhelpful errors -->
<div class="error">Error</div>
<div class="error">Failed</div>
<div class="error">0x7F3A9B2C</div>
<!-- No explanation, no solution -->
      

Error

Failed

0x7F3A9B2C

3. Missing Error Pages Missing

No custom error pages, browser default shown:

HTTP/1.1 500 Internal Server Error
Content-Type: text/html

<!-- VIOLATION: Browser default error page -->
<!-- No custom 500 error page -->
<!-- Users see generic browser error -->
      

Browser default error page would appear here

No custom error handling

4. Technical Error Messages Exposed to Users Technical

Showing technical details to end users:

<!-- VIOLATION: Technical errors exposed -->
<div class="error">
  SQLSTATE[42S02]: Base table or view not found: 1146 
  Table 'production.users' doesn't exist
  at Database.php:45
  Stack trace:
    #0 UserService.php:123
    #1 Controller.php:45
</div>
      

Fatal Error:
SQLSTATE[42S02]: Base table or view not found: 1146
Table 'production.users' doesn't exist

Stack Trace:
#0 /var/www/html/Database.php(45): PDO->query()
#1 /var/www/html/UserService.php(123): Database->getUser()
#2 /var/www/html/Controller.php(45): UserService->load()
#3 {main}

5. No Error Recovery Options Recovery

Errors with no way to recover or continue:

<!-- VIOLATION: No recovery options -->
<div class="error">Connection failed.</div>
<!-- No retry button, no alternative action -->
<!-- User stuck, can't proceed -->
      

Error: Connection failed.

No retry button, no way to continue

6. Silent Failures Silent

Errors that fail silently with no feedback:

// VIOLATION: Silent failure
function saveData() {
  try {
    database.save(data);
  } catch (error) {
    // Error swallowed, user never knows
    console.error(error); // Only in console
  }
}
// User sees nothing, thinks it worked
      

7. Generic Error Messages Generic

All errors show the same generic message:

<!-- VIOLATION: Generic errors -->
<div class="error">Something went wrong.</div>
<!-- Same message for all error types -->
<!-- User doesn't know what to fix -->
      

Error: Something went wrong.

Same message for validation errors, network errors, server errors...

8. No Error Context or Details Context

Errors without context about what the user was doing:

<!-- VIOLATION: No context -->
<div class="error">Invalid input</div>
<!-- Which field? What was wrong? -->
      

Error: Invalid input

Which field? What's invalid? No details provided.

9. Errors That Crash the Entire Page Crash

Errors that cause complete page failure:

// VIOLATION: Uncaught error crashes page
function loadData() {
  const data = undefined;
  return data.items.map(x => x.value);
  // TypeError crashes entire page
  // No error boundary
}
      

10. No Error Logging or Tracking Logging

Errors not logged for debugging:

// VIOLATION: No error logging
try {
  processPayment();
} catch (error) {
  alert('Payment failed');
  // Error not logged
  // No way to debug production issues
}
      

11. Inconsistent Error Styling Styling

Errors displayed in different styles:

Error 1

Error 2

Error 3

Inconsistent styling makes errors hard to recognize

12. No Error Prevention Prevention

No validation or checks to prevent errors:

// VIOLATION: No error prevention
function divide(a, b) {
  return a / b; // No check for b === 0
}

function getItem(array, index) {
  return array[index]; // No check for index out of bounds
}
      

13. Errors Block All Functionality Blocking

One error prevents using the rest of the page:

<!-- VIOLATION: Error blocks everything -->
<div class="error">Failed to load user data</div>
<!-- Entire page disabled -->
<!-- Can't use other features -->
      

Error: Failed to load user data

Entire page is now unusable

14. No Error Codes or Reference Numbers Reference

Errors without reference numbers for support:

<!-- VIOLATION: No error reference -->
<div class="error">An error occurred.</div>
<!-- No error code for support to reference -->
<!-- Hard to track and debug -->
      

Error: An error occurred.

No error code - support can't help you

15. Errors Without Timestamps Timestamp

No indication of when the error occurred:

<!-- VIOLATION: No timestamp -->
<div class="error">Connection timeout</div>
<!-- When did this happen? -->
<!-- Can't correlate with logs -->
      

Error: Connection timeout

No timestamp - when did this happen?

Error Handling Best Practices

The following examples demonstrate proper error handling practices:

1. Helpful 404 Error Pages 404

<!-- Compliant: Helpful 404 page -->
<h1>404 - Page Not Found</h1>
<p>Sorry, we couldn't find the page you're looking for.</p>
<nav>
  <a href="/">Go Home</a>
  <a href="/sitemap">View Sitemap</a>
</nav>
<form>
  <input type="search" placeholder="Search...">
</form>
      

404

Page Not Found

Sorry, we couldn't find the page you're looking for.

Go Home View Sitemap

2. Clear, Actionable Error Messages Messages

<!-- Compliant: Clear error messages -->
<div class="error">
  <strong>Email is required</strong>
  <p>Please enter your email address to continue.</p>
</div>
      

Email is required

Please enter your email address to continue.

3. Custom Error Pages for All Status Codes Custom

<!-- Compliant: Custom error pages -->
<!-- 400.html - Bad Request -->
<!-- 401.html - Unauthorized -->
<!-- 403.html - Forbidden -->
<!-- 404.html - Not Found -->
<!-- 500.html - Internal Server Error -->
<!-- 503.html - Service Unavailable -->
<!-- All have helpful messages and navigation -->
      

4. User-Friendly Error Messages User-Friendly

<!-- Compliant: User-friendly errors -->
<div class="error">
  <strong>We're having trouble connecting</strong>
  <p>Please check your internet connection and try again.</p>
  <button onclick="retry()">Try Again</button>
</div>
<!-- Technical details logged server-side only -->
      

We're having trouble connecting

Please check your internet connection and try again.

5. Error Recovery Options Recovery

<!-- Compliant: Recovery options -->
<div class="error">
  <strong>Connection failed</strong>
  <button onclick="retry()">Retry</button>
  <button onclick="useOfflineMode()">Continue Offline</button>
  <a href="/help">Get Help</a>
</div>
      

Connection failed

Get Help

6. Visible Error Feedback Feedback

// Compliant: Visible error feedback
function saveData() {
  try {
    database.save(data);
    showSuccess('Data saved successfully');
  } catch (error) {
    showError('Failed to save data. Please try again.');
    logError(error); // Logged server-side
  }
}
// User always sees feedback
      

Failed to save data

Please try again. If the problem persists, contact support.

7. Specific Error Messages Specific

<!-- Compliant: Specific errors -->
<div class="error validation">Email format is invalid</div>
<div class="error network">Network connection failed</div>
<div class="error server">Server is temporarily unavailable</div>
<!-- Each error type has specific message -->
      

Validation Error: Email format is invalid

Network Error: Connection failed. Please check your internet.

Server Error: Service temporarily unavailable. Please try again in a few minutes.

8. Error Context and Details Context

<!-- Compliant: Error with context -->
<div class="error">
  <strong>Invalid input in Email field</strong>
  <p>Please enter a valid email address (e.g., name@example.com)</p>
  <p>Current value: "invalid-email"</p>
</div>
      

Invalid input in Email field

Please enter a valid email address (e.g., name@example.com)

Current value: "invalid-email"

9. Error Boundaries Boundaries

// Compliant: Error boundaries
class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    logError(error, errorInfo);
    this.setState({ hasError: true });
  }
  
  render() {
    if (this.state.hasError) {
      return ; // Isolated error, page still works
    }
    return this.props.children;
  }
}
// Errors contained, don't crash entire page
      

Component Error

This component failed to load, but the rest of the page works.

10. Comprehensive Error Logging Logging

// Compliant: Error logging
try {
  processPayment();
} catch (error) {
  // Log to error tracking service
  errorTracker.log({
    error: error.message,
    stack: error.stack,
    context: {
      userId: currentUser.id,
      action: 'processPayment',
      timestamp: new Date().toISOString()
    }
  });
  
  // Show user-friendly message
  showError('Payment processing failed. Please try again.');
}
      

11. Consistent Error Styling Styling

/* Compliant: Consistent error styling */
.error {
  background: rgba(239, 68, 68, 0.2);
  border-left: 4px solid #ef4444;
  padding: 15px;
  border-radius: 8px;
  color: #fca5a5;
}
/* All errors use same style */
      

Error 1: Consistent styling

Error 2: Same style

Error 3: Recognizable pattern

12. Error Prevention Prevention

// Compliant: Error prevention
function divide(a, b) {
  if (b === 0) {
    throw new Error('Division by zero is not allowed');
  }
  return a / b;
}

function getItem(array, index) {
  if (index < 0 || index >= array.length) {
    throw new Error(`Index ${index} is out of bounds`);
  }
  return array[index];
}
// Validate inputs before operations
      

✓ Validation: Input checked before processing

13. Graceful Degradation Degradation

<!-- Compliant: Graceful degradation -->
<div id="feature">
  <!-- Feature content -->
</div>
<script>
  try {
    loadAdvancedFeature();
  } catch (error) {
    document.getElementById('feature').innerHTML = 
      '<p>Basic version available</p>';
  }
</script>
<!-- Page still works even if feature fails -->
      

Feature Unavailable: Advanced feature failed to load.

✓ Basic version still available

✓ Rest of page works normally

14. Error Codes and Reference Numbers Reference

<!-- Compliant: Error reference -->
<div class="error">
  <strong>An error occurred</strong>
  <p>Error Code: ERR-2024-12-25-ABC123</p>
  <p>Please contact support with this code.</p>
</div>
      

An error occurred

Error Code: ERR-2024-12-25-ABC123

Please contact support with this code for assistance.

15. Error Timestamps Timestamp

<!-- Compliant: Error with timestamp -->
<div class="error">
  <strong>Connection timeout</strong>
  <p>Occurred at: 2024-12-25 15:30:45 UTC</p>
</div>
      

Connection timeout

Occurred at: 2024-12-25 15:30:45 UTC

16. Error Categories and Severity Categories

<!-- Compliant: Error categories -->
<div class="error error-warning">Warning: Minor issue</div>
<div class="error error-error">Error: Action failed</div>
<div class="error error-critical">Critical: System unavailable</div>
      

⚠ Warning: This action may take longer than usual

✗ Error: Failed to save changes

🚨 Critical: System temporarily unavailable

About This Page

This page is designed for:

Testing error handling analysis tools
Training developers on error handling best practices
Understanding user-friendly error messages
Learning about error recovery and graceful degradation

Remember: Always provide helpful, actionable error messages. Log errors server-side for debugging, but show user-friendly messages to users. Include recovery options, error codes for support, and ensure errors don't crash the entire application.