Cara JavaScript Berjalan: Engine, Event Loop, Async · 3/9

Call stack dan cara membaca stack trace

Tulisan merah di console itu sebuah peta. Belajar membacanya dan proses debug jadi jauh lebih cepat.

Baca 22 menit

Setelah pelajaran ini kamu bisa

Melacak stack melewati pemanggilan function bersarang
Membaca stack trace dan menemukan kodemu sendiri di dalamnya
Menjelaskan apa yang menyebabkan stack overflow
Memakai stack untuk menemukan bug alih-alih menebak

Call stack adalah cara engine mengingat harus kembali ke mana. Panggil sebuah function dan sebuah frame ditumpuk di atasnya; return dan frame itu diambil kembali. Cuma itu — dan itu menjelaskan stack trace sekaligus stack overflow.

Coba sendiri

Perhatikan urutannya. Setiap `masuk` itu push; setiap `keluar` itu pop.

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Perhatikan keluar pertama jalan paling akhir. Saat ketiga sedang dieksekusi, ketiga frame ada di stack sekaligus, tersusun sesuai urutan pemanggilan.

Membaca stack trace

Saat sebuah error dilempar, engine mencetak stack seperti kondisinya saat itu. Baris teratas adalah tempat rusaknya. Baris di bawahnya menunjukkan siapa yang memanggilnya. Baca dari atas ke bawah, dan berhenti di baris pertama yang merupakan file milikmu.

text

TypeError: Cannot read properties of undefined (reading 'name')
    at formatGuest (features/booking/format.ts:12:22)      <- it broke HERE
    at renderRow (features/booking/table.tsx:34:18)        <- called by this
    at BookingTable (features/booking/table.tsx:51:9)      <- called by this
    at renderWithHooks (node_modules/react-dom/...)        <- library: skip
    at beginWork (node_modules/react-dom/...)              <- library: skip

Bug-mu ada di baris 12 di format.ts. Frame library di bawahnya cuma derau — tapi table.tsx:34 memberitahumu data apa yang dikirim masuk.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Rekursi dan stack overflow

Function yang memanggil dirinya sendiri disebut rekursi, dan ia butuh kondisi yang menghentikannya — sebuah base case. Tanpa itu, frame menumpuk sampai stack penuh dan engine menyerah.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tugas praktik

Sengaja timbulkan error nyata di proyek ini. Buka features/i18n/interpolate.ts, ubah sementara String(values[key]) jadi values[key].toUpperCase(), muat sebuah halaman, dan baca stack trace-nya di terminal. Temukan frame pertama yang merupakan kodemu, lalu batalkan perubahannya.

Hasil yang diharapkan

Sebuah TypeError yang frame teratasnya menunjuk ke interpolate.ts.