Teknik Penanganan Kesalahan Tingkat Lanjut dalam TypeScript

Penanganan kesalahan yang efektif sangat penting untuk membangun aplikasi TypeScript yang tangguh. Selain blok try-catch dasar, TypeScript menyediakan beberapa teknik lanjutan untuk menangani kesalahan dengan baik dan memastikan keandalan kode. Artikel ini membahas beberapa strategi penanganan kesalahan tingkat lanjut ini.

1. Kelas Kesalahan Kustom

Membuat kelas kesalahan khusus memungkinkan Anda merepresentasikan berbagai jenis kesalahan dengan lebih akurat. Kesalahan khusus dapat mencakup properti atau metode tambahan, yang dapat membantu dalam mengidentifikasi dan menangani masalah tertentu.

class CustomError extends Error {
  constructor(public message: string, public code: number) {
    super(message);
    this.name = 'CustomError';
  }
}

function throwError() {
  throw new CustomError('Something went wrong', 500);
}

try {
  throwError();
} catch (error) {
  if (error instanceof CustomError) {
    console.error(`Error: ${error.message}, Code: ${error.code}`);
  } else {
    console.error('Unexpected error:', error);
  }
}

Dalam contoh ini, CustomError memperluas kelas bawaan Error dan menambahkan properti code untuk menentukan kode kesalahan.

2. Penanganan Kesalahan dalam Kode Asinkron

Kode asinkron sering kali memerlukan penanganan khusus untuk kesalahan. Menggunakan blok async dan await bersama dengan blok try-catch dapat menyederhanakan penanganan kesalahan dalam operasi asinkron.

async function fetchData(url: string): Promise {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new CustomError('Failed to fetch data', response.status);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    if (error instanceof CustomError) {
      console.error(`Error: ${error.message}, Code: ${error.code}`);
    } else {
      console.error('Unexpected error:', error);
    }
  }
}

fetchData('https://api.example.com/data');

Contoh ini menunjukkan penanganan kesalahan dari panggilan fetch asinkron menggunakan async, await, dan try-catch.

3. Batasan Kesalahan dalam React dengan TypeScript

Saat bekerja dengan React dan TypeScript, batasan kesalahan membantu menangkap kesalahan dalam pohon komponen dan menampilkan UI fallback. Menerapkan batasan kesalahan dengan TypeScript memastikan keamanan tipe dan penanganan kesalahan yang tepat.

import React, { Component, ErrorInfo } from 'react';

interface Props {}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(): State {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    console.error('Error caught by boundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Dalam contoh React ini, komponen ErrorBoundary menangkap kesalahan pada komponen anaknya dan menampilkan UI fallback jika kesalahan terjadi.

4. Menggunakan Type Guard untuk Jenis Kesalahan

Pelindung tipe membantu mempersempit jenis kesalahan dalam TypeScript. Ini khususnya berguna saat menangani kesalahan dengan tipe yang berbeda atau dari berbagai sumber.

function isCustomError(error: any): error is CustomError {
  return error instanceof CustomError;
}

try {
  throw new CustomError('Example error', 400);
} catch (error) {
  if (isCustomError(error)) {
    console.error(`CustomError: ${error.message}, Code: ${error.code}`);
  } else {
    console.error('Unknown error:', error);
  }
}

Fungsi isCustomError adalah penjaga tipe yang membantu menentukan apakah kesalahan yang tertangkap merupakan contoh dari CustomError.

5. Penanganan Kesalahan Terpusat

Untuk aplikasi besar, penanganan kesalahan secara terpusat dapat menyederhanakan manajemen kesalahan dan memastikan konsistensi. Hal ini dapat dilakukan dengan menggunakan middleware di Express.js atau penangan kesalahan global di kerangka kerja lain.

import express, { Request, Response, NextFunction } from 'express';

const app = express();

app.use((err: any, req: Request, res: Response, next: NextFunction) => {
  console.error('Centralized Error:', err.message);
  res.status(500).send('Internal Server Error');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Contoh ini menunjukkan penanganan kesalahan terpusat untuk aplikasi Express.js. Penanganan ini menangkap semua kesalahan dan merespons dengan pesan generik.

Kesimpulan

Teknik penanganan kesalahan tingkat lanjut dalam TypeScript meningkatkan ketahanan aplikasi Anda dengan menyediakan kontrol lebih besar atas manajemen kesalahan. Kelas kesalahan kustom, penanganan kesalahan asinkron, penggunaan batasan kesalahan dalam React, pengamanan tipe, dan penanganan kesalahan terpusat merupakan strategi penting untuk manajemen kesalahan yang efektif. Menerapkan teknik ini akan menghasilkan kode yang lebih mudah dirawat dan dapat diandalkan.