Latihan 1: Error Boundaries Solid — SolidJS

Latihan 1 dari materi Error Boundaries Solid di SolidJS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya KartuBuku, yang melempar new Error("Harga belum ada") selama props.harga belum diisi, dan App dengan signal harga (mulai dari 0), tombol Muat harga yang mengisinya 120000, lalu <KartuBuku harga={harga()} />. Tanpa penangkap error, halamannya kosong. Biarkan KartuBuku dan tombolnya, lalu:

Tambahkan ErrorBoundary ke baris import: import { createSignal, ErrorBoundary } from "solid-js".
Bungkus <KartuBuku harga={harga()} /> dengan <ErrorBoundary fallback={...}> dan </ErrorBoundary>.
Isi fallback dengan fungsi (err, reset) => (...) yang mengembalikan <div> berisi <p>Error: {err.message}</p> dan <button onClick={reset}>Coba lagi</button>.

Yang dicek:

Kodemu memuat <ErrorBoundary, lalu </ErrorBoundary> sesudahnya: tag pembuka dan penutup, bukan tag tunggal.
Kodemu memuat fallback={ (prop fallback diisi dengan kurung kurawal).
Saat halaman tampil, <p> berisi persis Error: Harga belum ada.
Sesudah Muat harga diklik, <p> masih berisi persis Error: Harga belum ada: boundary yang sudah menangkap error gak menggambar ulang isinya sendiri.
Lalu sesudah Coba lagi diklik, <p> berisi persis Bumi Manusia: Rp120000.

Hint

ErrorBoundary membungkus komponen lain seperti jaring pengaman: kalau isinya melempar error saat dirender, fallback-nya yang tampil, bukan halaman kosong.
fallback berupa fungsi (err, reset): err.message berisi pesan errornya, dan reset menggambar ulang isinya. Sesudah harganya dimuat, menggambar ulang menampilkan kartunya.
<ErrorBoundary fallback={(err, reset) => (<div><p>Error: {err.message}</p><button onClick={reset}>Coba lagi</button></div>)}><KartuBuku harga={harga()} /></ErrorBoundary>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Error Boundaries Solid — SolidJS

Hint

Memperbarui Aplikasi