JavaScript Design Patterns

Error Handling

Gracefully handle errors with try-catch-finally

Find videos you like?

Save to resource drawer for future reference!

Error Handling: Expect the Unexpected

Error handling prevents your application from crashing when something goes wrong. Use try-catch-finally to gracefully handle errors and provide fallbacks!

Why Error Handling?

Errors will happen - network failures, invalid input, missing data. Handle them gracefully instead of crashing!

Try-Catch-Finally

Basic error handling syntax

❌ No Error Handling

// App crashes on error
function parseJSON(jsonString) {
  const data = JSON.parse(jsonString);
  return data;
}

// If invalid JSON, app crashes! 💥
parseJSON('invalid json');
// Uncaught SyntaxError

// Nothing after error executes
console.log('This never runs');

✅ With Error Handling

// App continues even if error occurs
function parseJSON(jsonString) {
  try {
    const data = JSON.parse(jsonString);
    return data;
  } catch (error) {
    console.error('Invalid JSON:', error.message);
    return null; // Fallback
  }
}

// Handles error gracefully
const result = parseJSON('invalid json');
// Logs: Invalid JSON: ...
console.log(result); // null

// Code continues to execute
console.log('App still running!');

Try-Catch-Finally Blocks

Complete error handling flow

javascript

code

DarkEditable

// Define a risky operation
function riskyOperation() {
  const random = Math.random();
  if (random < 0.5) {
    throw new Error('Operation failed!');
  }
  return 'Success!';
}

try {
  // Code that might throw an error
  console.log('Trying...');
  const result = riskyOperation();
  console.log('Success:', result);
  
} catch (error) {
  // Handles any error from try block
  console.error('Error occurred:', error.message);
  
  // Can check error type
  if (error instanceof TypeError) {
    console.log('Type error!');
  }
  
} finally {
  // ALWAYS runs (even if error or return)
  console.log('Finally block - cleanup here');
  // Close connections, release resources, etc.
}

// Example: File operations (simulated)
function readFile(filename) {
  let file = null;
  try {
    console.log('Opening file:', filename);
    // Simulating file operations
    if (!filename) {
      throw new Error('Filename required');
    }
    file = { name: filename, content: 'File content here' };
    const content = file.content;
    console.log('Read content:', content);
    return content;
  } catch (error) {
    console.error('Failed to read file:', error.message);
    return null;
  } finally {
    // Always close file, even if error
    if (file) {
      console.log('Closing file:', file.name);
    }
    console.log('File operation completed');
  }
}

// Test it
readFile('data.txt');
readFile(''); // Will fail

// In real async code with fetch:
// async function fetchUser(id) {
//   try {
//     const response = await fetch(`/api/users/${id}`);
//     return await response.json();
//   } catch (error) {
//     console.error('Failed:', error);
//     return null;
//   }
// }

Console Output

Click "Run Code" to see output here...

Custom Error Classes

Create meaningful error types

Custom Error Types

// Base Error class
class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = 'ValidationError';
  }
}

class NetworkError extends Error {
  constructor(message, statusCode) {
    super(message);
    this.name = 'NetworkError';
    this.statusCode = statusCode;
  }
}

class AuthenticationError extends Error {
  constructor(message) {
    super(message);
    this.name = 'AuthenticationError';
  }
}

// Usage
function validateAge(age) {
  if (typeof age !== 'number') {
    throw new ValidationError('Age must be a number');
  }
  if (age < 0 || age > 120) {
    throw new ValidationError('Age must be between 0 and 120');
  }
  return true;
}

// Handling specific errors
try {
  validateAge('twenty');
} catch (error) {
  if (error instanceof ValidationError) {
    console.log('Validation failed:', error.message);
  } else if (error instanceof NetworkError) {
    console.log('Network issue:', error.statusCode);
  } else {
    console.log('Unknown error:', error);
  }
}

Throwing Errors

When and how to throw errors

javascript

code

DarkEditable

// Throw built-in errors
function divide(a, b) {
  if (b === 0) {
    throw new Error('Cannot divide by zero');
  }
  return a / b;
}

// Throw custom errors
class InsufficientFundsError extends Error {
  constructor(balance, amount) {
    super(`Insufficient funds: ${balance} < ${amount}`);
    this.name = 'InsufficientFundsError';
    this.balance = balance;
    this.amount = amount;
  }
}

function withdraw(account, amount) {
  if (amount > account.balance) {
    throw new InsufficientFundsError(account.balance, amount);
  }
  account.balance -= amount;
  return account.balance;
}

// Error with additional info
class APIError extends Error {
  constructor(message, endpoint, statusCode) {
    super(message);
    this.name = 'APIError';
    this.endpoint = endpoint;
    this.statusCode = statusCode;
    this.timestamp = new Date();
  }
}

