DEV Community: Rafli Dewanto

Hydration Error di Next.js & Cara Mengatasinya

Rafli Dewanto — Tue, 16 Jan 2024 09:23:47 +0000

Dalam dunia web development, rendering pattern/architecture adalah salah satu hal yang harus kita pahami sebagai software engineer. Next.js, adalah salah satu react framework yang mendukung beberapa rendering pattern, salah satunya adalah Server-Side Rendering.

Namun ketika menggunakan rendering pattern yang satu ini, terkadang kita mendapati unexpected behaviour seperti layout yang berantakan ataupun konten yang tidak sesuai, hal ini disebut dengan hydration error.

Lalu bagaimana hal ini bisa terjadi? Sebelum masuk ke pembahasan kita perlu memahami terlebih dahulu bagaimana Server-Side Rendering bekerja.

Penjelasan:

1. User request: pengguna mengirim permintaan ke server.

2. Server merender halaman: Server menerima request dan merender halaman React menggunakan JavaScript di sisi server.

3. Mengirimkan HTML: Server mengirimkan HTML yang telah dirender ke browser klien.

4. Browser memuat halaman: Browser memuat HTML dan mulai menjalankan JavaScript.

5. React berjalan: React mulai berjalan di sisi klien.

6. React merender ulang: React merender ulang halaman untuk membuat virtual DOM.

7. React membandingkan HTML: React membandingkan virtual DOM dengan DOM di sisi browser.

8. Hydration Success: Jika kedua DOM cocok, hydration berhasil dan halaman siap untuk interaksi pengguna.

9. Hydration Error: Jika terdapat ketidakcocokan, React menghasilkan hydration error, menunjukkan kemungkinan masalah dalam proses rendering.

Bayangkan Anda sedang memesan pembangunan rumah:

1. Blueprint (Rendering Sisi Server):

Arsitek membuat blueprint (HTML) terperinci di kantornya, mewakili struktur dan tata letak rumah.
Blueprint ini dikirim ke tim konstruksi (browser).

2. Konstruksi Dimulai (Client-side hydration):

Tim konstruksi mulai membangun rumah berdasarkan blueprint, meletakkan pondasi, memasang dinding rangka,dan menambahkan perlengkapan.
Proses ini mencerminkan browser yang merender HTML menjadi halaman visual.

3. Hydration Error (Material Bangunan Tidak Sesuai):

Tiba-tiba, tim menyadari mereka telah menerima beberapa bahan bangunan yang salah yang tidak sesuai dengan spesifikasi blueprint.
Mungkin jendelanya ukurannya salah, atau ubin atap tidak sejajar dengan kusen.
Ketidakkonsistenan ini mewakili hydration error dalam pengembangan web.

4. Konsekuensi Error:

Jika tim terus membangun dengan bahan yang tidak sesuai, struktur rumah akan berantakan.
Pintu mungkin tidak menutup dengan benar, jendela mungkin bocor, dan integritas keseluruhan rumah bisa terganggu.
Demikian pula, kesalahan hidrasi dalam SSR dapat menyebabkan gangguan visual, fungsi yang rusak, atau bahkan kerusakan halaman web secara keseluruhan.

5. Mengatasi Kesalahan (Memperbaiki Material dan Membangun Ulang):

Untuk memperbaiki masalah, tim perlu:

Mendapatkan bahan yang tepat yang sesuai dengan blueprint.
Membongkar dan membangun kembali bagian rumah yang terkena dampak dengan hati-hati.

Dalam pengembangan web, ini melibatkan:

Mengidentifikasi akar penyebab ketidakcocokan hidrasi.
Menyesuaikan HTML di server atau JavaScript di klien untuk memastikan konsistensi.

6. Pencegahan (Komunikasi Jelas dan Pemeriksaan Kualitas):

Untuk mencegah kesalahan seperti itu di masa depan, arsitek dan tim konstruksi harus:

