From 8cb1b3ae4d92596142c8908f38f1f9b3124287d3 Mon Sep 17 00:00:00 2001
From: Christina_xizi <xitingwengchristina@gmail.com>
Date: Sun, 8 Jun 2025 14:50:01 -0700
Subject: [PATCH] update Readme

---
 index.html | 383 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 358 insertions(+), 25 deletions(-)
diff --git a/index.html b/index.html
index 6c2e234..25531c5 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,16 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Lab 9</title>
+  <title>Lab 9 - JavaScript Error Handling</title>
+
+  <!-- TrackJS Error Monitoring Script -->
+  <script type="text/javascript">
+    window._trackJs = {
+      token: 'YOUR_TRACKJS_TOKEN_HERE',
+      application: 'lab9-error-handling'
+    };
+  </script>
+  <script type="text/javascript" src="https://d2zah9y47r7bi2.cloudfront.net/releases/current/tracker.js"></script>
 
   <style>
     button {
@@ -46,22 +55,44 @@
       padding: 8px 2px;
       width: 122px;
     }
+
+    .demo-section {
+      margin-top: 30px;
+      padding: 20px;
+      border: 2px solid #ccc;
+      border-radius: 5px;
+    }
+
+    .demo-section h3 {
+      margin-top: 0;
+      color: #333;
+    }
+
+    #custom-error-demo {
+      background-color: #f9f9f9;
+    }
+
+    #try-catch-demo {
+      background-color: #fff9f9;
+    }
   </style>
 </head>
 
 <body>
   <main>
+    <h1>Lab 9 - JavaScript Error Handling & Monitoring</h1>
+    
     <form>
       <fieldset>
         <legend>Error Calculator</legend>
-        <input name="first-num" id="first-num" />
+        <input name="first-num" id="first-num" placeholder="Enter number" />
         <select name="operator" id="operator">
           <option>+</option>
           <option>-</option>
           <option>*</option>
           <option>/</option>
         </select>
-        <input name="second-num" id="second-num" />
+        <input name="second-num" id="second-num" placeholder="Enter number" />
         <button id="calculate">Calculate</button>
         <br />
         <output></output>
@@ -69,39 +100,341 @@
     </form>
 
     <section id="error-btns">
-      <button>Console Log</button>
-      <button>Console Error</button>
-      <button>Console Count</button>
-      <button>Console Warn</button>
-      <button>Console Assert</button>
-      <button>Console Clear</button>
-      <button>Console Dir</button>
-      <button>Console dirxml</button>
-      <button>Console Group Start</button>
-      <button>Console Group End</button>
-      <button>Console Table</button>
-      <button>Start Timer</button>
-      <button>End Timer</button>
-      <button>Console Trace</button>
-      <button>Trigger a Global Error</button>
+      <button data-action="console-log">Console Log</button>
+      <button data-action="console-error">Console Error</button>
+      <button data-action="console-count">Console Count</button>
+      <button data-action="console-warn">Console Warn</button>
+      <button data-action="console-assert">Console Assert</button>
+      <button data-action="console-clear">Console Clear</button>
+      <button data-action="console-dir">Console Dir</button>
+      <button data-action="console-dirxml">Console dirxml</button>
+      <button data-action="console-group-start">Console Group Start</button>
+      <button data-action="console-group-end">Console Group End</button>
+      <button data-action="console-table">Console Table</button>
+      <button data-action="start-timer">Start Timer</button>
+      <button data-action="end-timer">End Timer</button>
+      <button data-action="console-trace">Console Trace</button>
+      <button data-action="trigger-global-error">Trigger a Global Error</button>
     </section>
+
+    <div class="demo-section" id="try-catch-demo">
+      <h3>Try/Catch/Finally Demo</h3>
+      <button id="try-catch-btn">Test Try/Catch</button>
+      <button id="realistic-error-btn">Realistic Error Test</button>
+      <p>Check console for try/catch demonstrations</p>
+    </div>
+
+    <div class="demo-section" id="custom-error-demo">
+      <h3>Custom Error Demo</h3>
+      <button id="custom-error-btn">Throw Custom Error</button>
+      <button id="validation-error-btn">Validation Error</button>
+      <p>Check console for custom error demonstrations</p>
+    </div>
   </main>
 
   <script>
