Beranda>Terkait pemrograman>Kode sumber JAWA
Unduh

Buku Pegangan Kesalahan JavaScript

README ini berisi informasi yang telah saya pelajari selama bertahun-tahun tentang menangani kesalahan JavaScript, melaporkannya ke server, dan menavigasi banyak bug yang dapat membuat semuanya menjadi sangat sulit. Browser telah mengalami peningkatan dalam hal ini, namun masih ada ruang yang tersisa untuk ditingkatkan untuk memastikan bahwa semua aplikasi dapat menangani kesalahan apa pun yang terjadi dengan baik dan bijaksana.

Kasus pengujian untuk konten yang ditemukan dalam panduan ini dapat ditemukan di https://mknichel.github.io/javascript-errors/.

Daftar isi

  • Perkenalan

  • Anatomi Kesalahan JavaScript

    • Menghasilkan Kesalahan JavaScript

    • Pesan Kesalahan

    • Format Pelacakan Tumpukan

  • Menangkap Kesalahan JavaScript

    • window.onerror

    • coba/tangkap

    • Titik Masuk yang Dilindungi

    • Janji

    • Pekerja Web

    • Ekstensi Chrome

Perkenalan

Menangkap, melaporkan, dan memperbaiki kesalahan adalah bagian penting dari aplikasi apa pun untuk memastikan kesehatan dan stabilitas aplikasi. Karena kode JavaScript juga dijalankan pada klien dan di banyak lingkungan browser yang berbeda, mungkin sulit untuk selalu mengetahui Kesalahan JS dari aplikasi Anda. Tidak ada spesifikasi web formal tentang cara melaporkan kesalahan JS yang menyebabkan perbedaan dalam implementasi setiap browser. Selain itu, ada banyak bug dalam penerapan kesalahan JavaScript di browser yang membuat hal ini semakin sulit. Halaman ini menavigasi melalui aspek-aspek Kesalahan JS sehingga pengembang di masa depan dapat menangani kesalahan dengan lebih baik dan diharapkan browser akan menyatu pada solusi standar.

Anatomi Kesalahan JavaScript

Kesalahan JavaScript terdiri dari dua bagian utama: pesan kesalahan dan pelacakan tumpukan . Pesan kesalahan adalah string yang menjelaskan apa yang salah, dan pelacakan tumpukan menjelaskan di mana kesalahan terjadi dalam kode. Kesalahan JS dapat dihasilkan oleh browser itu sendiri atau disebabkan oleh kode aplikasi.

Menghasilkan Kesalahan JavaScript

Kesalahan JS dapat terjadi oleh browser ketika sepotong kode tidak dijalankan dengan benar, atau dapat terjadi langsung oleh kode.

Misalnya:

 var a = 3;a();

Dalam contoh ini, variabel yang sebenarnya berupa angka tidak dapat dipanggil sebagai fungsi. Browser akan memunculkan kesalahan seperti TypeError: a is not a function with a stack trace yang menunjuk ke baris kode tersebut.

Pengembang mungkin juga ingin membuat kesalahan pada sepotong kode jika prasyarat tertentu tidak terpenuhi. Misalnya

 jika (!checkPrecondition()) {
  throw new Error("Tidak memenuhi prasyarat!");}

Dalam hal ini, kesalahannya adalah Error: Doesn't meet precondition! . Kesalahan ini juga akan berisi jejak tumpukan yang menunjuk ke baris yang sesuai. Kesalahan yang ditimbulkan oleh browser dan kode aplikasi dapat ditangani dengan cara yang sama.

Ada beberapa cara pengembang dapat membuat kesalahan dalam JavaScript:

  • throw new Error('Problem description.')

  • throw Error('Problem description.') <-- setara dengan yang pertama

  • throw 'Problem description.' <-- buruk

  • throw null <-- bahkan lebih buruk lagi

Melempar string atau null sangat tidak disarankan karena browser tidak akan melampirkan jejak tumpukan ke kesalahan tersebut, sehingga kehilangan konteks di mana kesalahan tersebut terjadi dalam kode. Yang terbaik adalah membuang objek Error yang sebenarnya, yang akan berisi pesan kesalahan serta jejak tumpukan yang menunjuk ke baris kode yang tepat di mana kesalahan terjadi.