Berkomunikasi dengan jelas dan menyeluruh tentang blueprint dan material.
Menerapkan pemeriksaan kualitas untuk menangkap ketidakkonsistenan sejak dini.

Dalam pengembangan web, ini diterjemahkan menjadi:

Pengujian dan debugging menyeluruh untuk mengidentifikasi potensi masalah hidrasi.
Menggunakan praktik terbaik untuk SSR dan hidrasi untuk meminimalkan risiko.

Jadi hydration mengacu pada proses meng-"attach" interaktivitas dan fungsionalitas seperti event listener ke konten HTML statis. Dalam konteks Next.js, hydration melibatkan pengambilan halaman HTML yang dirender oleh server dan meningkatkannya dengan interaktivitas di sisi klien.

Hydration error terjadi ketika ada perbedaan antara HTML yang dihasilkan pada server dan HTML yang dihasilkan pada sisi klien (client-side) setelah aplikasi dihydrate. Hydration merupakan proses di mana React mencoba mengaitkan dan mengaktifkan kembali event listeners, state, dan properti lainnya ke elemen HTML yang telah dirender oleh server.

Mungkin kalian bertanya, jika react melakukan re-render component tree dengan virtual dom dengan menggunakan konten html dari server sebagai starting point, lalu bagaimana bisa ada perbedaan konten antara server dan client?

Meskipun React menggunakan HTML yang di-render oleh server sebagai titik awal, beberapa faktor dapat menyebabkan perbedaan yang menyebabkan kesalahan hidrasi:

1. Asynchronous data fetching

Jika data diambil secara asinkron di sisi klien (misalnya, setelah HTML yang di-render server dikirim), virtual DOM mungkin berisi konten yang berbeda dengan HTML yang di-render server.

Contoh: Sebuah komponen merender daftar item yang diambil dari API. HTML yang dirender di server mungkin menampilkan daftar kosong, tetapi pengambilan di sisi klien mengisi daftar tersebut, sehingga menyebabkan ketidaksesuaian.

2. Konten dan State Dinamis

Komponen yang bergantung pada interaksi pengguna, API peramban, atau faktor dinamis lainnya dapat menyebabkan ketidaksesuaian.

Contoh: Komponen dengan pengatur waktu atau komponen yang menggunakan window.innerWidth untuk merender konten secara conditional mungkin berbeda antara server dan klien.

3. Third-Party library

Beberapa library mungkin menyuntikkan konten atau memodifikasi DOM dengan cara yang tidak direplikasi di server.

Contoh: Library yang menambahkan tombol share social media mungkin menyisipkannya setelah hidrasi, sehingga menyebabkan ketidaksesuaian.

4. Ketidakkonsistenan Rendering

Bug pada kode React atau ketidakkonsistenan dalam logika rendering dapat menyebabkan perbedaan pada HTML yang dihasilkan.

Contoh: Sebuah komponen yang merender konten secara kondisional berdasarkan props dapat berperilaku berbeda pada server dan klien karena logika yang salah.

5. Environment Server dan Klien yang Tidak Sesuai

Perbedaan environtment Node.js dan browser (misalnya, variabel global, API) dapat menyebabkan ketidakkonsistenan.

Contoh: Menggunakan window.localStorage di server mungkin tidak berfungsi seperti yang diharapkan, sehingga menyebabkan perbedaan rendering.

Untuk memudahkan kita dalam menemukan ketidakcocokan konten kita bisa menggunakan library dari builder.io yang akan memudahkan kita dalam menemuka perbedaan konten dari server dan client.

Pertama kita perlu menginstall dulu librarynya

npm install @builder.io/react-hydration-overlay

Lalu kita membungkus aplikasi kita dengan component dari react-hydration-overlay

import { HydrationOverlay } from "@builder.io/react-hydration-overlay";

const App = () => {
  return (
    <HydrationOverlay>
      <YourApp />
    </HydrationOverlay>
  );
};

