# 📚 JavaScript Tutorial - Part 9/10: Error Handling & Debugging
#JavaScript #Debugging #ErrorHandling #Performance #BestPractices

Welcome to Part 9 of our JavaScript series! Today we'll master professional error handling, debugging techniques, and performance optimization strategies used by senior developers.

---

## 🔹 Comprehensive Error Handling
### 1. Error Types in JavaScript

try {
  // Potential error code
} catch (error) {
  if (error instanceof TypeError) {
    console.log("Type error occurred");
  } else if (error instanceof ReferenceError) {
    console.log("Undefined variable");
  } else if (error instanceof RangeError) {
    console.log("Value out of range");
  } else {
    console.log("Unknown error:", error.message);
  }
}

### 2. Custom Error Classes

class ApiError extends Error {
  constructor(url, status, message) {
    super(`API call to ${url} failed with ${status}: ${message}`);
    this.name = "ApiError";
    this.status = status;
    this.url = url;
  }
}

// Usage
throw new ApiError("/users", 500, "Internal Server Error");

### 3. Error Boundary Pattern (React-like)

function ErrorBoundary({ children }) {
  const [error, setError] = useState(null);

  try {
    return children;
  } catch (err) {
    setError(err);
    return <FallbackUI error={error} />;
  }
}

// Wrap components
<ErrorBoundary>
  <UnstableComponent />
</ErrorBoundary>

---

## 🔹 Advanced Debugging Techniques
### 1. Console Methods Beyond `log()`

console.table([{id: 1, name: 'Ali'}, {id: 2, name: 'Sarah'}]);

console.group("User Details");
console.log("Name: Ali");
console.log("Age: 25");
console.groupEnd();

console.time("API Call");
await fetchData();
console.timeEnd("API Call"); // Logs execution time

### 2. Debugger Statement & Breakpoints

function complexCalculation() {
  debugger; // Pauses execution here
  // Step through with F10/F11
  const result = /* ... */;
  return result;
}

### 3. Source Maps in Production

// webpack.config.js
module.exports = {
  devtool: 'source-map', // Generates .map files
  // ...
};

---

## 🔹 Performance Optimization
### 1. Benchmarking Tools

// Using performance.now()
const start = performance.now();
expensiveOperation();
const end = performance.now();
console.log(`Operation took ${end - start}ms`);

### 2. Memory Leak Detection
Common leak patterns:

// 1. Accidental globals
function leak() {
  leakedVar = 'This is global!'; // Missing var/let/const
}

// 2. Forgotten timers
const intervalId = setInterval(() => {}, 1000);
// Remember to clearInterval(intervalId)

// 3. Detached DOM references
const elements = [];
function storeElement() {
  const el = document.createElement('div');
  elements.push(el); // Keeps reference after removal
}

### 3. Optimization Techniques

// 1. Debounce rapid events
function debounce(fn, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}

// 2. Web Workers for CPU-intensive tasks
const worker = new Worker('task.js');
worker.postMessage(data);
worker.onmessage = (e) => console.log(e.data);

// 3. Virtualize long lists (react-window, etc.)

---

## 🔹 Memory Management
### 1. Garbage Collection Basics

// Circular reference (modern engines handle this)
let obj1 = {};
let obj2 = { ref: obj1 };
obj1.ref = obj2;

// Manual cleanup
let heavyResource = loadResource();
function cleanup() {
  heavyResource = null; // Eligible for GC
}

### 2. WeakMap & WeakSet

const weakMap = new WeakMap();
let domNode = document.getElementById('node');
weakMap.set(domNode, { clicks: 0 });

// When domNode is removed, entry is automatically GC'd

---

## 🔹 Network Optimization
### 1. Bundle Analysis

npm install -g source-map-explorer
source-map-explorer bundle.js

### 2. Code Splitting

// Dynamic imports
const module = await import('./heavyModule.js');

// React.lazy
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));