Pesan Kesalahan

Setiap browser memiliki kumpulan pesannya sendiri yang digunakan untuk pengecualian bawaan, seperti contoh di atas untuk mencoba memanggil non-fungsi. Browser akan mencoba menggunakan pesan yang sama, tetapi karena tidak ada spesifikasinya, hal ini tidak dijamin. Misalnya, Chrome dan Firefox menggunakan {0} is not a function untuk contoh di atas sementara IE11 akan melaporkan Function expected (terutama juga tanpa melaporkan variabel apa yang coba dipanggil).

Namun, browser juga cenderung sering berbeda. Ketika ada beberapa pernyataan default dalam pernyataan switch , Chrome akan menampilkan "More than one default clause in switch statement" sementara Firefox akan melaporkan "more than one switch default" . Saat fitur baru ditambahkan ke web, pesan kesalahan ini harus diperbarui. Perbedaan ini dapat terjadi nanti ketika Anda mencoba menangani kesalahan yang dilaporkan dari kode yang dikaburkan.

Anda dapat menemukan template yang digunakan browser untuk pesan kesalahan di:

  • Firefox - http://mxr.mozilla.org/mozilla1.9.1/source/js/src/js.msg

  • Chrome - https://code.google.com/p/v8/source/browse/branches/bleeding_edge/src/messages.js

  • Internet Explorer - https://github.com/Microsoft/ChakraCore/blob/4e4d4f00f11b2ded23d1885e85fc26fcc96555da/lib/Parser/rterrors.h

Browser akan menghasilkan pesan kesalahan yang berbeda untuk beberapa pengecualian.

Format Pelacakan Tumpukan

Pelacakan tumpukan adalah deskripsi tempat terjadinya kesalahan dalam kode. Ini terdiri dari serangkaian frame, di mana setiap frame menggambarkan baris tertentu dalam kode. Bingkai paling atas adalah lokasi di mana kesalahan terjadi, sedangkan bingkai berikutnya adalah tumpukan panggilan fungsi - atau bagaimana kode dieksekusi untuk sampai ke titik di mana kesalahan terjadi. Karena JavaScript biasanya digabungkan dan diperkecil, penting juga untuk memiliki nomor kolom sehingga pernyataan yang tepat dapat ditemukan ketika suatu baris memiliki banyak pernyataan.

Pelacakan tumpukan dasar di Chrome terlihat seperti: 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9)
  at http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

Setiap bingkai tumpukan terdiri dari nama fungsi (jika berlaku dan kode tidak dieksekusi dalam lingkup global), skrip asalnya, dan nomor baris dan kolom kode.

Sayangnya, tidak ada standar untuk format pelacakan tumpukan sehingga hal ini berbeda tergantung browser.

Pelacakan tumpukan Microsoft Edge dan IE 11 terlihat mirip dengan Chrome kecuali secara eksplisit mencantumkan kode Global: 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:3)
  at Global code (http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3)

Jejak tumpukan Firefox terlihat seperti: 

  throwError@http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9
  @http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

Format Safari mirip dengan format Firefox tetapi juga sedikit berbeda: 

  throwError@http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:18
  global code@http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:13

Informasi dasarnya sama, tetapi formatnya berbeda.

Perhatikan juga bahwa dalam contoh Safari, selain formatnya berbeda dari Chrome, nomor kolomnya juga berbeda dari Chrome dan Firefox. Nomor kolom juga dapat menyimpang lebih banyak dalam situasi kesalahan yang berbeda - misalnya dalam kode (function namedFunction() { throwError(); })(); , Chrome akan melaporkan kolom untuk pemanggilan fungsi throwError() sementara IE11 melaporkan nomor kolom sebagai awal string. Perbedaan ini akan kembali berlaku nanti ketika server perlu mengurai jejak tumpukan untuk kesalahan yang dilaporkan dan membatalkan penyamaran jejak tumpukan yang dikaburkan.