Terakhir kita juga perlu menambahkan beberapa konfigurasi ke next config

const {
  withHydrationOverlay,
} = require("@builder.io/react-hydration-overlay/next");

/** @type {import('next').NextConfig} */
const nextConfig = {
  /** your config here */
};

module.exports = withHydrationOverlay({
  /**
   * Optional: `appRootSelector` is the selector for the root element of your app. By default, it is `#__next` which works
   * for Next.js apps with pages directory. If you are using the app directory, you should change this to `main`.
   */
  appRootSelector: "main",
})(nextConfig);

Mengatasi hydration error di Next.js sangat penting untuk memastikan pengalaman pengguna yang mulus dan optimal. Dengan memahami kesalahan umum dan menerapkan best practice, kita dapat mencegah kesalahan hidrasi dan meningkatkan kinerja aplikasi mereka secara keseluruhan.

Sources:

Model State Management di Ekosistem React

Rafli Dewanto — Sat, 09 Dec 2023 17:23:12 +0000

Konsep state management memiliki peran kunci dalam mengelola data dan state aplikasi dengan efisien. Saat pertama kali mempelajari React.js, banyak orang merasa asing dengan state management, dan sering kali mendengar istilah "React & Redux" sebagai pasangan yang tak terpisahkan.

Pertanyaan mengapa React selalu dikaitkan dengan Redux, jawabannya sederhana: Redux adalah pilihan yang populer dan kuat untuk menangani state management pada aplikasi react. Melalui pemanfaatan Redux, developer dapat dengan mudah mengelola state aplikasi secara terpusat dan mempermudah alur kerja pengembangan. dan sebelum kita masuk ke macam-macam model state management di react, mari kita bahas mengenai state management.

Apa itu state management?

State management merujuk pada cara mengelola dan menyimpan informasi atau data dalam aplikasi. Setiap kali kita bekerja dengan UI yang dinamis, di mana komponen-komponen dapat berinteraksi dan merespon perubahan, kita perlu memiliki cara untuk menyimpan dan memperbarui informasi yang relevan.

Secara sederhana, state management adalah cara aplikasi menyimpan dan mengelola data agar dapat diakses dengan konsisten di seluruh komponen.

State management is nothing more than patterns to make it "easier" for us to change state - crinkles.dev

Dalam aplikasi React, setiap komponen dapat memiliki state sendiri, yang berisi data yang berubah seiring waktu. Namun, ketika aplikasi menjadi lebih kompleks, terutama dengan banyak komponen bersarang atau berbagi data, state management dapat menjadi tantangan.

Misal dalam konteks aplikasi e-commerce, state management menjadi krusial untuk menyediakan pengalaman pengguna yang lancar dan terkoordinasi. Sebagai contoh, pertimbangkan fitur penambahan produk ke keranjang belanja dan alur proses checkout. Pertama-tama, perlu ada suatu cara untuk menyimpan informasi mengenai produk, seperti nama, harga, dan stoknya. Inilah yang disebut sebagai state produk. Setiap kali pengguna menambahkan produk ke dalam keranjang, sistem perlu memantau keranjang belanja dengan detail produk dan kuantitasnya. Oleh karena itu, kita memerlukan state khusus untuk menyimpan informasi keranjang belanja.

Dalam aplikasi ini, proses penambahan produk ke keranjang dilakukan dengan memperbarui state produk dan state keranjang belanja secara bersamaan. Saat pengguna menambahkan suatu produk, informasi produk tersebut ditambahkan ke dalam keranjang belanja, dan stok produk dikurangi untuk mencerminkan pembelian. Dengan demikian, state management memainkan peran kunci dalam menjaga konsistensi dan integritas data di seluruh aplikasi.

