Error Handling in JavaScript

🚨 Understanding JavaScript Errors

JavaScript has several built-in error types. Understanding these helps you write better error handling code and create more robust applications.

JavaScript Editor

// Basic Error Types
console.log("=== BASIC ERROR TYPES ===");

// 1. Syntax Error (caught during parsing)
console.log("1. Syntax Errors:");
try {
  // Missing closing parenthesis
  eval("console.log('Hello World'");
} catch (error) {
  console.log("SyntaxError caught:", error.name);
  console.log("Message:", error.message);
}

// 2. Reference Error (undefined variable)
console.log("\n2. Reference Errors:");
try {
  console.log(undefinedVariable); // Not defined
} catch (error) {
  console.log("ReferenceError caught:", error.name);
  console.log("Message:", error.message);
}

// 3. Type Error (wrong type operation)
console.log("\n3. Type Errors:");
try {
  const num = 42;
  num(); // Trying to call a number as function
} catch (error) {
  console.log("TypeError caught:", error.name);
  console.log("Message:", error.message);
}

// 4. Range Error (invalid array length)
console.log("\n4. Range Errors:");
try {
  const arr = new Array(-1); // Invalid array length
} catch (error) {
  console.log("RangeError caught:", error.name);
  console.log("Message:", error.message);
}

// 5. URI Error (malformed URI)
console.log("\n5. URI Errors:");
try {
  decodeURIComponent('%'); // Invalid URI component
} catch (error) {
  console.log("URIError caught:", error.name);
  console.log("Message:", error.message);
}

// 6. Eval Error (eval() related errors - rare)
console.log("\n6. Eval Errors:");
try {
  throw new EvalError("Custom eval error");
} catch (error) {
  console.log("EvalError caught:", error.name);
  console.log("Message:", error.message);
}

// Custom Error
console.log("\n7. Custom Errors:");
try {
  throw new Error("This is a custom error message");
} catch (error) {
  console.log("Error caught:", error.name);
  console.log("Message:", error.message);
  console.log("Stack trace:", error.stack.split("\n").slice(0, 3).join("\n"));
}

Built-in Error Types:

Error - Generic error (base class)
SyntaxError - Invalid syntax
ReferenceError - Undefined variable
TypeError - Invalid type operation
RangeError - Invalid numeric range
URIError - Invalid URI handling

Error Object Properties:

name - Error type name
message - Human-readable message
stack - Stack trace (non-standard)
fileName/lineNumber - Location

🛡️ Try-Catch-Finally

The try...catch...finally statement is the primary mechanism for handling errors in JavaScript. It allows you to handle exceptions gracefully.

JavaScript Editor

// Try...Catch...Finally
console.log("=== TRY-CATCH-FINALLY ===");

// Test cases
console.log("\n=== TEST CASES ===");

console.log("\n1. Valid division:");
const result1 = divideNumbers(10, 2);
console.log("Result:", result1);

console.log("\n2. Division by zero:");
const result2 = divideNumbers(10, 0);
console.log("Result:", result2);

console.log("\n3. Invalid type:");
const result3 = divideNumbers("10", 2);
console.log("Result:", result3);

console.log("\n4. Nested try-catch:");
try {
  console.log("\nEntering outer try block...");
  
  try {
    console.log("Entering inner try block...");
    throw new Error("Inner error");
    console.log("This won't execute");
    
  } catch (innerError) {
    console.log("Inner catch:", innerError.message);
    throw new Error("Rethrown from inner catch");
    
  } finally {
    console.log("Inner finally executed");
  }
  
} catch (outerError) {
  console.log("Outer catch:", outerError.message);
  
} finally {
  console.log("Outer finally executed");
}

console.log("\n5. Error in catch block:");
try {
  throw new Error("Original error");
  
} catch (error) {
  console.log("Caught:", error.message);
  
  // This error won't be caught by this catch block
  const undefinedVar = someUndefinedVariable; // ReferenceError!
  console.log("This won't execute");
  
} finally {
  console.log("Finally block still executes");
}

