📛 Error Handling

Panduan lengkap penanganan error di JavaScript untuk aplikasi yang lebih robust

📌 Elements

💡 Dasar Error Handling

Error handling adalah teknik untuk menangani dan merespons error yang terjadi selama eksekusi program. JavaScript menyediakan beberapa mekanisme untuk menangani error secara efektif.

error-basics.js
// Try-Catch Block
try {
  // Kode yang mungkin menghasilkan error
  JSON.parse('{invalid json}');
} catch (error) {
  console.error('Terjadi error:', error.message);
}

// Throw Error
function divide(a, b) {
  if (b === 0) {
    throw new Error('Pembagian dengan nol tidak diperbolehkan');
  }
  return a / b;
}

📝 Penjelasan Detail:

â€ĸ try-catch - Blok untuk menangkap dan menangani error
â€ĸ throw - Melempar error secara manual
â€ĸ Error - Constructor untuk membuat objek error
â€ĸ finally - Blok yang selalu dijalankan setelah try/catch
â€ĸ error.message - Property yang berisi pesan error

🛠ī¸ Features

error-features.js
// Custom Error
class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = 'ValidationError';
  }
}

// Error Handling di Async/Await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Gagal mengambil data');
    }
    return await response.json();
  } catch (error) {
    console.error('Error fetch:', error);
    throw error; // Re-throw error
  }
}

ℹī¸ Jenis Error Umum

JavaScript memiliki beberapa tipe error bawaan: SyntaxError, ReferenceError, TypeError, RangeError, URIError, dan EvalError.

📊 Basic Tables

error-types.js
// Tipe Error dan Penyebabnya
SyntaxError     // Kode JavaScript tidak valid
ReferenceError  // Referensi ke variabel/fungsi yang tidak ada
TypeError      // Operasi pada tipe data yang salah
RangeError     // Nilai di luar rentang yang valid
URIError       // Parameter fungsi encode/decode URI tidak valid
EvalError      // Error terkait fungsi eval() (tidak digunakan lagi)

// Property Objek Error
error.name     // Nama error (misal: "TypeError")
error.message  // Pesan error deskriptif
error.stack    // Stack trace (debugging)

📝 Penjelasan Detail:

â€ĸ SyntaxError - Terjadi saat ada kesalahan sintaks dalam kode
â€ĸ ReferenceError - Saat mencoba mengakses variabel/fungsi yang tidak terdefinisi
â€ĸ TypeError - Operasi pada tipe data yang tidak sesuai (misal memanggil null sebagai fungsi)
â€ĸ Error Custom bisa dibuat dengan extend class Error untuk kasus spesifik
â€ĸ Stack trace membantu melacak sumber error dalam kode

🚀 Advanced Table

advanced-error.js
// Error Boundaries (React)
class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    logErrorToService(error, info.componentStack);
  }
  render() {
    return this.props.children;
  }
}

// Global Error Handling
window.addEventListener('error', (event) => {
  sendErrorToAnalytics(event.error);
});

// Promise Rejection Handling
window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled rejection:', event.reason);
});

ℹī¸ Error Handling Level Tinggi

Error Boundaries di React menangkap error di komponen child. Global error handler menangkap error yang tidak tertangkap. Unhandled rejection handler untuk Promise yang gagal.

💡 Pro Tips

đŸŽ¯ Best Practices Error Handling

Tangkap error secara spesifik, gunakan custom error untuk domain bisnis, log error untuk debugging, dan beri feedback yang jelas ke pengguna.

error-tips.js
// ✅ Good - Error handling spesifik
try {
  processUserInput(input);
} catch (error) {
  if (error instanceof ValidationError) {
    showUserMessage(error.message);
  } else {
    logError(error);
    showGenericError();
  }
}

// ❌ Avoid - Menangkap semua error secara generik
try {
  someOperation();
} catch (error) {
  console.log('Terjadi error');
}

// ✅ Better - Error handling di async/await
async function loadData() {
  try {
    const data = await fetchData();
    return process(data);
  } catch (error) {
    handleDataError(error);
    throw error; // Re-throw untuk penanganan lebih lanjut
  }
}

📝 Penjelasan Detail:

â€ĸ Tangkap error secara spesifik - Gunakan instanceof untuk membedakan tipe error
â€ĸ Gunakan custom error - Buat kelas error khusus untuk domain aplikasi
â€ĸ Log error - Catat error untuk keperluan debugging dan monitoring
â€ĸ Beri feedback - Tampilkan pesan yang bermakna untuk pengguna
â€ĸ Jangan menelan error - Re-throw error yang tidak bisa ditangani dengan benar
â€ĸ Gunakan finally - Untuk kode pembersihan yang harus selalu dijalankan

🌐 Info

📚 Tools untuk Error Handling

Beberapa tools populer untuk error handling: Sentry (error tracking), Bugsnag, Rollbar, dan LogRocket untuk reproduksi error.

📝 Sumber Belajar Lanjutan:

â€ĸ MDN Error Handling - Dokumentasi resmi Mozilla
â€ĸ JavaScript.info Error Handling - Tutorial komprehensif
â€ĸ Node.js Error Handling - Best practices untuk backend
â€ĸ Error Handling in Async/Await - Pola untuk kode async
â€ĸ Production Error Monitoring - Tools untuk aplikasi production