Manfaat utama dari pendekatan ini adalah menghindari ketidakselarasan data antar komponen dan memastikan bahwa perubahan satu bagian dari aplikasi secara otomatis tercermin di bagian lainnya. Dengan adanya state management yang baik, kita dapat memberikan pengalaman pengguna yang mulus, di mana informasi keranjang belanja tetap konsisten dan terkini. Ini menciptakan dasar yang kuat untuk mengembangkan fitur-fitur lanjutan seperti proses checkout dengan memanfaatkan state yang terorganisir dengan baik.

Dengan pemahaman tentang pentingnya state management, saatnya kita bahas berbagai model atau jenis state management yang dapat diterapkan dalam pengembangan dengan React.

1. Uni-directional (e.g., Redux, Zustand)

Source: toptal

Dalam model uni-directional state management, data mengalir dalam satu arah, umumnya mengikuti arsitektur uni-directional data flow (UDF). Actions meng-trigger perubahan state, dan state diperbarui melalui pure function (reducers).

Karakteristik:

Penyimpanan terpusat: Seluruh state aplikasi disimpan dalam satu penyimpanan terpusat.
Imutabilitas: state umumnya bersifat immutable, dan perubahan dilakukan melalui pembuatan objek state baru. Dalam pola state management ini, struktur unidireksional memastikan bahwa setiap perubahan state diinisiasi oleh aksi dan direspons oleh pure function yang menghasilkan state baru.

Redux

// actions
const tambah = () => ({ type: "TAMBAH" });
const kurang = () => ({ type: "KURANG" });

// reducer
const counterReducer = (state = 0, action) => {
    switch (action.type) {
        case "TAMBAH":
            return state + 1;
        case "KURANG":
            return state - 1;
        default:
            return state;
    }
};

// store
import { createStore } from "redux";
const store = createStore(counterReducer);

// App
import React from "react";
import { useSelector, useDispatch } from "react-redux";

const App = () => {
    const count = useSelector((state) => state);
    const dispatch = useDispatch();

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => dispatch(tambah())}>Tambah</button>
            <button onClick={() => dispatch(kurang())}>Kurang</button>
        </div>
    );
};

Zustand

import { create } from 'zustand'

type Store = {
  count: number
  inc: () => void
}

const useStore = create<Store>()((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, inc } = useStore()
  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}

Perbedaan redux & zustand

Secara konseptual, Zustand dan Redux sangat mirip, keduanya didasarkan pada immutable state model. Namun, Redux mengharuskan kita membungkus aplikasi dengan context provider (React Context), zustand tidak.

2. Bi-directional (e.g., MobX, Valtio)

Source: toptal

State management bi-direksional memungkinkan aliran data yang lebih fleksibel, di mana perubahan dalam state dapat dipropagasi ke kedua arah. Hal ini sering terkait dengan reactive programming.

Karakteristik:

Pembaruan reaktif: Perubahan dalam state secara otomatis dapat meng-trigger pembaruan dalam UI, dan sebaliknya.
Observables: Properti state direpresentasikan sebagai observables, yang dapat di-observe untuk perubahan.

State management bi-direksional, seperti yang diimplementasikan dalam MobX dan Valtio, memperkenalkan dinamika yang lebih kompleks dalam alur data aplikasi. Pembaruan reaktif memungkinkan perubahan state secara langsung mencerminkan perubahan dalam antarmuka pengguna, dan sebaliknya, menciptakan keterkaitan erat antara model dan tampilan. Observables menjadi inti dari pendekatan ini, memungkinkan pemantauan yang efisien terhadap perubahan dalam state, sehingga respons terhadap perubahan dapat terjadi dengan cepat dan efektif. Pendekatan bi-direksional cocok untuk aplikasi yang membutuhkan interaksi yang dinamis dan cepat antara state dan UI aplikasi.

Mobx

// stores/counter.js
import { makeAutoObservable } from "mobx";

class CounterStore {
  value = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.value += 1;
  }

  decrement() {
    this.value -= 1;
  }
}