async function callAPI(endpoint) {
  const response = await fetch(endpoint);
  
  if (!response.ok) {
    throw new APIError(
      `API call failed: ${response.statusText}`,
      endpoint,
      response.status
    );
  }
  
  return response.json();
}

// Usage (wrapped in async function)
(async function testAPIError() {
  try {
    const data = await callAPI('/api/users');
    console.log('Data received:', data);
  } catch (error) {
    if (error instanceof APIError) {
      console.log('API Error Details:');
      console.log('Endpoint:', error.endpoint);
      console.log('Status:', error.statusCode);
      console.log('Time:', error.timestamp);
    }
  }
})();

// Simpler synchronous example
const account = { balance: 100 };

try {
  console.log('Withdrawing $50...');
  withdraw(account, 50);
  console.log('New balance:', account.balance);
  
  console.log('Withdrawing $80...');
  withdraw(account, 80); // This will fail
} catch (error) {
  if (error instanceof InsufficientFundsError) {
    console.log('Cannot withdraw:', error.message);
    console.log('Balance:', error.balance);
    console.log('Requested:', error.amount);
  }
}

Console Output

Click "Run Code" to see output here...

Async Error Handling

Handling errors in promises and async/await

Promise .catch()

// Using .catch()
fetch('/api/data')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Failed:', error);
  })
  .finally(() => {
    console.log('Request completed');
  });

// Multiple catches
Promise.resolve()
  .then(() => {
    throw new Error('Step 1 failed');
  })
  .catch(error => {
    console.log('Caught:', error.message);
    return 'recovered';
  })
  .then(result => {
    console.log(result); // 'recovered'
  });

Async/Await try-catch

// Using try-catch with async/await
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Failed:', error);
  } finally {
    console.log('Request completed');
  }
}

// Multiple async operations
async function processUser(id) {
  try {
    const user = await fetchUser(id);
    const profile = await fetchProfile(user.id);
    const posts = await fetchPosts(user.id);
    
    return { user, profile, posts };
  } catch (error) {
    console.error('Error:', error);
    return null;
  }
}

Promise.allSettled for Multiple Calls

Handle errors in parallel operations

javascript

code

DarkEditable

// Simulated async functions
function fetchUsers() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(['Alice', 'Bob']), 100);
  });
}

function fetchPosts() {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('Posts API down')), 100);
  });
}

function fetchComments() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(['Comment 1', 'Comment 2']), 100);
  });
}

// Async function to demonstrate
(async function demonstrateErrorHandling() {
  console.log('=== Promise.all Example ===');
  
  // Promise.all - fails if ANY promise fails
  try {
    const [users, posts, comments] = await Promise.all([
      fetchUsers(),
      fetchPosts(),
      fetchComments()
    ]);
    console.log('All succeeded:', { users, posts, comments });
  } catch (error) {
    console.error('Promise.all failed:', error.message);
  }
  
  console.log('');
  console.log('=== Promise.allSettled Example ===');
  
  // Promise.allSettled - ALL promises complete
  const results = await Promise.allSettled([
    fetchUsers(),
    fetchPosts(),
    fetchComments()
  ]);
  
  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log('Request ' + index + ' succeeded:', result.value);
    } else {
      console.error('Request ' + index + ' failed:', result.reason.message);
    }
  });
  
  // Filter results
  const successful = results
    .filter(r => r.status === 'fulfilled')
    .map(r => r.value);
  
  const failed = results
    .filter(r => r.status === 'rejected')
    .map(r => r.reason.message);
  
  console.log('');
  console.log('Successful:', successful.length, 'requests');
  console.log('Failed:', failed.length, 'requests');
  console.log('Failed reasons:', failed);
})();

// Pattern for loading dashboard with partial failures
function loadDashboard() {
  return Promise.allSettled([
    fetchUsers(),
    fetchPosts(),
    fetchComments()
  ]).then(([userResult, postResult, commentResult]) => {
    return {
      users: userResult.status === 'fulfilled' ? userResult.value : [],
      posts: postResult.status === 'fulfilled' ? postResult.value : [],
      comments: commentResult.status === 'fulfilled' ? commentResult.value : []
    };
    // Dashboard loads with whatever data is available!
  });
}

loadDashboard().then(data => {
  console.log('');
  console.log('Dashboard data loaded:', data);
});

Console Output

Click "Run Code" to see output here...

Error Handling Best Practices

Do's and don'ts

✅ DO: Specific Error Messages

// Good - descriptive
throw new Error('User with ID 123 not found');

// Bad - vague
throw new Error('Error');

✅ DO: Log Errors Properly