// Note: The ReferenceError above escapes to the global scope

⚠️ Important Notes:

finally always executes, even with return in try/catch
Errors in catch or finally blocks aren't caught
Async errors need try...catch inside async functions or .catch()
Use instanceof to check error types

✨ Custom Error Classes

Creating custom error classes makes your code more readable and allows for better error categorization and handling. This is especially useful for validation.

JavaScript Editor

// Custom Error Classes
console.log("=== CUSTOM ERROR CLASSES ===");

// 1. Basic custom error
class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = "ValidationError";
    this.field = field;
    this.timestamp = new Date().toISOString();
  }
  
  toJSON() {
    return {
      name: this.name,
      message: this.message,
      field: this.field,
      timestamp: this.timestamp,
      stack: this.stack
    };
  }
}

// 2. More specific custom errors
class RequiredFieldError extends ValidationError {
  constructor(field) {
    super(`${field} is required`, field);
    this.name = "RequiredFieldError";
    this.code = "REQUIRED_FIELD";
  }
}

class InvalidFormatError extends ValidationError {
  constructor(field, format) {
    super(`${field} must be in format: ${format}`, field);
    this.name = "InvalidFormatError";
    this.code = "INVALID_FORMAT";
  }
}

class RangeError extends ValidationError {
  constructor(field, min, max) {
    super(`${field} must be between ${min} and ${max}`, field);
    this.name = "RangeError";
    this.code = "OUT_OF_RANGE";
    this.min = min;
    this.max = max;
  }
}

// 3. Usage example
function validateUser(user) {
  const errors = [];
  
  try {
    // Check required fields
    if (!user.username || user.username.trim() === '') {
      throw new RequiredFieldError('username');
    }
    
    if (!user.email || user.email.trim() === '') {
      throw new RequiredFieldError('email');
    }
    
    // Check format
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (user.email && !emailRegex.test(user.email)) {
      throw new InvalidFormatError('email', 'email@example.com');
    }
    
    // Check range
    if (user.age && (user.age < 0 || user.age > 150)) {
      throw new RangeError('age', 0, 150);
    }
    
    console.log("✅ User validation passed!");
    return { success: true, user };
    
  } catch (error) {
    if (error instanceof ValidationError) {
      console.log(`❌ Validation failed: ${error.message}`);
      errors.push(error);
      
      // Check if we should continue validation
      if (error instanceof RequiredFieldError) {
        console.log("Stopping validation - required field missing");
        return { success: false, errors };
      }
    } else {
      // Re-throw non-validation errors
      throw error;
    }
  }
  
  return { success: errors.length === 0, errors };
}

// Test the validation
console.log("\n=== VALIDATION TESTS ===");

console.log("\n1. Valid user:");
const validUser = {
  username: "john_doe",
  email: "john@example.com",
  age: 25
};
const result1 = validateUser(validUser);
console.log("Result:", JSON.stringify(result1, null, 2));

console.log("\n2. Missing required field:");
const invalidUser1 = {
  username: "",
  email: "test@example.com"
};
const result2 = validateUser(invalidUser1);
console.log("Result:", JSON.stringify(result2.errors, null, 2));

console.log("\n3. Invalid email format:");
const invalidUser2 = {
  username: "jane_doe",
  email: "invalid-email",
  age: 200
};
const result3 = validateUser(invalidUser2);
console.log("Result:", JSON.stringify(result3.errors, null, 2));

// 4. Error aggregation
console.log("\n4. Multiple validation errors:");
function validateForm(data) {
  const errors = [];
  
  // Collect all errors instead of stopping at first
  if (!data.name) errors.push(new RequiredFieldError('name'));
  if (!data.email) errors.push(new RequiredFieldError('email'));
  
  if (data.email && !data.email.includes('@')) {
    errors.push(new InvalidFormatError('email', 'valid email'));
  }
  
  if (data.age && data.age < 18) {
    errors.push(new RangeError('age', 18, 150));
  }
  
  return {
    isValid: errors.length === 0,
    errors: errors.map(err => err.toJSON())
  };
}