+    // Sample data for console demonstrations
+    const sampleData = {
+      name: "Lab 9 Demo",
+      version: "1.0.0",
+      features: ["error handling", "console methods", "monitoring"],
+      config: {
+        debug: true,
+        environment: "development"
+      }
+    };
+
+    const tableData = [
+      { name: "Alice", age: 25, city: "New York" },
+      { name: "Bob", age: 30, city: "San Francisco" },
+      { name: "Charlie", age: 35, city: "Chicago" }
+    ];
+
+    // Custom Error Classes
+    class ValidationError extends Error {
+      constructor(message) {
+        super(message);
+        this.name = "ValidationError";
+      }
+    }
+
+    class CalculationError extends Error {
+      constructor(message, operation) {
+        super(message);
+        this.name = "CalculationError";
+        this.operation = operation;
+      }
+    }
+
+    // Global error handler
+    window.onerror = function(message, source, lineno, colno, error) {
+      console.log('Global error caught:', {
+        message: message,
+        source: source,
+        line: lineno,
+        column: colno,
+        error: error
+      });
+      return false; // Don't prevent default browser error handling
+    };
+
+    // Modern error event listener
+    window.addEventListener('error', function(event) {
+      console.log('Error event caught:', {
+        message: event.message,
+        filename: event.filename,
+        lineno: event.lineno,
+        colno: event.colno,
+        error: event.error
+      });
+    });
+
+    // Unhandled promise rejection handler
+    window.addEventListener('unhandledrejection', function(event) {
+      console.log('Unhandled promise rejection:', event.reason);
+    });
+
+    // Form submission with error handling
     let form = document.querySelector('form');
     form.addEventListener('submit', e => {
       e.preventDefault();
-      let output = document.querySelector('output');
-      let firstNum = document.querySelector('#first-num').value;
-      let secondNum = document.querySelector('#second-num').value;
-      let operator = document.querySelector('#operator').value;
-      output.innerHTML = eval(`${firstNum} ${operator} ${secondNum}`);
+      
+      try {
+        let output = document.querySelector('output');
+        let firstNum = document.querySelector('#first-num').value;
+        let secondNum = document.querySelector('#second-num').value;
+        let operator = document.querySelector('#operator').value;
+
+        // Validate inputs
+        if (!firstNum || !secondNum) {
+          throw new ValidationError("Both numbers are required for calculation");
+        }
+
+        if (isNaN(firstNum) || isNaN(secondNum)) {
+          throw new ValidationError("Please enter valid numbers");
+        }
+
+        // Check for division by zero
+        if (operator === '/' && parseFloat(secondNum) === 0) {
+          throw new CalculationError("Division by zero is not allowed", "division");
+        }
+
+        const result = eval(`${firstNum} ${operator} ${secondNum}`);
+        output.innerHTML = result;
+        
+      } catch (error) {
+        const output = document.querySelector('output');
+        
+        if (error instanceof ValidationError) {
+          output.innerHTML = `Validation Error: ${error.message}`;
+          output.style.color = 'red';
+        } else if (error instanceof CalculationError) {
+          output.innerHTML = `Calculation Error: ${error.message}`;
+          output.style.color = 'orange';
+        } else {
+          output.innerHTML = `Unexpected Error: ${error.message}`;
+          output.style.color = 'red';
+        }
+        
+        console.error('Form calculation error:', error);
+      } finally {
+        console.log('Calculation attempt completed');
+      }
     });
 
+    // Console method demonstrations
     let errorBtns = Array.from(document.querySelectorAll('#error-btns > button'));
