Error Handling: Missing try-catch for Service Worker Registration

[AlexJSully]

Issue Description

The window.onload handler is async and calls init(), but doesn't have proper error handling. If retrievePageData() or retrieveArticleData() fail, the page initialization stops silently without user feedback.

Risk Level

MEDIUM

Affected Files

• src/scripts/index.js (Lines 576-580)

Details

Current Code

window.onload = async function () {
  await registerServiceWorker();
  init();  // No try-catch here!
};

Where init() calls:

function init() {
  ArticleFiller.retrievePageData();
  ArticleFiller.retrieveArticleData();
}

Problems

1. If retrievePageData() or retrieveArticleData() throw errors, they're not caught
2. Page appears to be loading but nothing happens
3. Users have no visual feedback that something went wrong
4. No error recovery mechanism

Example Failure Scenario

• Network is slow or unreachable
• articleData.json returns 404
• User sees blank page with no error message

Expected Behavior

1. All fetch operations should be wrapped in try-catch
2. User should see an error message if data cannot be loaded
3. Fallback behavior (e.g., show header, suggest refresh) should be available

Solution Approach

1. Wrap init() call in try-catch:

   window.onload = async function () {
     try {
       await registerServiceWorker();
       init();
     } catch (error) {
       console.error('Page initialization failed:', error);
       ArticleFiller.displayError('Failed to load page. Please refresh or try again later.');
     }
   };

2. Ensure retrievePageData() and retrieveArticleData() have proper error handlers

3. Add timeout protection to prevent indefinite loading states

Labels

quality, error-handling, resilience