|
| 1 | +--- |
| 2 | +title: "⛔️ Async Error Handling di TypeScript" |
| 3 | +date: "2023-12-30T05:20:00.000Z" |
| 4 | +last_edited_time: "2024-04-04T02:25:00.000Z" |
| 5 | +draft: false |
| 6 | +--- |
| 7 | + |
| 8 | +Pada project yang menggunakan bahasa Typescript atau Javascript modern, penggunaan promise dan sistem asinkronus sudah banyak digunakan secara umum. Fitur asinkron dalam pemrograman memungkinkan eksekusi beberapa tugas secara bersamaan tanpa harus menunggu tugas satu selesai sebelum tugas lainnya dimulai. |
| 9 | + |
| 10 | + |
| 11 | +Dalam konteks JavaScript dan TypeScript, salah cara utama untuk mengelola operasi asinkron adalah menggunakan Promise. Promise adalah objek yang merepresentasikan nilai yang mungkin akan tersedia di masa depan, atau mungkin tidak tersedia sama sekali. Ide dasar di balik Promise adalah bahwa suatu operasi asinkron dapat memiliki dua hasil: berhasil atau gagal. |
| 12 | + |
| 13 | + |
| 14 | +Pada artikel ini, akan dibahas konsep untuk error handling dalam kode asinkronus menggunakan TypeScript. Pada implementasinya akan menggunakan `async/await` untuk membuat kode lebih mudah dibaca dan strategi untuk menangani kesalahan yang muncul selama operasi asinkron. |
| 15 | + |
| 16 | + |
| 17 | +### Kode Error Handling |
| 18 | + |
| 19 | + |
| 20 | +```typescript |
| 21 | +type TryPromiseReturn<T, U> = Promise<[U, undefined] | [null, T]>; |
| 22 | + |
| 23 | +function tryPromise<T, U extends Error>(promiseHandle: Promise<T>): TryPromiseReturn<T, U> { |
| 24 | + return promiseHandle |
| 25 | + .then<[null, T]>((data: T) => [null, data]) |
| 26 | + .catch<[U, undefined]>((err: U) => [err, undefined]); |
| 27 | +} |
| 28 | + |
| 29 | +export { tryPromise }; |
| 30 | +``` |
| 31 | + |
| 32 | + |
| 33 | +Kode diatas merupakan function di typescript yang digunakan untuk mengatasi error. Pada function diatas didefinisikan `tryPromise` dengan parameter `Promise<T>` dengan tipe generic sehingga dapat menerima semua return type promise yang dimasukkan pada parameternya. |
| 34 | + |
| 35 | + |
| 36 | +Kemudian di dalam function `tryPromise` dilakukan handling promise seperti pada biasanya menggunakan callback then dan catch, callback then digunakan ketika promise berhasil dijalankan dan tidak ada error di dalamnya. Callback ini menggunakan paramter data dengan tipe generic turunan dari argument `Promise<T>` sehingga tipenya akan sama dengan return dari hasil promiseHandle. |
| 37 | + |
| 38 | + |
| 39 | +Jika promise berhasil maka akan dikembalikan keluaran berbentuk array format array dengan hasil kembalian seperti dibawah |
| 40 | + |
| 41 | + |
| 42 | +→ Kondisi sukses |
| 43 | + |
| 44 | + |
| 45 | +`[error: null, data: ...]` |
| 46 | + |
| 47 | +→ Kondisi Error |
| 48 | + |
| 49 | + |
| 50 | +`[error: ..., data:null]` |
| 51 | + |
| 52 | + |
| 53 | +Data merupakan array dengan index ke [1] sedangkan error berada pada array dengan index ke [0] dengan struktur seperti diatas dengan mudah data array dapat dilakukan destructuring menggunakan fungsi destruktur array pada javascript dan dapat langsung disimpan pada variable yang akan digunakan. |
| 54 | + |
| 55 | + |
| 56 | +### Penggunaan Kode |
| 57 | + |
| 58 | + |
| 59 | +Ada skenario dimana sebuah program melakukan request ke external API untuk mendapatkan data json. Pada proses yang dijalankan banyak sekali error yang akan dihadapi maupun error yang tidak terduga yang dapat terjadi sewaktu waktu seperti: |
| 60 | + |
| 61 | +- Koneksi gagal sehingga request tidak terkirim |
| 62 | +- HTTP 500 Internal Server Error |
| 63 | +- Gateway Timeout |
| 64 | +- Invalid Json |
| 65 | +- dll |
| 66 | + |
| 67 | +→ Handling error menggunakan Try Catch ❌ |
| 68 | + |
| 69 | + |
| 70 | +```typescript |
| 71 | +import { tryPromise } from "../../lib/utils/helpers"; |
| 72 | + |
| 73 | +async function fetchData(query: string): Promise<object | null> { |
| 74 | + const fetchUrl = `/api/data?q=${encodeURIComponent(query)}`; |
| 75 | + |
| 76 | + let fetchJson = null; |
| 77 | + |
| 78 | + try { |
| 79 | + const fetchCtx = await fetch(fetchUrl, { |
| 80 | + method: "GET", |
| 81 | + mode: "cors", |
| 82 | + credentials: "include", |
| 83 | + body: null, |
| 84 | + }); |
| 85 | + |
| 86 | + if (!fetchCtx.ok) { |
| 87 | + const fetchStatus = fetchCtx.statusText; |
| 88 | + console.log(fetchStatus); |
| 89 | + return null; |
| 90 | + } |
| 91 | + |
| 92 | + fetchJson = await fetchCtx.json(); |
| 93 | + |
| 94 | + } catch (err) { |
| 95 | + console.log(err); |
| 96 | + } |
| 97 | + |
| 98 | + return fetchJson; |
| 99 | +} |
| 100 | +``` |
| 101 | + |
| 102 | + |
| 103 | +Penggunaan error handling menggunakan try catch hasilnya akan mengcover seluruh blok pada kode. Dengan menggunakan try catch kita dipaksa untuk memasukkan seluruh blok kode di dalam statement tersebut akhirnya kode yang dihasilkan menjadi susah untuk dimaintain dan susah untuk dibaca, karena bisa saja error terjadi di bagian kode mana saja dan tidak ada handling spesifik untuk function tertentu. |
| 104 | + |
| 105 | + |
| 106 | +→ Handling error menggunakan tryPromise ✅ |
| 107 | + |
| 108 | + |
| 109 | +```typescript |
| 110 | +import { tryPromise } from "../../lib/utils/helpers"; |
| 111 | + |
| 112 | +async function fetchData(query: string): Promise<object | null> { |
| 113 | + const fetchUrl = `/api/data?q=${encodeURIComponent(query)}`; |
| 114 | + |
| 115 | + const [errFetchCtx, fetchCtx] = await tryPromise( |
| 116 | + fetch(fetchUrl, { |
| 117 | + method: "GET", |
| 118 | + mode: "cors", |
| 119 | + credentials: "include", |
| 120 | + body: null, |
| 121 | + }) |
| 122 | + ); |
| 123 | + |
| 124 | + if (errFetchCtx) { |
| 125 | + console.log("Error when executing fetch ", errFetchCtx); |
| 126 | + return null; |
| 127 | + } |
| 128 | + |
| 129 | + if (!fetchCtx.ok) { |
| 130 | + const fetchStatus = fetchCtx.statusText; |
| 131 | + console.log(fetchStatus); |
| 132 | + return null; |
| 133 | + } |
| 134 | + |
| 135 | + const [errFetchJson, fetchJson] = await tryPromise(fetchCtx.json()); |
| 136 | + |
| 137 | + if (errFetchJson) { |
| 138 | + console.log("Error when parsing JSON response"); |
| 139 | + return null; |
| 140 | + } |
| 141 | + |
| 142 | + return fetchJson; |
| 143 | +} |
| 144 | +``` |
| 145 | + |
| 146 | + |
| 147 | +Jika function tryPromise digunakan, maka handling error dapat dilakukan pada setiap function yang akan dipanggil. Sehingga kode yang ditulis akan mudah terbaca, selain itu akan terlihat jelas dimana function tersebut dipanggil dan dimana error dari function tersebut akan terjadi. |
| 148 | + |
| 149 | + |
| 150 | +Sehingga kita tidak perlu memasukkan seluruh blok kode ke dalam function try catch hanya untuk menghandle satu error yang ada pada function, serta kondisi error handling tiap promise dapat berbeda beda dan bisa disesuaikan sesuai kebutuhan apakah error tersebut perlu penanganan lanjutan pada saat pengecekannya. |
| 151 | + |
| 152 | + |
| 153 | +### Penutup |
| 154 | + |
| 155 | + |
| 156 | +Ada banyak cara untuk menangani error pada program, entah itu error atau tidak karena hanya programmer yang dapat mendefinisikannya. Pada sejatinya error adalah sebuah value / nilai dan sebagai programmer adalah bagaimana kita menangani error tersebut atau mengabaikannya. Untuk solusi tryPromise memang banyak terinsipirasi dari penanganan error dari bahasa Go karena dalam Golang penanganan error merupakan hal yang dibuat secara simple tidak perlu membutuhkan blok penanganan yang lebih lanjut. Error pada golang dihandle layaknya variable adalah sebuah nilai yang di definisikan oleh programmer. |
| 157 | + |
| 158 | + |
| 159 | +Tidak ada cara yang sepenuhnya benar untuk menangani error, penggunaan try catch akan lebih sesuai pada use case tertentu sehingga penggunaan tryPromise malah akan mempersulit. Oleh karena itu, gunakanlah cara dan metode sesuai kebuhan anda. |
| 160 | + |
| 161 | + |
| 162 | +### Referensi |
| 163 | + |
| 164 | + |
| 165 | +[https://go.dev/blog/error-handling-and-go](https://go.dev/blog/error-handling-and-go) |
| 166 | + |
| 167 | + |
| 168 | +[https://github.com/scopsy/await-to-js](https://github.com/scopsy/await-to-js) |
0 commit comments