const formData = {
  name: "",
  email: "invalid",
  age: 16
};

const validationResult = validateForm(formData);
console.log("Form validation result:");
console.log(JSON.stringify(validationResult, null, 2));

Custom Error Benefits:

Better error categorization
Additional metadata (field, code, etc.)
Consistent error handling
Better debugging information

Best Practices:

Extend the built-in Error class
Set the name property
Include useful metadata
Override toString() if needed

🏗️ Advanced Error Handling Patterns

Advanced applications use patterns like Error Boundaries, Retry Logic, Fallbacks, and Circuit Breakers to create resilient systems.

JavaScript Editor

// Error Handling Patterns
console.log("=== ERROR HANDLING PATTERNS ===");

// 1. Error Boundary Pattern (React-inspired)
class ErrorBoundary {
  constructor(operation) {
    this.operation = operation;
  }
  
  execute() {
    try {
      return {
        success: true,
        data: this.operation(),
        error: null
      };
    } catch (error) {
      return {
        success: false,
        data: null,
        error: this.normalizeError(error)
      };
    }
  }
  
  normalizeError(error) {
    return {
      name: error.name || 'Error',
      message: error.message,
      stack: error.stack,
      timestamp: new Date().toISOString(),
      code: error.code || 'UNKNOWN_ERROR'
    };
  }
}

// 2. Retry Pattern
async function retryOperation(operation, maxRetries = 3, delay = 1000) {
  let lastError;
  
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      console.log(`Attempt ${attempt} of ${maxRetries}...`);
      return await operation();
      
    } catch (error) {
      lastError = error;
      console.log(`Attempt ${attempt} failed: ${error.message}`);
      
      if (attempt < maxRetries) {
        console.log(`Retrying in ${delay}ms...`);
        await new Promise(resolve => setTimeout(resolve, delay));
        delay *= 2; // Exponential backoff
      }
    }
  }
  
  throw new Error(`Operation failed after ${maxRetries} attempts: ${lastError.message}`);
}

// 3. Fallback Pattern
function withFallback(mainOperation, fallbackOperation) {
  try {
    return mainOperation();
  } catch (error) {
    console.log(`Main operation failed: ${error.message}`);
    console.log("Using fallback...");
    return fallbackOperation();
  }
}

// 4. Circuit Breaker Pattern
class CircuitBreaker {
  constructor(operation, failureThreshold = 3, resetTimeout = 10000) {
    this.operation = operation;
    this.failureThreshold = failureThreshold;
    this.resetTimeout = resetTimeout;
    this.failureCount = 0;
    this.state = 'CLOSED'; // CLOSED, OPEN, HALF_OPEN
    this.lastFailureTime = null;
  }
  
  async execute() {
    if (this.state === 'OPEN') {
      const timeSinceFailure = Date.now() - this.lastFailureTime;
      if (timeSinceFailure > this.resetTimeout) {
        this.state = 'HALF_OPEN';
        console.log("Circuit breaker: Trying half-open state");
      } else {
        throw new Error("Circuit breaker is OPEN - operation blocked");
      }
    }
    
    try {
      const result = await this.operation();
      
      if (this.state === 'HALF_OPEN') {
        this.state = 'CLOSED';
        this.failureCount = 0;
        console.log("Circuit breaker: Back to CLOSED state");
      }
      
      return result;
      
    } catch (error) {
      this.failureCount++;
      this.lastFailureTime = Date.now();
      
      if (this.failureCount >= this.failureThreshold) {
        this.state = 'OPEN';
        console.log(`Circuit breaker: Opened after ${this.failureCount} failures`);
      }
      
      throw error;
    }
  }
}

