Error Handling: Poor Error Context in User Messages

[AlexJSully]

Issue Description

Error messages lack sufficient context and debugging information. When errors occur, users see "Unknown error" but developers cannot easily determine what went wrong.

Risk Level

MEDIUM

Affected Files

• src/scripts/index.js (Lines 38-58 in displayError())

Details

Current Behavior

static displayError(msg) {
  ArticleFiller.errMsg = msg?.trim();
  if (ArticleFiller.errMsg?.length < 1) {
    ArticleFiller.errMsg = "Unknown error"; // Not helpful
  }
  console.error(ArticleFiller.errMsg);
  // ... displays error to user
}

Problems

1. "Unknown error" is not helpful for either users or developers
2. Only the trimmed message is logged; error object details are lost
3. No distinction between network errors, parsing errors, or fetch failures
4. No context about what operation was being performed (fetch article, load carousel, etc.)

Expected Behavior

1. Log full error object to console for developer debugging
2. Display user-friendly message that explains what went wrong and suggests remediation
3. Include operation context (which article, which page, etc.)

Example Improved Implementation

static displayError(msg, errorContext = {}) {
  const errorObj = new Error(msg);
  console.error('ArticleFiller Error:', {
    message: msg,
    context: errorContext,
    stack: errorObj.stack,
    timestamp: new Date().toISOString()
  });
  
  ArticleFiller.errMsg = msg?.trim() || "An unexpected error occurred. Please try refreshing the page.";
  // ... display to user
}

Solution Approach

1. Enhance error logging with context information
2. Improve user-facing error messages
3. Add different error handlers for different failure types (network, parsing, missing data)
4. Log to Sentry with appropriate error level and context

Labels

quality, error-handling, high