Advanced · Level 16: Frontend ArchitectureAdvanced70 menitBahasa Indonesia

Error Strategy

Menyusun owner, copy, dan recovery path yang berbeda untuk loading, error, empty, serta success state sebuah feature.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan error dari empty state dan state yang belum selesai dimuat
Menentukan siapa yang dapat melakukan recovery untuk setiap failure
Menulis error copy yang menjelaskan dampak serta tindakan berikutnya
Menghindari fallback yang menyembunyikan kegagalan sebagai data kosong

Error StrategyRecoveryServer StateUX Writing

Isi lesson

6 blok

1.
Setiap failure harus memiliki owner dan jalan pulihBelum selesaiWajib
2.
Course feed membedakan error dari hasil kosongBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Writing practiceBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Setiap failure harus memiliki owner dan jalan pulih

Wajib

Error strategy bukan sekadar menambahkan catch lalu menampilkan pesan merah. Mulai dengan membedakan scope failure: page tidak dapat memuat catalog, card individual gagal menampilkan thumbnail, mutation bookmark ditolak, atau parameter URL tidak valid. Scope menentukan UI mana yang tetap berguna, siapa yang menawarkan recovery, dan apakah retry aman. Error pada list course tidak boleh berubah menjadi Belum ada course karena user akan mengambil keputusan dari informasi yang salah.

Setiap data flow perlu state minimal yang jujur: loading, error, empty, dan ready atau success. Error copy sebaiknya menyebut apa yang gagal tanpa membocorkan detail teknis yang tidak membantu, lalu menawarkan action yang benar seperti Coba lagi, Ubah filter, Masuk kembali, atau Hubungi support. Action recovery harus memiliki owner nyata; tombol retry yang tidak memanggil operation ulang hanya menciptakan harapan palsu.

Bagian ini memengaruhi progres lesson.

Course feed membedakan error dari hasil kosong

Wajib

tsx

type CourseFeedState =
  | { status: "loading" }
  | { status: "error"; message: string }
  | { status: "empty" }
  | { status: "ready"; total: number };

type CourseFeedProps = {
  state: CourseFeedState;
  onRetry: () => void;
};

export function CourseFeed({ state, onRetry }: CourseFeedProps) {
  if (state.status === "loading") {
    return <p aria-busy="true">Memuat course...</p>;
  }

  if (state.status === "error") {
    return (
      <section role="alert">
        <p>{state.message}</p>
        <button type="button" onClick={onRetry}>Coba lagi</button>
      </section>
    );
  }

  if (state.status === "empty") {
    return <p>Belum ada course yang cocok. Ubah filter lalu coba lagi.</p>;
  }

  return <p>{state.total} course siap dipelajari.</p>;
}

Error membawa pesan serta callback recovery. Empty bukan kegagalan: request berhasil, tetapi hasil memang tidak ada sehingga action yang tepat adalah mengubah filter. onRetry dimiliki caller yang mengetahui cara menjalankan request kembali. Pada implementation nyata, hindari retry otomatis tanpa batas dan pertahankan context filter saat user mencoba lagi.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Map course error recovery

Buat UI course feed yang membedakan loading, error, empty, dan ready; error harus menawarkan recovery yang dimiliki caller data.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis4 checklist

Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Buat error strategy ringkas untuk satu feature yang memuat data, misalnya course catalog, saved lessons, atau profile. Jelaskan loading, error, empty, dan success state. Untuk error, sebutkan scope failure, copy yang akan dilihat user, action recovery, owner yang menjalankan recovery, dan kapan retry tidak boleh otomatis dilakukan. Tambahkan satu hal yang harus tetap dapat dipakai user ketika sebagian data gagal.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/600 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Membedakan loading, error, empty, dan success secara jelas.
Menjelaskan scope failure serta copy yang relevan bagi user.
Menyebut action recovery dan owner yang menjalankan action tersebut.
Menjelaskan satu kondisi ketika retry tidak boleh otomatis.
Menyebut UI atau action yang tetap tersedia saat sebagian data gagal.

Blok ini wajib untuk menyelesaikan lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Respons terbaik saat request catalog gagal karena jaringan adalah

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Loading, error, empty, dan success menjawab kondisi yang berbeda dan membutuhkan copy berbeda.
Error strategy menentukan scope failure, owner recovery, dan action yang benar-benar bekerja.
Jangan menyamarkan error sebagai empty state atau menyembunyikan failure di balik fallback data kosong.
Partial failure dapat tetap menyisakan action atau content yang berguna bila boundary UI dirancang dengan tepat.
Uji Kompetensi berikutnya meminta kamu memetakan seluruh state serta recovery satu feature tanpa menjadikan global store sebagai default.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Setiap failure harus memiliki owner dan jalan pulih.

Memuat progres Review module