export default CounterStore;

// index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "mobx-react";
import App from "./App";
import CounterStore from "./stores/counter";

ReactDOM.render(
  <Provider counter={new CounterStore()}>
    <App />
  </Provider>,
  document.getElementById("root")
);

// App.js
import React from "react";
import { inject, observer } from "mobx-react";

const App = inject((stores) => ({ counter: stores.counter }))(
  observer(({ counter }) => {
    return (
      <div>
        <div>
          <button onClick={() => counter.increment()}>Increment</button>
          <span>{counter.value}</span>
          <button onClick={() => counter.decrement()}>Decrement</button>
        </div>
      </div>
    );
  })
);

export default App;

3. Atomic (e.g., Jotai, Recoil)

Dikutip dari dokumentasi jotai,

Build state by combining atoms and renders are automatically optimized based on atom dependency. This solves the extra re-render issue of React context, eliminates the need for memoization, and provides a similar developer experience to signals while maintaining a declarative programming model.

State management atomic melibatkan pemecahan state menjadi bagian-bagian kecil independen yang disebut sebagai atom. Setiap atom dapat dimodifikasi secara independen, dan komponen-komponen dapat subscribe pada atom-atom tertentu untuk mendapatkan value terbaru. Sederhananya state management atomic menggunakan atom sebagai satu sumber state dan kita bisa menggunakannya seperti hook useState pada react namun kita bisa share state/atom tersebut ke komponen lain tanpa melakukan prop drilling. Pendekatan ini menggabungkan pattern state component dan global store seperti redux.

Karakteristik:

Atom: Unit independen dari state yang dapat diperbarui secara individual.
Selectors: Mekanisme untuk "menurunkan" nilai atau menyusun state dari atom-atom.

Recoil

// atoms.js
import { atom } from "recoil";

export const usernameState = atom({
    key: "usernameState",
    default: "Guest",
});

// App.js
import React from "react";
import { useRecoilState } from "recoil";
import { usernameState } from "./atoms";

const App = () => {
    const [username, setUsername] = useRecoilState(usernameState);

    return (
        <div>
            <p>Welcome, {username}!</p>
            <input
                type='text'
                value={username}
                onChange={(e) => setUsername(e.target.value)}
            />
        </div>
    );
};

Jotai

const priceAtom = createAtom(15);

const discountAtom = createAtom(10);

// derived state
const discountedPriceAtom = createAtom((get) => get(priceAtom) / 100 * get(discountAtom));

const Header = () => {
  const [price, setPrice] = useAtom(priceAtom);
  const [discountedPriceAtom] = useAtom(discountedPriceAtom);
  ...
}

4. Event-driven (e.g., Effector, Storeon, Eventrix)

Event-driven state management memperlakukan update state sebagai stream of events. Hal ini sering digunakan dalam skenario di mana perubahan bersifat terus-menerus atau asinkron.

Karakteristik:

Event streams: Perubahan state direpresentasikan sebagai aliran event yang kontinu.
Asynchronous updates: Pembaruan state dapat terjadi secara asinkron sebagai respons terhadap event.

Pendekatan state management berbasis event, seperti yang diimplementasikan dalam Effector dan Storeon, melibatkan state sebagai serangkaian event yang berkelanjutan. Stream of events menciptakan model yang sangat responsif terhadap perubahan, memungkinkan pembaruan state untuk terjadi secara asinkron dan efisien. Pendekatan ini berguna dalam skenario di mana perubahan state tidak terbatas pada pembaruan yang terputus-putus, melainkan mengalir secara berkesinambungan/kontinu. Oleh karena itu, event-driven state management cocok untuk aplikasi yang mengandalkan perubahan dinamis dan asinkron yang kontinu, seperti aplikasi real-time atau sistem yang melibatkan banyak interaksi pengguna.

Effector