Lihat https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack untuk informasi lebih lanjut tentang properti tumpukan kesalahan. Saat mengakses properti Error.stack, Chrome menyertakan pesan kesalahan sebagai bagian dari tumpukan tetapi Safari 10+ tidak.

Format pelacakan tumpukan berbeda menurut browser dalam bentuk dan nomor kolom yang digunakan.

Lebih dalam lagi, ada banyak perbedaan dalam format pelacakan tumpukan yang dibahas di bagian di bawah ini.

Memberi nama fungsi anonim

Secara default, fungsi anonim tidak memiliki nama dan muncul sebagai string kosong atau "Fungsi anonim" dalam nama fungsi di pelacakan tumpukan (tergantung pada browser). Untuk meningkatkan proses debug, Anda harus menambahkan nama ke semua fungsi untuk memastikan nama tersebut muncul di bingkai tumpukan. Cara termudah untuk melakukannya adalah dengan memastikan bahwa fungsi anonim ditentukan dengan nama, meskipun nama tersebut tidak digunakan di tempat lain. Misalnya:

 setTimeout(fungsi namaOfTheAnonymousFunction() { ... }, 0);

Ini akan menyebabkan jejak tumpukan berpindah dari: 

at http://mknichel.github.io/javascript-errors/javascript-errors.js:125:17

ke 

at nameOfTheAnonymousFunction (http://mknichel.github.io/javascript-errors/javascript-errors.js:121:31)

Di Safari, ini dimulai dari: 

https://mknichel.github.io/javascript-errors/javascript-errors.js:175:27

ke 

nameOfTheAnonymousFunction@https://mknichel.github.io/javascript-errors/javascript-errors.js:171:41

Metode ini memastikan bahwa nameOfTheAnonymousFunction muncul dalam bingkai untuk kode apa pun dari dalam fungsi tersebut, membuat proses debug menjadi lebih mudah. Lihat http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/#toc-debugging-tips untuk informasi lebih lanjut.

Menugaskan fungsi ke variabel

Browser juga akan menggunakan nama variabel atau properti yang ditugaskan ke suatu fungsi jika fungsi itu sendiri tidak memiliki nama. Misalnya, di

 var fnVariableName = fungsi() { ... };

browser akan menggunakan fnVariableName sebagai nama fungsi dalam pelacakan tumpukan. 

    at throwError (http://mknichel.github.io/javascript-errors/javascript-errors.js:27:9)
    at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37)

Bahkan lebih bernuansa dari itu, jika variabel ini didefinisikan dalam fungsi lain, semua browser hanya akan menggunakan nama variabel sebagai nama fungsi dalam pelacakan tumpukan kecuali untuk Firefox, yang akan menggunakan bentuk berbeda yang menggabungkan nama fungsi luar dengan nama variabel dalam. Contoh:

 fungsi throwErrorFromInnerFunctionAssignedToVariable() {
  var fnVariableName = function() { melempar Kesalahan baru("foo"); };
  fnNamaVariabel();}

akan menghasilkan di Firefox: 

throwErrorFromInnerFunctionAssignedToVariable/fnVariableName@http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37

Di browser lain, tampilannya akan seperti ini: 

at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37)

Firefox menggunakan teks bingkai tumpukan berbeda untuk fungsi yang ditentukan dalam fungsi lain.

properti nama tampilan

Nama tampilan suatu fungsi juga dapat diatur oleh properti displayName di semua browser utama kecuali IE11. Di browser ini, displayName akan muncul di debugger devtools, namun di semua browser kecuali Safari, displayName tidak akan digunakan di Jejak tumpukan kesalahan (Safari berbeda dari yang lain karena juga menggunakan displayName di pelacakan tumpukan yang terkait dengan kesalahan).

 var someFunction = function() {};someFunction.displayName = " # Deskripsi fungsi yang lebih panjang.";

Tidak ada spesifikasi resmi untuk properti displayName, namun didukung oleh semua browser utama. Lihat https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName dan http://www.alertdebugging.com/2009/04/29/building-a-better -javascript-profiler-with-webkit/ untuk informasi lebih lanjut tentang nama tampilan.

IE11 tidak mendukung properti displayName.

Safari menggunakan properti displayName sebagai nama simbol dalam Pelacakan tumpukan kesalahan.

