JavaScript Fundamentals

Async Error Handling

Handle errors in promises and async/await code properly

Find videos you like?

Save to resource drawer for future reference!

Why Error Handling Matters

Async operations can fail - network issues, invalid data, server errors. Always handle errors to prevent crashes and provide good user experience!

Critical: Don't Ignore Errors

Unhandled errors can crash your app or leave it in a broken state. Always catch errors in async code!

Promise Error Handling with .catch()

Catch errors in promise chains

Chain .catch() at the End

Add .catch() to handle errors from any promise in the chain

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.log('Error:', error);
  });

Promise .catch() Examples

Handle errors in promise chains

javascript

code

DarkEditable

// Basic error handling
fetch('/api/user')
  .then(response => response.json())
  .then(user => {
    console.log('User loaded:', user.name);
  })
  .catch(error => {
    console.log('Failed to load user:', error);
    // Show error message to user
  });

// Catch handles ANY error in the chain
fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP error: ' + response.status);
    }
    return response.json();
  })
  .then(data => {
    if (!data.valid) {
      throw new Error('Invalid data');
    }
    console.log('Data:', data);
  })
  .catch(error => {
    // Catches errors from ANY step above
    console.log('Something went wrong:', error.message);
  });

// Multiple catches
fetch('/api/data')
  .then(response => response.json())
  .catch(error => {
    console.log('Parsing failed:', error);
    return { default: 'data' };  // Return fallback
  })
  .then(data => {
    console.log('Using data:', data);
  });

// Always use .finally() for cleanup
let isLoading = true;

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.log('Error:', error);
  })
  .finally(() => {
    isLoading = false;
    console.log('Request complete');
  });

Console Output

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

try/catch with async/await

Modern error handling

Wrap await in try/catch

Use try/catch to handle errors when using async/await

async function loadUser() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    console.log('User:', user);
  } catch (error) {
    console.log('Error:', error);
  }
}

try/catch with async/await

Clean error handling

javascript

code

DarkEditable

// Basic try/catch
async function fetchUser() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    return user;
  } catch (error) {
    console.log('Failed to fetch user:', error);
    return null;
  }
}

// Multiple operations
async function loadDashboard() {
  try {
    const user = await fetch('/api/user').then(r => r.json());
    const posts = await fetch('/api/posts').then(r => r.json());
    const stats = await fetch('/api/stats').then(r => r.json());
    
    return { user, posts, stats };
  } catch (error) {
    console.log('Dashboard load failed:', error);
    return null;
  }
}

// With finally for cleanup
async function saveData(data) {
  let loading = true;
  
  try {
    const response = await fetch('/api/save', {
      method: 'POST',
      body: JSON.stringify(data)
    });
    
    if (!response.ok) {
      throw new Error('Save failed');
    }
    
    console.log('Saved successfully');
    return true;
    
  } catch (error) {
    console.log('Save error:', error);
    return false;
    
  } finally {
    loading = false;
    console.log('Save operation complete');
  }
}

// Specific error handling
async function login(username, password) {
  try {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ username, password })
    });
    
    if (response.status === 401) {
      throw new Error('INVALID_CREDENTIALS');
    }
    
    if (response.status === 429) {
      throw new Error('TOO_MANY_ATTEMPTS');
    }
    
    if (!response.ok) {
      throw new Error('LOGIN_FAILED');
    }
    
    const user = await response.json();
    return user;
    
  } catch (error) {
    switch (error.message) {
      case 'INVALID_CREDENTIALS':
        console.log('Wrong username or password');
        break;
      case 'TOO_MANY_ATTEMPTS':
        console.log('Too many login attempts. Try later.');
        break;
      default:
        console.log('Login failed:', error);
    }
    return null;
  }
}

Console Output

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

Different Error Types

Network, parsing, validation errors

Handle Different Error Types

Network Errors

Connection failed, timeout, offline

HTTP Errors

404 not found, 500 server error, 401 unauthorized

Parsing Errors

Invalid JSON, corrupt data

Validation Errors

Business logic failures, invalid input

Handling Different Error Types

Identify and handle specific errors

javascript

code

DarkEditable