const fooChange = createEvent();
const fooValue = createStore(4).on(fooChange, (_, e) => +e.currentTarget.value);

const barChange = createEvent();
const barValue = createStore(4).on(barChange, (_, e) => +e.currentTarget.value);

const RangeGroup = ({ name, value, onChange }) => {
    const current = useStore(value);
    return (
        <>
            <label for={name}>{name}</label>
            <input
                name={name}
                type='range'
                min='2'
                max='10'
                step='1'
                value={current}
                onChange={onChange}
            />
            <output for={name}>{current}</output>
        </>
    );
};

const App = () => {
    return (
        <>
            <form>
                <RangeGroup name='foo' onChange={fooChange} value={fooValue} />
                <RangeGroup name='bar' onChange={barChange} value={barValue} />
            </form>
        </>
    );
};

5. Finite State Machine / FSM (e.g., XState)

Finite State Machine (FSM) merupakan model konseptual yang dapat berada dalam satu dari sejumlah state terbatas pada setiap waktu tertentu. Transisi antar state terjadi sebagai respons terhadap input eksternal, dan perubahan dari state satu ke state yang lain disebut transisi. Sebuah FSM didefinisikan oleh daftar statenya, initial state, dan kondisi-kondisi untuk setiap transisi.

State machines: restricts the possible states something can be in, and limits the possibilities to move from one state to another.

Key characteristic dari FSM melibatkan satu kumpulan state yang terdefinisi dengan baik dalam aplikasi dan transisi antar state yang dipicu oleh event spesifik. Selain itu, FSM dapat mengorganisir state secara hierarki, menyediakan representasi terstruktur dari perilaku aplikasi.

Karakteristik:

States dan transisi: Sebuah aplikasi memiliki kumpulan state yang terdefinisi dengan baik, dan transisi antar state dipicu oleh event.
Hierarchical states: States dapat diatur secara hierarki, memberikan representasi terstruktur dari behaviour aplikasi.

XState

// machine.js
import { createMachine } from "xstate";

export const lightSwitchMachine = createMachine({
    id: "lightSwitch",
    initial: "off",
    states: {
        off: { on: { TOGGLE: "on" } },
        on: { on: { TOGGLE: "off" } },
    },
});

// App.js
import React from "react";
import { lightSwitchMachine } from './machines'
import { useMachine } from '@xstate/react'

const App = () => {
    const [state, send] = useMachine(lightSwitchMachine);
    return (
        <div>
            <p>Current State: {state.value}</p>
            <button onClick={() => send({ type: "TOGGLE" })}>Toggle</button>
        </div>
    );
};

Salah satu keunggulan xstate dibanding state management lain yaitu stately (creator dari xstate), membuat vscode extension untuk memvisualisasikan manajemen state dari aplikasi kita, dan kita bisa langsung membuat perubahan state dan event pada visual editor yang mana nantinya kode kita juga akan ikut berubah secara "real-time" dengan perubahan yang kita buat pada visual editor.

Masing-masing model state management ini memiliki kelebihan dan kekurangannya sendiri, dan pilihannya sering kali bergantung pada requirement spesifik dan arsitektur aplikasi. Developer dapat memilih pola berdasarkan faktor-faktor seperti kompleksitas transisi state, kemudahan debugging, dan lain-lain.

Jika kalian ingin melihat perbandingan popularitas dari masing-masing state management yang ada, kalian bisa melihatnya pada link berikut.

Referensi:

Ways I Love to Handle Errors in JavaScript Promises

Rafli Dewanto — Sat, 09 Dec 2023 01:39:50 +0000

Ketika memasuki dunia pemrograman, banyak dari kita terlalu fokus pada penulisan kode yang sempurna dan fungsional. Namun, seringkali kita melupakan aspek krusial yang dapat membuat perbedaan antara aplikasi yang sukses dan yang tidak, yaitu penanganan kesalahan atau error handling. Terlebih lagi, ketika kita berbicara tentang pengembangan aplikasi web menggunakan JavaScript, pemahaman yang baik tentang cara menangani kesalahan dalam promises menjadi hal yang sangat penting.