Menangkap jejak tumpukan secara terprogram

Jika kesalahan dilaporkan tanpa jejak tumpukan (lihat detail lebih lanjut kapan hal ini akan terjadi di bawah), maka pelacakan tumpukan dapat ditangkap secara terprogram.

Di Chrome, ini sangat mudah dilakukan dengan menggunakan Error.captureStackTrace API. Lihat https://github.com/v8/v8/wiki/Stack%20Trace%20API untuk informasi lebih lanjut tentang penggunaan API ini.

Misalnya:

 fungsi abaikanFunctionInStackTrace() {
  var err = Kesalahan baru();
  Error.captureStackTrace(err, abaikanThisFunctionInStackTrace);
  kembalikan err.stack;}

Di browser lain, pelacakan tumpukan juga dapat dikumpulkan dengan membuat kesalahan baru dan mengakses properti tumpukan objek tersebut:

 var err = Kesalahan baru('');return err.stack;

Namun, IE10 hanya mengisi pelacakan tumpukan ketika kesalahan benar-benar terjadi:

 mencoba {
  melempar Kesalahan baru('');} tangkapan (e) {
  kembalikan e.stack;}

Jika tidak satu pun dari pendekatan ini berhasil, maka dimungkinkan untuk membuat pelacakan tumpukan kasar tanpa nomor baris atau kolom dengan melakukan iterasi pada objek arguments.callee.caller - ini tidak akan berfungsi dalam Mode Ketat ES5 dan ini bukan pendekatan yang disarankan.

Pelacakan tumpukan asinkron

Sangat umum titik asinkron dimasukkan ke dalam kode JavaScript, seperti saat kode menggunakan setTimeout atau melalui penggunaan Promises. Titik masuk asinkron ini dapat menyebabkan masalah pada pelacakan tumpukan, karena menyebabkan terbentuknya konteks eksekusi baru dan pelacakan tumpukan dimulai dari awal lagi.

Chrome DevTools memiliki dukungan untuk pelacakan tumpukan asinkron, atau dengan kata lain memastikan pelacakan tumpukan kesalahan juga menampilkan bingkai yang terjadi sebelum titik asinkron diperkenalkan. Dengan penggunaan setTimeout, ini akan menangkap siapa yang memanggil fungsi setTimeout yang akhirnya menghasilkan kesalahan. Lihat http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/ untuk informasi lebih lanjut.

Pelacakan tumpukan async akan terlihat seperti: 

  throwError	@	throw-error.js:2
  setTimeout (async)		
  throwErrorAsync	@	throw-error.js:10
  (anonymous function)	@	throw-error-basic.html:14

Pelacakan tumpukan asinkron saat ini hanya didukung di Chrome DevTools, hanya untuk pengecualian yang muncul saat DevTools terbuka. Pelacakan tumpukan yang diakses dari objek Error dalam kode tidak akan memiliki pelacakan tumpukan asinkron sebagai bagiannya.

Dalam beberapa kasus, dimungkinkan untuk melakukan polyfill pelacakan tumpukan asinkron, namun hal ini dapat menyebabkan penurunan kinerja yang signifikan untuk aplikasi Anda karena menangkap pelacakan tumpukan tidaklah murah.

Hanya Chrome DevTools yang secara asli mendukung pelacakan tumpukan asinkron.

Memberi nama skrip inline dan eval

Pelacakan tumpukan untuk kode yang dievaluasi atau disisipkan ke dalam halaman HTML akan menggunakan URL halaman dan nomor baris/kolom untuk kode yang dieksekusi.

Misalnya: 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9)
  at http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

Jika skrip ini sebenarnya berasal dari skrip yang disisipkan untuk alasan pengoptimalan, maka nomor URL, baris, dan kolomnya akan salah. Untuk mengatasi masalah ini, Chrome dan Firefox mendukung anotasi //# sourceURL= (Safari, Edge, dan IE tidak). URL yang ditentukan dalam anotasi ini akan digunakan sebagai URL untuk semua pelacakan tumpukan, dan nomor baris dan kolom akan dihitung relatif terhadap awal tag