try {
  await riskyOperation();
} catch (error) {
  console.error('Operation failed:', {
    message: error.message,
    stack: error.stack,
    timestamp: new Date(),
    userId: currentUser.id
  });
}

✅ DO: Provide Fallbacks

function getConfig() {
  try {
    return JSON.parse(localStorage.getItem('config'));
  } catch (error) {
    console.warn('Using default config');
    return DEFAULT_CONFIG; // Fallback
  }
}

❌ DON'T: Silent Failures

// Bad - swallows errors
try {
  importantOperation();
} catch (error) {
  // Nothing - error disappears!
}

// Good - log or handle
try {
  importantOperation();
} catch (error) {
  console.error('Failed:', error);
  notifyUser('Operation failed');
}

❌ DON'T: Catch and Rethrow Same Error

// Bad - pointless catch
try {
  operation();
} catch (error) {
  throw error; // Why catch at all?
}

// Good - add context
try {
  operation();
} catch (error) {
  throw new Error(`Operation failed: ${error.message}`);
}

Key Takeaways

🛡️

Try-Catch-Finally

Try: risky code
Catch: handle errors
Finally: cleanup (always runs)

🎯

Custom Errors

Extend Error class
Create meaningful error types
Add context and properties

⚡

Async Errors

Use try-catch with async/await
Use .catch() with promises
Promise.allSettled for multiple calls

📝

Best Practices

Specific error messages
Log errors properly
Provide fallbacks, never silent failures

Pro Tip

Always handle errors gracefully! Your users should never see cryptic error messages or crashed apps. Catch errors, log them, provide fallbacks, and keep the app running.

Previous Topic

Memoization

Caching function results for performance optimization.

Next Topic

Debugging Techniques

Console methods, breakpoints, and debugging strategies.

Ask a Question

Have a question about Error Handling? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Design Patterns

Error Handling

Gracefully handle errors with try-catch-finally

Find videos you like?

Save to resource drawer for future reference!

Error Handling: Expect the Unexpected

Error handling prevents your application from crashing when something goes wrong. Use try-catch-finally to gracefully handle errors and provide fallbacks!

Why Error Handling?

Errors will happen - network failures, invalid input, missing data. Handle them gracefully instead of crashing!

Try-Catch-Finally

Basic error handling syntax

❌ No Error Handling

// App crashes on error
function parseJSON(jsonString) {
  const data = JSON.parse(jsonString);
  return data;
}

// If invalid JSON, app crashes! 💥
parseJSON('invalid json');
// Uncaught SyntaxError

// Nothing after error executes
console.log('This never runs');

✅ With Error Handling

// App continues even if error occurs
function parseJSON(jsonString) {
  try {
    const data = JSON.parse(jsonString);
    return data;
  } catch (error) {
    console.error('Invalid JSON:', error.message);
    return null; // Fallback
  }
}

// Handles error gracefully
const result = parseJSON('invalid json');
// Logs: Invalid JSON: ...
console.log(result); // null

// Code continues to execute
console.log('App still running!');

Try-Catch-Finally Blocks

Complete error handling flow

javascript

code

DarkEditable

// Define a risky operation
function riskyOperation() {
  const random = Math.random();
  if (random < 0.5) {
    throw new Error('Operation failed!');
  }
  return 'Success!';
}

// Test it
readFile('data.txt');
readFile(''); // Will fail

Console Output

Click "Run Code" to see output here...

Custom Error Classes

Create meaningful error types

Custom Error Types

// Base Error class
class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = 'ValidationError';
  }
}

class NetworkError extends Error {
  constructor(message, statusCode) {
    super(message);
    this.name = 'NetworkError';
    this.statusCode = statusCode;
  }
}

class AuthenticationError extends Error {
  constructor(message) {
    super(message);
    this.name = 'AuthenticationError';
  }
}

// Usage
function validateAge(age) {
  if (typeof age !== 'number') {
    throw new ValidationError('Age must be a number');
  }
  if (age < 0 || age > 120) {
    throw new ValidationError('Age must be between 0 and 120');
  }
  return true;
}

// Handling specific errors
try {
  validateAge('twenty');
} catch (error) {
  if (error instanceof ValidationError) {
    console.log('Validation failed:', error.message);
  } else if (error instanceof NetworkError) {
    console.log('Network issue:', error.statusCode);
  } else {
    console.log('Unknown error:', error);
  }
}

Throwing Errors

When and how to throw errors

javascript

code

DarkEditable

// Throw built-in errors
function divide(a, b) {
  if (b === 0) {
    throw new Error('Cannot divide by zero');
  }
  return a / b;
}

function withdraw(account, amount) {
  if (amount > account.balance) {
    throw new InsufficientFundsError(account.balance, amount);
  }
  account.balance -= amount;
  return account.balance;
}