async function fetchData(url) {
  try {
    // 1. Network request
    const response = await fetch(url);
    
    // 2. Check HTTP status
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error('Resource not found');
      }
      if (response.status === 401) {
        throw new Error('Unauthorized');
      }
      if (response.status >= 500) {
        throw new Error('Server error');
      }
      throw new Error(`HTTP error: ${response.status}`);
    }
    
    // 3. Parse response
    let data;
    try {
      data = await response.json();
    } catch (parseError) {
      throw new Error('Invalid JSON response');
    }
    
    // 4. Validate data
    if (!data || !data.id) {
      throw new Error('Invalid data structure');
    }
    
    return data;
    
  } catch (error) {
    // Handle different error types
    if (error.message.includes('Failed to fetch')) {
      console.log('Network error - check connection');
    } else if (error.message === 'Unauthorized') {
      console.log('Please log in');
    } else if (error.message === 'Invalid JSON') {
      console.log('Server returned invalid data');
    } else {
      console.log('Error:', error.message);
    }
    
    return null;
  }
}

// Real-world: Form submission with detailed errors
async function submitForm(formData) {
  try {
    const response = await fetch('/api/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    });
    
    const result = await response.json();
    
    if (!response.ok) {
      if (result.errors) {
        // Validation errors from server
        console.log('Validation errors:', result.errors);
        return { success: false, errors: result.errors };
      }
      throw new Error(result.message || 'Submit failed');
    }
    
    return { success: true, data: result };
    
  } catch (error) {
    if (error.name === 'TypeError') {
      return { 
        success: false, 
        errors: ['Network error. Please check your connection.'] 
      };
    }
    
    return { 
      success: false, 
      errors: [error.message] 
    };
  }
}

Console Output

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

Retrying Failed Requests

Automatic retry with exponential backoff

Retry Pattern

Automatically retry failed requests with increasing delays

async function fetchWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url);
      return await response.json();
    } catch (error) {
      if (i === retries - 1) throw error;
      await delay(1000 * (i + 1));
    }
  }
}

Retry Pattern Implementation

Retry with exponential backoff

javascript

code

DarkEditable

// Helper: delay function
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// Simple retry
async function fetchWithRetry(url, maxRetries = 3) {
  let lastError;
  
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      console.log(`Attempt ${attempt} of ${maxRetries}`);
      const response = await fetch(url);
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      
      return await response.json();
      
    } catch (error) {
      lastError = error;
      console.log(`Attempt ${attempt} failed:`, error.message);
      
      // Don't wait after last attempt
      if (attempt < maxRetries) {
        const waitTime = 1000 * attempt;  // 1s, 2s, 3s
        console.log(`Waiting ${waitTime}ms before retry...`);
        await delay(waitTime);
      }
    }
  }
  
  throw new Error(`Failed after ${maxRetries} attempts: ${lastError.message}`);
}

// Exponential backoff
async function fetchWithBackoff(url, maxRetries = 3) {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url);
      return await response.json();
      
    } catch (error) {
      if (attempt === maxRetries) {
        throw error;
      }
      
      // Exponential backoff: 1s, 2s, 4s, 8s...
      const waitTime = Math.pow(2, attempt - 1) * 1000;
      await delay(waitTime);
    }
  }
}

// Retry only on specific errors
async function smartRetry(url, maxRetries = 3) {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url);
      
      // Don't retry on 4xx errors (client errors)
      if (response.status >= 400 && response.status < 500) {
        throw new Error(`Client error: ${response.status}`);
      }
      
      // Retry on 5xx errors (server errors)
      if (!response.ok) {
        throw new Error(`Server error: ${response.status}`);
      }
      
      return await response.json();
      
    } catch (error) {
      // Network errors are retryable
      const isNetworkError = error.message.includes('Failed to fetch');
      const isServerError = error.message.includes('Server error');
      
      if (!isNetworkError && !isServerError) {
        throw error;  // Don't retry client errors
      }
      
      if (attempt === maxRetries) {
        throw error;
      }
      
      await delay(1000 * attempt);
    }
  }
}

// Usage
fetchWithRetry('/api/data')
  .then(data => console.log('Success:', data))
  .catch(error => console.log('Failed:', error.message));

Console Output

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

Key Takeaways

Do This ✅

• Always use try/catch with await
• Always use .catch() with promises
• Check HTTP status codes
• Provide user-friendly error messages
• Use finally for cleanup

Avoid This ❌

• Don't ignore errors (unhandled rejections)
• Don't show technical errors to users
• Don't retry infinitely
• Don't catch errors without handling them
• Don't forget HTTP status checks

Error Handling Checklist