Pemula sering kali mengabaikan kebutuhan untuk mengatasi potensi kesalahan dalam kode mereka, tanpa menyadari bahwa bahkan aplikasi terbaik sekalipun dapat mengalami situasi tak terduga. Kesalahan dapat muncul dari berbagai sumber, seperti jaringan yang bermasalah, permintaan API yang gagal, atau kesalahan logika dalam kode itu sendiri.

Dalam artikel ini, kita akan membahas beberapa cara efektif untuk menangani kesalahan dalam JavaScript promise. Promise merupakan salah satu konsep inti dalam pemrograman asynchronous di JavaScript, dan memahami cara menangani kesalahan dalam promises dapat membantu kita membuat aplikasi yang lebih baik.

Promise.all

Dikutip dari dokumentasi MDN

The Promise.all() static method takes an iterable of promises as input and returns a single Promise. This returned promise fulfills when all of the input's promises fulfill (including when an empty iterable is passed), with an array of the fulfillment values. It rejects when any of the input's promises rejects, with this first rejection reason.

Metode ini menerima sebuah iterable (seperti array) dari promises sebagai argumen. Saat semua promises dalam iterable tersebut telah terpenuhi (fulfilled), maka promise yang dihasilkan oleh Promise.all() juga akan terpenuhi. Sebaliknya, jika salah satu promise di dalam iterable tersebut menolak (rejected), maka Promise.all() akan segera menolak dengan alasan dari promise yang pertama kali ditolak.

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo");
});

async function handle() {
  const res = await Promise.all([promise1, promise2, promise3]);
  console.log(res);
}
// output: Array [3, 42, "foo"]

Atau kita juga bisa destructure value dari hasil promise tersebut

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo");
});

async function handle() {
  const [p1, p2, p3] = await Promise.all([promise1, promise2, promise3]);
  console.log(p1);
  console.log(p2);
  console.log(p3);
}
handle();
// output:
// 3
// 42
// foo

Namun kita belum implementasi error handling, mari kita masukkan kode sebelumnya dengan try-catch

const promise1 = Promise.resolve(3);
const promise2 = Promise.reject("Error");
const promise3 = Promise.reject("Error");

async function handle() {
  try {
    const [p1, p2, p3] = await Promise.all([promise1, promise2, promise3]);
    console.log(p1);
    console.log(p2);
    console.log(p3);
  } catch (e) {
    // handle error
  }
}

Kode di atas mungkin akan terlihat sudah oke, namun sebenarnya ada masalah, misal promise pertama resolve, namun promise kedua reject, ini akan trigger catch block dan menjalankan error handlingnya. Lalu apa masalahnya?

Ketika catch block sudah tereksekusi, semisal promise ketiga reject juga, maka JavaScript akan menghasilkan Unhandled Promise rejection. Lantas bagaimana cara menanganinya?

Promise.allSettled

Dikutip dari dokumentasi MDN

The Promise.allSettled() static method takes an iterable of promises as input and returns a single Promise. This returned promise fulfills when all of the input's promises settle (including when an empty iterable is passed), with an array of objects that describe the outcome of each promise.

Metode ini mirip dengan Promise.all(), namun memberikan respons terhadap setiap promise, baik yang terpenuhi maupun yang ditolak. Dengan menggunakan Promise.allSettled(), kita dapat menangani setiap hasil promise secara individual, tanpa risiko unhandled promise rejection.

Promise.allSettled menghasilkan 3 hal, yaitu:

status: sebuah string, antara "fulfilled" atau "rejected", tergantung state dari promise (resolve/reject)
value: hanya ada jika status === "fulfilled".
reason: hanya ada jika status === "rejected".