// 5. Global Error Handlers
console.log("\n=== GLOBAL ERROR HANDLING ===");

// Global error handler
window.addEventListener('error', function(event) {
  console.error("Global error caught:", {
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    colno: event.colno,
    error: event.error
  });
  
  // Send to error tracking service
  // logErrorToService(event.error);
  
  // Prevent default browser error handling
  // event.preventDefault();
});

// Unhandled promise rejection handler
window.addEventListener('unhandledrejection', function(event) {
  console.error("Unhandled promise rejection:", event.reason);
  
  // Prevent default browser handling
  event.preventDefault();
});

// Example usage
console.log("\n=== EXAMPLE USAGE ===");

// Error Boundary example
console.log("1. Error Boundary Pattern:");
const boundary = new ErrorBoundary(() => {
  const random = Math.random();
  if (random > 0.5) {
    throw new Error("Random failure!");
  }
  return "Success!";
});

for (let i = 0; i < 3; i++) {
  const result = boundary.execute();
  console.log(`Run ${i + 1}:`, result.success ? "✅" : "❌", result.data || result.error.message);
}

// Retry pattern example
console.log("\n2. Retry Pattern:");
const flakyOperation = () => {
  if (Math.random() > 0.3) {
    throw new Error("Flaky operation failed");
  }
  return "Operation succeeded";
};

retryOperation(flakyOperation, 3, 500)
  .then(result => console.log("Retry result:", result))
  .catch(error => console.log("Retry failed:", error.message));

// Fallback pattern example
console.log("\n3. Fallback Pattern:");
const result = withFallback(
  () => { throw new Error("Primary service down"); },
  () => "Using cached data from fallback"
);
console.log("Fallback result:", result);

// Circuit breaker example
console.log("\n4. Circuit Breaker Pattern:");
const breaker = new CircuitBreaker(async () => {
  await new Promise(resolve => setTimeout(resolve, 100));
  if (Math.random() > 0.5) {
    throw new Error("Service unavailable");
  }
  return "Service response";
});

// Simulate multiple calls
async function testCircuitBreaker() {
  for (let i = 0; i < 5; i++) {
    try {
      const result = await breaker.execute();
      console.log(`Call ${i + 1}: ${result}`);
    } catch (error) {
      console.log(`Call ${i + 1}: ${error.message}`);
    }
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
}

testCircuitBreaker();

Patterns:

Error Boundary - Isolate failures
Retry Pattern - Automatic retries
Fallback Pattern - Backup plan
Circuit Breaker - Prevent cascade failures

Global Handlers:

window.onerror - Global error handler
unhandledrejection - Unhandled promises
error event - Resource loading errors

Production Tips:

Log errors to monitoring service
Use error tracking (Sentry, etc.)
Implement health checks
Create error recovery UIs

📋 Error Handling Checklist

What to Handle:

Network requests failures
User input validation
Third-party API errors
Browser compatibility issues
Resource loading failures

What Not to Handle:

Programming errors (fix the code!)
Syntax errors (should be caught in dev)
Every possible error (use patterns)
Async errors without proper context

← Forms & Validation ES6 Features →

Explore Related Tools

Hand-picked utilities and calculators related to this tool.

Related Tools

JavaScript Tutorial

Error Handling in JavaScript

🚨 Understanding JavaScript Errors

Built-in Error Types:

Error Object Properties:

🛡️ Try-Catch-Finally

⚠️ Important Notes:

✨ Custom Error Classes

Custom Error Benefits:

Best Practices:

🏗️ Advanced Error Handling Patterns

Patterns:

Global Handlers:

Production Tips:

📋 Error Handling Checklist

What to Handle:

What Not to Handle:

Explore Related Tools

Custom Error Handling

Next.js Error Handling

Error Handling

Error Handling

HTML JavaScript Tutorial

JavaScript Advanced Tutorial