✓ Wrap async code in try/catch

✓ Add .catch() to promise chains

✓ Check response.ok before parsing

✓ Handle different error types specifically

✓ Show user-friendly error messages

✓ Log detailed errors for debugging

✓ Use finally for cleanup (loading states)

Golden Rule

Every async operation can fail. Always handle errors - your users will thank you!

Previous Topic

Async/Await

Clean asynchronous code with async functions and await keyword.

Next Topic

Call Stack

How JavaScript executes functions and manages the execution stack.

Ask a Question

Have a question about Async 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 Fundamentals

Async Error Handling

Handle errors in promises and async/await code properly

Find videos you like?

Save to resource drawer for future reference!

Why Error Handling Matters

Async operations can fail - network issues, invalid data, server errors. Always handle errors to prevent crashes and provide good user experience!

Critical: Don't Ignore Errors

Unhandled errors can crash your app or leave it in a broken state. Always catch errors in async code!

Promise Error Handling with .catch()

Catch errors in promise chains

Chain .catch() at the End

Add .catch() to handle errors from any promise in the chain

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.log('Error:', error);
  });

Promise .catch() Examples

Handle errors in promise chains

javascript

code

DarkEditable

// Always use .finally() for cleanup
let isLoading = true;

Console Output

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

try/catch with async/await

Modern error handling

Wrap await in try/catch

Use try/catch to handle errors when using async/await

async function loadUser() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    console.log('User:', user);
  } catch (error) {
    console.log('Error:', error);
  }
}

try/catch with async/await

Clean error handling

javascript

code

DarkEditable

Console Output

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

Different Error Types

Network, parsing, validation errors

Handle Different Error Types

Network Errors

Connection failed, timeout, offline

HTTP Errors

404 not found, 500 server error, 401 unauthorized

Parsing Errors

Invalid JSON, corrupt data

Validation Errors

Business logic failures, invalid input

Handling Different Error Types

Identify and handle specific errors

javascript

code

DarkEditable

Console Output

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

Retrying Failed Requests

Automatic retry with exponential backoff

Retry Pattern

Automatically retry failed requests with increasing delays

async function fetchWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url);
      return await response.json();
    } catch (error) {
      if (i === retries - 1) throw error;
      await delay(1000 * (i + 1));
    }
  }
}

Retry Pattern Implementation

Retry with exponential backoff

javascript

code

DarkEditable

// Helper: delay function
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// Usage
fetchWithRetry('/api/data')
  .then(data => console.log('Success:', data))
  .catch(error => console.log('Failed:', error.message));

Console Output

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

Key Takeaways

Do This ✅

• Always use try/catch with await
• Always use .catch() with promises
• Check HTTP status codes
• Provide user-friendly error messages
• Use finally for cleanup

Avoid This ❌

• Don't ignore errors (unhandled rejections)
• Don't show technical errors to users
• Don't retry infinitely
• Don't catch errors without handling them
• Don't forget HTTP status checks

Error Handling Checklist

✓ Wrap async code in try/catch

✓ Add .catch() to promise chains

✓ Check response.ok before parsing

✓ Handle different error types specifically

✓ Show user-friendly error messages

✓ Log detailed errors for debugging

✓ Use finally for cleanup (loading states)

Golden Rule

Every async operation can fail. Always handle errors - your users will thank you!

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

Async/Await

Call Stack

JavaScript Code Editor

Building Your Learning Module...

Async Error Handling

Why Error Handling Matters

Critical: Don't Ignore Errors

Chain .catch() at the End

Promise .catch() Examples

Wrap await in try/catch

try/catch with async/await

Handle Different Error Types

Network Errors

HTTP Errors

Parsing Errors

Validation Errors

Handling Different Error Types

Retry Pattern

Retry Pattern Implementation

Key Takeaways

Do This ✅

Avoid This ❌

Error Handling Checklist

Golden Rule

Async/Await

Call Stack

JavaScript Code Editor

Async Error Handling

Why Error Handling Matters

Critical: Don't Ignore Errors

Chain .catch() at the End

Promise .catch() Examples

Wrap await in try/catch

try/catch with async/await

Handle Different Error Types

Network Errors

HTTP Errors

Parsing Errors

Validation Errors

Handling Different Error Types

Retry Pattern

Retry Pattern Implementation

Key Takeaways

Do This ✅

Avoid This ❌

Error Handling Checklist

Golden Rule