// Simpler synchronous example
const account = { balance: 100 };

Console Output

Click "Run Code" to see output here...

Async Error Handling

Handling errors in promises and async/await

Promise .catch()

// Using .catch()
fetch('/api/data')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Failed:', error);
  })
  .finally(() => {
    console.log('Request completed');
  });

// Multiple catches
Promise.resolve()
  .then(() => {
    throw new Error('Step 1 failed');
  })
  .catch(error => {
    console.log('Caught:', error.message);
    return 'recovered';
  })
  .then(result => {
    console.log(result); // 'recovered'
  });

Async/Await try-catch

// Using try-catch with async/await
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Failed:', error);
  } finally {
    console.log('Request completed');
  }
}

// Multiple async operations
async function processUser(id) {
  try {
    const user = await fetchUser(id);
    const profile = await fetchProfile(user.id);
    const posts = await fetchPosts(user.id);
    
    return { user, profile, posts };
  } catch (error) {
    console.error('Error:', error);
    return null;
  }
}

Promise.allSettled for Multiple Calls

Handle errors in parallel operations

javascript

code

DarkEditable

// Simulated async functions
function fetchUsers() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(['Alice', 'Bob']), 100);
  });
}

function fetchPosts() {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('Posts API down')), 100);
  });
}

function fetchComments() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(['Comment 1', 'Comment 2']), 100);
  });
}

loadDashboard().then(data => {
  console.log('');
  console.log('Dashboard data loaded:', data);
});

Console Output

Click "Run Code" to see output here...

Error Handling Best Practices

Do's and don'ts

✅ DO: Specific Error Messages

// Good - descriptive
throw new Error('User with ID 123 not found');

// Bad - vague
throw new Error('Error');

✅ DO: Log Errors Properly

try {
  await riskyOperation();
} catch (error) {
  console.error('Operation failed:', {
    message: error.message,
    stack: error.stack,
    timestamp: new Date(),
    userId: currentUser.id
  });
}

✅ DO: Provide Fallbacks

function getConfig() {
  try {
    return JSON.parse(localStorage.getItem('config'));
  } catch (error) {
    console.warn('Using default config');
    return DEFAULT_CONFIG; // Fallback
  }
}

❌ DON'T: Silent Failures

// Bad - swallows errors
try {
  importantOperation();
} catch (error) {
  // Nothing - error disappears!
}

// Good - log or handle
try {
  importantOperation();
} catch (error) {
  console.error('Failed:', error);
  notifyUser('Operation failed');
}

❌ DON'T: Catch and Rethrow Same Error

// Bad - pointless catch
try {
  operation();
} catch (error) {
  throw error; // Why catch at all?
}

// Good - add context
try {
  operation();
} catch (error) {
  throw new Error(`Operation failed: ${error.message}`);
}

Key Takeaways

🛡️

Try-Catch-Finally

Try: risky code
Catch: handle errors
Finally: cleanup (always runs)

🎯

Custom Errors

Extend Error class
Create meaningful error types
Add context and properties

⚡

Async Errors

Use try-catch with async/await
Use .catch() with promises
Promise.allSettled for multiple calls

📝

Best Practices

Specific error messages
Log errors properly
Provide fallbacks, never silent failures

Pro Tip

Always handle errors gracefully! Your users should never see cryptic error messages or crashed apps. Catch errors, log them, provide fallbacks, and keep the app running.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Memoization

Debugging Techniques

JavaScript Code Editor

Building Your Learning Module...

Error Handling

Error Handling: Expect the Unexpected

Why Error Handling?

❌ No Error Handling

✅ With Error Handling

Try-Catch-Finally Blocks

Custom Error Types

Throwing Errors

Promise .catch()

Async/Await try-catch

Promise.allSettled for Multiple Calls

✅ DO: Specific Error Messages

✅ DO: Log Errors Properly

✅ DO: Provide Fallbacks

❌ DON'T: Silent Failures

❌ DON'T: Catch and Rethrow Same Error

Key Takeaways

Try-Catch-Finally

Custom Errors

Async Errors

Best Practices

Pro Tip

Memoization

Debugging Techniques

JavaScript Code Editor

Error Handling

Error Handling: Expect the Unexpected

Why Error Handling?

❌ No Error Handling

✅ With Error Handling

Try-Catch-Finally Blocks

Custom Error Types

Throwing Errors

Promise .catch()

Async/Await try-catch

Promise.allSettled for Multiple Calls

✅ DO: Specific Error Messages

✅ DO: Log Errors Properly

✅ DO: Provide Fallbacks

❌ DON'T: Silent Failures

❌ DON'T: Catch and Rethrow Same Error

Key Takeaways

Try-Catch-Finally

Custom Errors

Async Errors

Best Practices

Pro Tip