+    let timerStarted = false;
+
+    errorBtns.forEach(btn => {
+      btn.addEventListener('click', function() {
+        const action = this.getAttribute('data-action');
+        
+        switch(action) {
+          case 'console-log':
+            console.log('Console Log Demo:', sampleData);
+            console.log('This is a sample log message with multiple values:', 42, true, [1, 2, 3]);
+            break;
+            
+          case 'console-error':
+            console.error('Console Error Demo:', 'This is an error message');
+            console.error('Error with object:', { errorCode: 500, message: 'Server Error' });
+            break;
+            
+          case 'console-count':
+            console.count('Button Click Counter');
+            console.count('Button Click Counter');
+            console.count('Another Counter');
+            break;
+            
+          case 'console-warn':
+            console.warn('Console Warn Demo:', 'This is a warning message');
+            console.warn('Deprecated feature warning');
+            break;
+            
+          case 'console-assert':
+            console.assert(true, 'This assertion passes - you should not see this');
+            console.assert(false, 'This assertion fails - you should see this message');
+            console.assert(2 + 2 === 5, 'Math is broken!', { expected: 5, actual: 4 });
+            break;
+            
+          case 'console-clear':
+            console.clear();
+            console.log('Console cleared! This is a new message.');
+            break;
+            
+          case 'console-dir':
+            console.dir(sampleData);
+            console.dir(document.querySelector('form'));
+            break;
+            
+          case 'console-dirxml':
+            console.dirxml(document.querySelector('main'));
+            console.dirxml(document.querySelector('form'));
+            break;
+            
+          case 'console-group-start':
+            console.group('Demo Group');
+            console.log('This is inside the group');
+            console.groupCollapsed('Nested Collapsed Group');
+            console.log('This is in a nested group');
+            console.warn('Warning in nested group');
+            console.groupEnd();
+            console.log('Back to main group');
+            break;
+            
+          case 'console-group-end':
+            console.groupEnd();
+            console.log('This should be outside the group now');
+            break;
+            
+          case 'console-table':
+            console.table(tableData);
+            console.table(sampleData.features);
+            console.table([
+              { browser: 'Chrome', version: '91', share: '65%' },
+              { browser: 'Firefox', version: '89', share: '19%' },
+              { browser: 'Safari', version: '14', share: '9%' }
+            ]);
+            break;
+            
+          case 'start-timer':
+            console.time('Demo Timer');
+            console.time('Another Timer');
+            timerStarted = true;
+            console.log('Timers started! Click "End Timer" to see results.');
+            break;
+            
+          case 'end-timer':
+            if (timerStarted) {
+              console.timeEnd('Demo Timer');
+              console.timeEnd('Another Timer');
+            } else {
+              console.log('Start timer first!');
+            }
+            break;
+            
+          case 'console-trace':
+            function traceDemo() {
+              function level1() {
+                function level2() {
+                  console.trace('Trace Demo - showing call stack');
+                }
+                level2();
+              }
+              level1();
+            }
+            traceDemo();
+            break;
+            
+          case 'trigger-global-error':
+            // This will trigger the global error handler
+            setTimeout(() => {
+              // This creates a realistic error scenario
+              nonExistentFunction();
+            }, 100);
+            break;
+        }
+      });
+    });
+
+    // Try/Catch demonstrations
+    document.getElementById('try-catch-btn').addEventListener('click', function() {
+      try {
+        console.log('Trying to execute some code...');
+        
+        // Simulate different types of errors
+        let randomError = Math.floor(Math.random() * 3);
+        
+        switch(randomError) {
+          case 0:
+            JSON.parse('invalid json');
+            break;
+          case 1:
+            throw new Error('Simulated custom error');
+          case 2:
+            let obj = null;
+            obj.property.access; // TypeError
+            break;
+        }
+        
+      } catch (error) {
+        console.error('Caught error in try/catch:', error.name, '-', error.message);
+        console.log('Error stack:', error.stack);
+      } finally {
+        console.log('Finally block executed - cleanup code would go here');
+      }
+    });
+
+    document.getElementById('realistic-error-btn').addEventListener('click', function() {
+      try {
+        // Simulate a realistic DOM manipulation error
+        let element = document.getElementById('non-existent-id');
+        element.style.display = 'none'; // This will cause an error
+        
+      } catch (error) {
+        console.error('Realistic error caught:', error);
+        console.log('Error handling: Element not found, gracefully handling...');
+        
+        // Graceful fallback
+        console.log('Creating fallback element...');
+        
+      } finally {
+        console.log('DOM operation completed (with or without error)');
+      }
+    });
+
+    // Custom Error demonstrations
+    document.getElementById('custom-error-btn').addEventListener('click', function() {
+      try {
+        throw new CalculationError('Custom calculation error demonstration', 'test-operation');
+      } catch (error) {
+        console.error('Custom error caught:', error);
+        console.log('Error name:', error.name);
+        console.log('Error operation:', error.operation);
+      }
+    });
+
+    document.getElementById('validation-error-btn').addEventListener('click', function() {
+      try {
+        throw new ValidationError('Custom validation error - invalid input detected');
+      } catch (error) {
+        console.error('Validation error caught:', error);
+        console.log('Error type:', error.constructor.name);
+        console.log('Is ValidationError?', error instanceof ValidationError);
+      }
+    });
 
-    // Start your code here
-    // You may move this JS to another file if you wish
+    // Initialize the application
+    console.log('Lab 9 - JavaScript Error Handling initialized');
+    console.log('Open the browser console to see all demonstrations');
+    console.group('Available Features');
+    console.log('✓ Console method demonstrations');
+    console.log('✓ Try/Catch/Finally error handling');
+    console.log('✓ Custom error types');
+    console.log('✓ Global error handling');
+    console.log('✓ Error monitoring integration');
+    console.groupEnd();
   </script>
 </body>
 