const promise1 = Promise.resolve(3);
const promise2 = Promise.reject("Error");
const promise3 = Promise.reject("Error");

async function handle() {
  const [p1, p2, p3] = await Promise.allSettled([promise1, promise2, promise3]);
  // promise 1
  if (p1.result === "fulfilled") {
    const value = p1.value;
  } else {
    const err = p1.reason;
    handleError(err);
  }
  // promise 2
  if (p2.result === "fulfilled") {
    const value = p2.value;
  } else {
    const err = p2.reason;
    handleError(err);
  }
  // promise 3
  if (p3.result === "fulfilled") {
    const value = p3.value;
  } else {
    const err = p3.reason;
    handleError(err);
  }
}
handle();

Jika kode ini terlalu rumit, Anda bisa membungkusnya dengan sebuah fungsi

Array destructuring

Ini merupakan salah satu cara yang paling saya suka dalam menghandle error di JavaScript, yaitu dengan menggunakan array destructuring. Array destructuring adalah fitur yang sangat berguna dalam JavaScript untuk mengekstrak nilai dari array atau properti objek dan menetapkannya ke variabel terpisah. Dalam konteks error handling, array destructuring dapat digunakan untuk menyederhanakan pengelolaan hasil dan pesan kesalahan. Berikut adalah contoh implementasi dalam JavaScript:

async function handlePromise() {
  try {
    const data = await fetchData();
    return [data, null];
  } catch (error) {
    return [null, error];
  }
}

Lalu kita bisa menggunakan fungsi tersebut seperti di bawah ini

const [data, error] = await handlePromise();

if (error) {
  // handle error
}

Dengan cara ini juga kita bisa memanggil beberapa promise dengan satu baris,

const [data1, error1] = await handlePromise1();
const [data2, error2] = await handlePromise2();

if (error1) {
  // handle error
}

if (error2) {
  // handle error
}

Jika kalian merupakan programmer golang mungkin kalian sudah familiar dengan pattern ini, menurut saya pattern ini merupakan salah satu cara terbaik untuk menghandle error karena kita tidak lagi perlu menggunakan try-catch block. Jika kalian menggunakan TypeScript kalian bisa define types-nya dengan tuple.

type DataTuple = [Data[] | null, null | string];

async function getData(): Promise<DataTuple> {
  try {
    const data = await db.findMany();
    return [data, null];
  } catch (error) {
    const message = getErrorMessage(error);
    return [null, message];
  }
}

Promise.allSettled + Golang style

Cara ini merupakan gabungan dari promise.allSettled dan kita akan memodifikasinya dengan golang error handling.

function promiseWrapper(promise) {
  return Promise.allSettled([promise]).then(([{ value, reason }]) => {
    // kita bisa menggunakan object maupun array, disini saya menggunakan object agar lebih akurat ketika kita menggunakan TypeScript
    return { data: value, error: reason }
  })
}

Disini kita membuat sebuah utility function yang mana kita bisa passing sebuah promise dalam fungsi ini yang nantinya kita akan mendapatkan either data maupun error jika promise berakhir dengan reject. Lalu kita bisa menggunakannya seperti contoh di bawah,

const { data, error } = await promiseWrapper(promise);
if (error) {
  // handle it
}
// no error

Jika kita memiliki banyak promise dan ingin menggunakan utility function ini, kita bisa rename variablenya dengan object destructuring agar tidak terjadi conflict


const { data: data1, error: error1 } = await promiseWrapper(promise1);
const { data: data2, error: error2 } = await promiseWrapper(promise2);

if (error1) {
  // handle it
}

if (error2) {

}
// no error

Tentunya cara yang saya sebut di atas tidak sempurna dan masih banyak lagi cara untuk handle error promise di JavaScript, namun ini merupakan cara yang saya pribadi gunakan.

Semoga dengan artikel ini bisa membantu kalian dan juga menambah insights tentang promise di JavaScript❤️.

Referensi: