Kesalahan coba/tangkap javascript tidak ditentukan

Try…catch adalah pernyataan yang umum digunakan dalam berbagai bahasa pemrograman. Pada dasarnya, ini digunakan untuk menangani bagian kode yang rawan kesalahan. Ini awalnya menguji kode untuk semua kemungkinan kesalahan yang mungkin ada di dalamnya, kemudian mengimplementasikan tindakan untuk mengatasi kesalahan tersebut (jika terjadi). Pendekatan pemrograman yang baik adalah menyimpan kode kompleks di dalam pernyataan try…catch

Mari kita bahas setiap blok pernyataan satu per satu

mencoba{} pernyataan. Di sini, kode yang memerlukan kemungkinan pengujian kesalahan disimpan di dalam blok percobaan. Jika terjadi kesalahan, itu diteruskan ke blok catch{} untuk melakukan tindakan yang sesuai dan menangani kesalahan. Jika tidak, itu mengeksekusi kode yang tertulis di dalamnya

catch{} pernyataan. Blok ini menangani kesalahan kode dengan mengeksekusi kumpulan pernyataan yang ditulis di dalam blok. Blok ini berisi penangan pengecualian yang ditentukan pengguna atau penangan bawaan. Blok ini dijalankan hanya ketika ada kode rawan kesalahan yang perlu ditangani di blok try. Jika tidak, blok tangkapan akan dilewati

Catatan. catch {} mengeksekusi pernyataan hanya setelah eksekusi pernyataan try {}. Juga, satu blok try dapat berisi satu atau lebih blok catch

Sintaksis

coba… tangkap contohnya

Pernyataan Lempar

Pernyataan lemparan digunakan untuk melempar kesalahan yang ditentukan pengguna. Pengguna dapat menentukan dan melempar kesalahan kustom mereka sendiri. Ketika pernyataan throw dieksekusi, pernyataan yang ada setelahnya tidak akan dieksekusi. Kontrol akan langsung lolos ke catch block

Sintaksis

coba… tangkap… lempar sintaks

Pengecualian dapat berupa string, angka, objek, atau nilai boolean

lempar contoh dengan try…catch

Dengan bantuan pernyataan lemparan, pengguna dapat membuat kesalahan mereka sendiri

coba… tangkap… akhirnya pernyataan

Akhirnya adalah blok pernyataan opsional yang dieksekusi setelah eksekusi pernyataan try dan catch. Akhirnya blok tidak berlaku untuk pengecualian yang akan dilemparkan. Pengecualian apa pun yang dilemparkan atau tidak, akhirnya memblokir kode, jika ada, pasti akan dieksekusi. Itu tidak peduli dengan output juga

Hukum Murphy menyatakan bahwa apa pun yang salah pada akhirnya akan salah. Ini berlaku sedikit terlalu baik di dunia pemrograman. Jika Anda membuat aplikasi, kemungkinan Anda akan membuat bug dan masalah lainnya. Kesalahan dalam JavaScript adalah salah satu masalah umum tersebut

Keberhasilan produk perangkat lunak bergantung pada seberapa baik pembuatnya dapat menyelesaikan masalah ini sebelum merugikan penggunanya. Dan JavaScript, dari semua bahasa pemrograman, terkenal karena desain penanganan error rata-ratanya

Jika Anda membuat aplikasi JavaScript, ada kemungkinan besar Anda akan mengacaukan tipe data pada satu titik atau lainnya. Jika bukan itu, maka Anda mungkin akan mengganti undefined dengan operator null atau triple equals (

throw 8
throw "An error occurred"

throw 8
throw "An error occurred"

Hanya manusia yang membuat kesalahan. Inilah sebabnya kami akan menunjukkan kepada Anda semua yang perlu Anda ketahui tentang penanganan kesalahan dalam JavaScript

Artikel ini akan memandu Anda melalui kesalahan dasar dalam JavaScript dan menjelaskan berbagai kesalahan yang mungkin Anda temui. Anda kemudian akan mempelajari cara mengidentifikasi dan memperbaiki kesalahan ini. Ada juga beberapa tip untuk menangani kesalahan secara efektif di lingkungan produksi

Tanpa basa-basi lagi, mari kita mulai

Lihat Panduan Video Kami untuk Menangani Kesalahan JavaScript

Lihat bagaimana Kinsta menghadapi persaingan. Membandingkan

Apa Itu Kesalahan JavaScript?

Kesalahan dalam pemrograman mengacu pada situasi yang tidak memungkinkan program berfungsi secara normal. Itu bisa terjadi ketika sebuah program tidak tahu bagaimana menangani pekerjaan yang ada, seperti ketika mencoba membuka file yang tidak ada atau menjangkau titik akhir API berbasis web saat tidak ada konektivitas jaringan

Situasi ini mendorong program untuk memberikan kesalahan kepada pengguna, menyatakan bahwa ia tidak tahu bagaimana melanjutkan. Program mengumpulkan informasi sebanyak mungkin tentang kesalahan dan kemudian melaporkan bahwa itu tidak dapat dilanjutkan

Pemrogram cerdas mencoba memprediksi dan menutupi skenario ini sehingga pengguna tidak perlu mengetahui pesan kesalahan teknis seperti "404" secara mandiri. Sebaliknya, mereka menunjukkan pesan yang jauh lebih mudah dipahami. “Halaman tidak dapat ditemukan. ”

Kesalahan dalam JavaScript adalah objek yang ditampilkan setiap kali terjadi kesalahan pemrograman. Objek ini berisi banyak informasi tentang jenis kesalahan, pernyataan yang menyebabkan kesalahan, dan pelacakan tumpukan saat kesalahan terjadi. JavaScript juga memungkinkan pemrogram membuat kesalahan khusus untuk memberikan informasi tambahan saat men-debug masalah

Properti Kesalahan

Sekarang setelah definisi kesalahan JavaScript sudah jelas, saatnya untuk menyelami detailnya

Kesalahan dalam JavaScript membawa properti standar dan kustom tertentu yang membantu memahami sebab dan akibat dari kesalahan. Secara default, kesalahan dalam JavaScript berisi tiga properti

1. pesan. Nilai string yang membawa pesan kesalahan
2. nama. Jenis kesalahan yang terjadi (Kami akan membahasnya lebih dalam di bagian selanjutnya)
3. tumpukan. Jejak tumpukan kode dieksekusi saat kesalahan terjadi

Selain itu, error juga dapat membawa properti seperti columnNumber, lineNumber, fileName, dll. , untuk mendeskripsikan kesalahan dengan lebih baik. Namun, properti ini tidak standar dan mungkin ada atau tidak ada di setiap objek kesalahan yang dihasilkan dari aplikasi JavaScript Anda

Memahami Stack Trace

Pelacakan tumpukan adalah daftar pemanggilan metode yang digunakan program ketika peristiwa seperti pengecualian atau peringatan terjadi. Seperti inilah contoh pelacakan tumpukan yang disertai dengan pengecualian

Seperti yang Anda lihat, ini dimulai dengan mencetak nama dan pesan kesalahan, diikuti dengan daftar metode yang dipanggil. Setiap pemanggilan metode menyatakan lokasi kode sumbernya dan baris tempat pemanggilannya. Anda dapat menggunakan data ini untuk menelusuri basis kode dan mengidentifikasi bagian kode mana yang menyebabkan kesalahan

Daftar metode ini disusun secara bertumpuk. Ini menunjukkan di mana pengecualian Anda pertama kali dilemparkan dan bagaimana itu disebarkan melalui pemanggilan metode bertumpuk. Menerapkan tangkapan untuk pengecualian tidak akan membiarkannya menyebar melalui tumpukan dan merusak program Anda. Namun, Anda mungkin ingin membiarkan kesalahan fatal tidak tertangkap untuk merusak program dalam beberapa skenario dengan sengaja

Kesalahan vs Pengecualian

Kebanyakan orang biasanya menganggap kesalahan dan pengecualian sebagai hal yang sama. Namun, penting untuk mencatat sedikit perbedaan mendasar di antara mereka

Pengecualian adalah objek kesalahan yang telah dilemparkan

Untuk memahami ini dengan lebih baik, mari kita ambil contoh singkat. Inilah cara Anda dapat menentukan kesalahan dalam JavaScript

const wrongTypeError = TypeError("Wrong type found, expected character")

Dan begitulah objek

throw 8
throw "An error occurred"

throw wrongTypeError

Namun, kebanyakan orang cenderung menggunakan bentuk steno yang mendefinisikan objek kesalahan saat melemparnya

throw TypeError("Wrong type found, expected character")

Ini adalah praktik standar. Namun, itu salah satu alasan mengapa pengembang cenderung mencampuradukkan pengecualian dan kesalahan. Oleh karena itu, mengetahui dasar-dasarnya sangat penting meskipun Anda menggunakan singkatan untuk menyelesaikan pekerjaan Anda dengan cepat

Jenis Kesalahan dalam JavaScript

Ada berbagai jenis kesalahan yang telah ditentukan sebelumnya dalam JavaScript. Mereka secara otomatis dipilih dan ditentukan oleh runtime JavaScript setiap kali pemrogram tidak secara eksplisit menangani kesalahan dalam aplikasi

Bagian ini akan memandu Anda melalui beberapa jenis kesalahan paling umum dalam JavaScript dan memahami kapan dan mengapa kesalahan itu terjadi

RangeError

RangeError dilemparkan ketika variabel diatur dengan nilai di luar rentang nilai legalnya. Ini biasanya terjadi saat meneruskan nilai sebagai argumen ke suatu fungsi, dan nilai yang diberikan tidak terletak pada rentang parameter fungsi. Terkadang sulit untuk memperbaikinya saat menggunakan pustaka pihak ketiga yang tidak terdokumentasi dengan baik karena Anda perlu mengetahui kisaran nilai yang mungkin agar argumen dapat meneruskan nilai yang benar

Beberapa skenario umum di mana RangeError terjadi adalah

• Mencoba membuat array dengan panjang ilegal melalui konstruktor Array
• Meneruskan nilai buruk ke metode numerik seperti

  throw 8
  throw "An error occurred"

  4,

  throw 8
  throw "An error occurred"

  5,

  throw 8
  throw "An error occurred"

  6, dll
• Meneruskan nilai ilegal ke fungsi string seperti

  throw 8
  throw "An error occurred"

  7

ReferensiKesalahan

ReferenceError terjadi ketika ada yang salah dengan referensi variabel dalam kode Anda. Anda mungkin lupa menentukan nilai untuk variabel sebelum menggunakannya, atau Anda mungkin mencoba menggunakan variabel yang tidak dapat diakses dalam kode Anda. Bagaimanapun, melalui pelacakan tumpukan memberikan banyak informasi untuk menemukan dan memperbaiki referensi variabel yang salah

Beberapa alasan umum mengapa Kesalahan Referensi terjadi adalah

• Membuat kesalahan ketik pada nama variabel
• Mencoba mengakses variabel dengan cakupan blok di luar cakupannya
• Mereferensikan variabel global dari pustaka eksternal (seperti $ dari jQuery) sebelum dimuat

Kesalahan sintaks

Kesalahan ini adalah salah satu yang paling sederhana untuk diperbaiki karena menunjukkan kesalahan dalam sintaks kode. Karena JavaScript adalah bahasa skrip yang ditafsirkan, bukan dikompilasi, ini dilontarkan saat aplikasi mengeksekusi skrip yang berisi kesalahan. Dalam kasus bahasa yang dikompilasi, kesalahan tersebut diidentifikasi selama kompilasi. Dengan demikian, binari aplikasi tidak dibuat hingga ini diperbaiki

Beberapa alasan umum mengapa SyntaxErrors mungkin terjadi adalah

• Koma terbalik tidak ada
• Tanda kurung tutup tidak ada
• Penjajaran kurung kurawal atau karakter lain yang tidak tepat

Ini adalah praktik yang baik untuk menggunakan alat linting di IDE Anda untuk mengidentifikasi kesalahan seperti itu untuk Anda sebelum masuk ke browser

TypeError

TypeError adalah salah satu kesalahan paling umum di aplikasi JavaScript. Kesalahan ini dibuat ketika beberapa nilai ternyata bukan tipe yang diharapkan tertentu. Beberapa kasus yang sering terjadi adalah

• Memanggil objek yang bukan metode
• Mencoba mengakses properti dari objek null atau objek yang tidak terdefinisi
• Memperlakukan string sebagai angka atau sebaliknya

Ada lebih banyak kemungkinan di mana TypeError dapat terjadi. Kita akan melihat beberapa contoh terkenal nanti dan mempelajari cara memperbaikinya

Kesalahan internal

Jenis InternalError digunakan saat pengecualian terjadi di mesin runtime JavaScript. Ini mungkin atau mungkin tidak menunjukkan masalah dengan kode Anda

Lebih sering daripada tidak, InternalError hanya terjadi dalam dua skenario

• Saat tambalan atau pembaruan runtime JavaScript membawa bug yang melontarkan pengecualian (ini sangat jarang terjadi)
• Saat kode Anda berisi entitas yang terlalu besar untuk mesin JavaScript (mis. g. terlalu banyak sakelar, inisialisasi array terlalu besar, terlalu banyak rekursi)

Pendekatan yang paling tepat untuk mengatasi kesalahan ini adalah mengidentifikasi penyebabnya melalui pesan kesalahan dan menyusun ulang logika aplikasi Anda, jika memungkinkan, untuk menghilangkan lonjakan beban kerja yang tiba-tiba pada mesin JavaScript

Kesalahan URI

URIError terjadi ketika fungsi penanganan URI global seperti

throw 8
throw "An error occurred"

Mendiagnosis kesalahan ini biasanya mudah karena Anda hanya perlu memeriksa argumen untuk malformasi

EvalError

EvalError terjadi ketika kesalahan terjadi dengan panggilan fungsi

throw 8
throw "An error occurred"

throw 8
throw "An error occurred"

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

Jika Anda mengerjakan JavaScript versi lama, Anda mungkin mengalami kesalahan ini. Bagaimanapun, sebaiknya selidiki kode yang dieksekusi dalam pemanggilan fungsi

throw 8
throw "An error occurred"

Membuat Jenis Kesalahan Khusus

Meskipun JavaScript menawarkan daftar kelas jenis kesalahan yang memadai untuk menutupi sebagian besar skenario, Anda selalu dapat membuat jenis kesalahan baru jika daftar tersebut tidak memenuhi kebutuhan Anda. Fondasi dari fleksibilitas ini terletak pada kenyataan bahwa JavaScript memungkinkan Anda membuang apa pun secara harfiah dengan perintah

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

Jadi, secara teknis, pernyataan ini sepenuhnya legal

throw 8
throw "An error occurred"

Namun, melempar tipe data primitif tidak memberikan detail tentang error, seperti tipe, nama, atau pelacakan tumpukan yang menyertainya. Untuk memperbaikinya dan menstandarkan proses penanganan kesalahan, kelas

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

Anda dapat memperluas kelas

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

Dan Anda dapat menggunakannya dengan cara berikut

throw ValidationError("Property not found: name")

Dan Anda kemudian dapat mengidentifikasinya menggunakan kata kunci

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

try {
    validateForm() // code that throws a ValidationError
} catch (e) {
    if (e instanceof ValidationError)
    // do something
    else
    // do something else
}

10 Kesalahan Paling Umum di JavaScript

Sekarang setelah Anda memahami jenis kesalahan umum dan cara membuat kesalahan khusus, saatnya untuk melihat beberapa kesalahan paling umum yang akan Anda hadapi saat menulis kode JavaScript

Lihat Panduan Video Kami untuk Kesalahan JavaScript yang Paling Umum

1. RangeError yang tidak tertangkap

Kesalahan ini terjadi di Google Chrome dalam beberapa skenario berbeda. Pertama, ini bisa terjadi jika Anda memanggil fungsi rekursif dan tidak berhenti. Anda dapat memeriksanya sendiri di Konsol Pengembang Chrome

Jadi untuk mengatasi kesalahan seperti itu, pastikan untuk menentukan kasus perbatasan dari fungsi rekursif Anda dengan benar. Alasan lain mengapa kesalahan ini terjadi adalah jika Anda telah memberikan nilai yang berada di luar jangkauan parameter fungsi. Ini sebuah contoh

Pesan kesalahan biasanya menunjukkan apa yang salah dengan kode Anda. Setelah Anda membuat perubahan, itu akan diselesaikan

2. TypeError yang tidak tertangkap. Tidak dapat menyetel properti

Kesalahan ini terjadi saat Anda menyetel properti pada referensi yang tidak ditentukan. Anda dapat mereproduksi masalah dengan kode ini

var list
list.count = 0

Inilah output yang akan Anda terima

Untuk memperbaiki kesalahan ini, inisialisasi referensi dengan nilai sebelum mengakses propertinya. Begini tampilannya saat diperbaiki

3. TypeError yang tidak tertangkap. Tidak dapat membaca properti

Ini adalah salah satu kesalahan yang paling sering terjadi di JavaScript. Kesalahan ini terjadi saat Anda mencoba membaca properti atau memanggil fungsi pada objek yang tidak ditentukan. Anda dapat memperbanyaknya dengan sangat mudah dengan menjalankan kode berikut di konsol Pengembang Chrome

var func
func.call()

Inilah hasilnya

Objek yang tidak terdefinisi adalah salah satu dari banyak kemungkinan penyebab kesalahan ini. Penyebab menonjol lainnya dari masalah ini dapat berupa inisialisasi status yang tidak tepat saat merender UI. Ini adalah contoh dunia nyata dari aplikasi React

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                <li key={item}>{item}</li>
            ))}
        </>
    );
};

export default CardsList;

Aplikasi dimulai dengan wadah status kosong dan dilengkapi dengan beberapa item setelah penundaan 2 detik. Penundaan diberlakukan untuk meniru panggilan jaringan. Bahkan jika jaringan Anda super cepat, Anda masih akan menghadapi penundaan kecil karena komponen akan dirender setidaknya sekali. Jika Anda mencoba menjalankan aplikasi ini, Anda akan menerima kesalahan berikut

Ini karena, pada saat rendering, wadah status tidak ditentukan; . Memperbaiki kesalahan ini mudah. Anda hanya perlu memberikan nilai default awal ke wadah negara

throw wrongTypeError

Sekarang, setelah penundaan yang ditetapkan, aplikasi Anda akan menampilkan keluaran yang serupa

Perbaikan yang tepat dalam kode Anda mungkin berbeda, tetapi intinya di sini adalah untuk selalu menginisialisasi variabel Anda dengan benar sebelum menggunakannya

4. TypeError. 'undefined' bukan objek

Kesalahan ini terjadi di Safari saat Anda mencoba mengakses properti atau memanggil metode pada objek yang tidak ditentukan. Anda dapat menjalankan kode yang sama dari atas untuk mereproduksi sendiri kesalahan tersebut

Solusi untuk kesalahan ini juga sama — pastikan Anda telah menginisialisasi variabel Anda dengan benar dan tidak terdefinisi saat properti atau metode diakses

5. TypeError. null bukan objek

Ini, sekali lagi, mirip dengan kesalahan sebelumnya. Itu terjadi di Safari, dan satu-satunya perbedaan antara dua kesalahan adalah kesalahan ini terjadi ketika objek yang properti atau metodenya sedang diakses adalah

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

throw ValidationError("Property not found: name")

throw wrongTypeError

Inilah output yang akan Anda terima

Karena

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

6. TypeError. Tidak dapat membaca properti 'panjang'

Kesalahan ini terjadi di Chrome saat Anda mencoba membaca panjang objek

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

throw ValidationError("Property not found: name")

Namun, di versi Chrome yang lebih baru, kesalahan ini dilaporkan sebagai

throw ValidationError("Property not found: name")

Perbaikannya, sekali lagi, adalah memastikan bahwa objek yang panjangnya ingin Anda akses ada dan tidak disetel ke

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

7. TypeError. 'tidak terdefinisi' bukan fungsi

Kesalahan ini terjadi saat Anda mencoba memanggil metode yang tidak ada dalam skrip Anda, atau ada tetapi tidak dapat dirujuk dalam konteks pemanggilan. Kesalahan ini biasanya terjadi di Google Chrome, dan Anda dapat mengatasinya dengan memeriksa baris kode yang menampilkan kesalahan tersebut. Jika Anda menemukan kesalahan ketik, perbaiki dan periksa apakah itu menyelesaikan masalah Anda

Jika Anda telah menggunakan kata kunci referensi mandiri

throw ValidationError("Property not found: name")

throw ValidationError("Property not found: name")

throw wrongTypeError

Jika Anda mengeksekusi kode di atas, itu akan membuang kesalahan yang telah kita bahas. Itu terjadi karena fungsi anonim diteruskan sebagai pendengar acara dieksekusi dalam konteks

throw ValidationError("Property not found: name")

Sebaliknya, fungsi

try {
    validateForm() // code that throws a ValidationError
} catch (e) {
    if (e instanceof ValidationError)
    // do something
    else
    // do something else
}

try {
    validateForm() // code that throws a ValidationError
} catch (e) {
    if (e instanceof ValidationError)
    // do something
    else
    // do something else
}

Untuk mengatasi ini, Anda harus meneruskan referensi yang tepat ke fungsi dengan mengikatnya dengan metode

try {
    validateForm() // code that throws a ValidationError
} catch (e) {
    if (e instanceof ValidationError)
    // do something
    else
    // do something else
}

Terapkan aplikasi Anda ke Kinsta - Mulai dengan Kredit $20 sekarang

Jalankan Node Anda. Aplikasi js, Python, Go, PHP, Ruby, Java, dan Scala, (atau hampir apa pun jika Anda menggunakan Dockerfile kustom Anda sendiri), dalam tiga langkah mudah

throw wrongTypeError

8. ReferensiKesalahan. peristiwa tidak ditentukan

Galat ini terjadi saat Anda mencoba mengakses referensi yang tidak ditentukan dalam lingkup panggilan. Hal ini biasanya terjadi saat menangani peristiwa karena sering memberi Anda referensi yang disebut

try {
    validateForm() // code that throws a ValidationError
} catch (e) {
    if (e instanceof ValidationError)
    // do something
    else
    // do something else
}

Kesalahan ini mungkin tidak terjadi di Internet Explorer atau Google Chrome (karena IE menawarkan variabel kejadian global dan Chrome melampirkan variabel kejadian secara otomatis ke penangan), tetapi kesalahan ini dapat terjadi di Firefox. Jadi disarankan untuk mengawasi kesalahan kecil seperti itu

9. TypeError. Penugasan ke variabel konstan

Ini adalah kesalahan yang muncul karena kecerobohan. Jika Anda mencoba menetapkan nilai baru ke variabel konstanta, Anda akan mendapatkan hasil seperti itu

Meskipun tampaknya mudah untuk diperbaiki sekarang, bayangkan ratusan deklarasi variabel seperti itu dan salah satunya salah didefinisikan sebagai

try {
    validateForm() // code that throws a ValidationError
} catch (e) {
    if (e instanceof ValidationError)
    // do something
    else
    // do something else
}

try {
    validateForm() // code that throws a ValidationError
} catch (e) {
    if (e instanceof ValidationError)
    // do something
    else
    // do something else
}

10. (tidak dikenal). Kesalahan skrip

Kesalahan skrip terjadi saat skrip pihak ketiga mengirimkan kesalahan ke browser Anda. Kesalahan ini diikuti oleh (tidak diketahui) karena skrip pihak ketiga milik domain yang berbeda dari aplikasi Anda. Peramban menyembunyikan detail lain untuk mencegah bocornya informasi sensitif dari skrip pihak ketiga

Anda tidak dapat mengatasi kesalahan ini tanpa mengetahui detail lengkapnya. Inilah yang dapat Anda lakukan untuk mendapatkan informasi lebih lanjut tentang kesalahan tersebut

1. Tambahkan atribut

   try {
       validateForm() // code that throws a ValidationError
   } catch (e) {
       if (e instanceof ValidationError)
       // do something
       else
       // do something else
   }

   _6 di tag skrip
2. Tetapkan tajuk

   try {
       validateForm() // code that throws a ValidationError
   } catch (e) {
       if (e instanceof ValidationError)
       // do something
       else
       // do something else
   }

   _7 yang benar di server yang menghosting skrip
3. [Opsional] Jika Anda tidak memiliki akses ke server yang menghosting skrip, Anda dapat mempertimbangkan untuk menggunakan proxy untuk menyampaikan permintaan Anda ke server dan kembali ke klien dengan header yang benar

Setelah Anda dapat mengakses detail kesalahan, Anda kemudian dapat mengatur untuk memperbaiki masalah, yang mungkin terjadi pada pustaka pihak ketiga atau jaringan.

Cara Mengidentifikasi dan Mencegah Kesalahan dalam JavaScript

Meskipun kesalahan yang dibahas di atas adalah yang paling umum dan sering terjadi di JavaScript, Anda akan menemukan, mengandalkan beberapa contoh saja tidak akan pernah cukup. Sangat penting untuk memahami cara mendeteksi dan mencegah segala jenis kesalahan dalam aplikasi JavaScript saat mengembangkannya. Inilah cara Anda menangani kesalahan dalam JavaScript

Lempar dan Tangkap Kesalahan Secara Manual

Cara paling mendasar untuk menangani kesalahan yang telah dilemparkan baik secara manual atau saat runtime adalah dengan menangkapnya. Seperti kebanyakan bahasa lain, JavaScript menawarkan sekumpulan kata kunci untuk menangani kesalahan. Sangat penting untuk mengetahui masing-masing secara mendalam sebelum Anda mengatur untuk menangani kesalahan dalam aplikasi JavaScript Anda

melemparkan

Kata kunci pertama dan paling dasar dari kumpulan ini adalah

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

• Anda dapat

  class ValidationError extends Error {
      constructor(message) {
          super(message);
          this.name = "ValidationError";
      }
  }

  4 apa saja, termasuk angka, string, dan

  class ValidationError extends Error {
      constructor(message) {
          super(message);
          this.name = "ValidationError";
      }
  }

  5 objek
• Namun, tidak disarankan untuk membuang tipe data primitif seperti string dan angka karena tidak membawa informasi debug tentang kesalahan
• Contoh.

  var list
  list.count = 0

  1

mencoba

Kata kunci

var list
list.count = 0

throw wrongTypeError

Penting untuk diperhatikan bahwa blok

var list
list.count = 0

var list
list.count = 0

menangkap

Kata kunci

var list
list.count = 0

var list
list.count = 0

throw wrongTypeError

Dan ini adalah bagaimana Anda mengimplementasikan

var list
list.count = 0

var list
list.count = 0

throw wrongTypeError

Tidak seperti C++ atau Java, Anda tidak dapat menambahkan beberapa blok

var list
list.count = 0

var list
list.count = 0

throw wrongTypeError

Sebagai gantinya, Anda dapat menggunakan pernyataan

var func
func.call()

throw wrongTypeError

akhirnya

Kata kunci

var func
func.call()

Juga, blok terakhir akan dieksekusi terlepas dari hasil dari dua blok lainnya. Ini berarti bahwa bahkan jika blok tangkapan tidak dapat menangani kesalahan seluruhnya atau kesalahan dilemparkan ke dalam blok tangkap, juru bahasa akan mengeksekusi kode di blok akhirnya sebelum program macet

Agar dianggap valid, blok coba dalam JavaScript harus diikuti dengan blok tangkapan atau blok terakhir. Tanpa semua itu, juru bahasa akan memunculkan SyntaxError. Oleh karena itu, pastikan untuk mengikuti blok percobaan Anda dengan setidaknya salah satu dari mereka saat menangani kesalahan

Tangani Kesalahan Secara Global Dengan Metode onerror()

Metode

var func
func.call()

var func
func.call()

Biasanya, Anda akan memberikan URL gambar lain dalam panggilan onerror untuk

var func
func.call()

throw wrongTypeError

Namun, Anda bisa menggunakan fitur ini untuk membuat mekanisme penanganan kesalahan global untuk aplikasi Anda. Inilah cara Anda melakukannya

throw TypeError("Wrong type found, expected character")

Dengan penangan kejadian ini, Anda dapat menyingkirkan beberapa blok

var func
func.call()

Lewati Kesalahan melalui Panggilan Balik

Meskipun fungsi sederhana dan linier memungkinkan penanganan kesalahan tetap sederhana, callback dapat memperumit masalah

Butuh solusi hosting yang memberi Anda keunggulan kompetitif? . Lihat rencana kami

Pertimbangkan potongan kode berikut

throw TypeError("Wrong type found, expected character")

Fungsi di atas menunjukkan kondisi asinkron di mana suatu fungsi membutuhkan waktu untuk memproses operasi dan mengembalikan hasilnya nanti dengan bantuan callback

Jika Anda mencoba memasukkan string alih-alih 4 dalam pemanggilan fungsi, Anda akan mendapatkan

var func
func.call()

Ini perlu ditangani dengan baik. Begini caranya

throw TypeError("Wrong type found, expected character")

Ini harus menyelesaikan masalah secara ideal. Namun, jika Anda mencoba meneruskan string ke pemanggilan fungsi, Anda akan menerima ini

Meskipun Anda telah mengimplementasikan blok try-catch saat memanggil fungsi tersebut, masih dikatakan bahwa kesalahannya tidak tertangkap. Kesalahan dilemparkan setelah blok tangkap dieksekusi karena penundaan waktu habis

Ini dapat terjadi dengan cepat dalam panggilan jaringan, di mana penundaan yang tidak terduga terjadi. Anda perlu membahas kasus seperti itu saat mengembangkan aplikasi Anda

Inilah cara Anda menangani kesalahan dengan benar dalam panggilan balik

throw TypeError("Wrong type found, expected character")

Sekarang, output di konsol akan menjadi

Ini menunjukkan bahwa kesalahan telah ditangani dengan tepat

Tangani Kesalahan dalam Janji

Kebanyakan orang cenderung lebih suka janji untuk menangani aktivitas asinkron. Janji memiliki keuntungan lain — janji yang ditolak tidak menghentikan skrip Anda. Namun, Anda masih perlu mengimplementasikan catch block untuk menangani error pada promise. Untuk memahami ini dengan lebih baik, mari kita tulis ulang fungsi

var func
func.call()

throw TypeError("Wrong type found, expected character")

Batas waktu dari kode sebelumnya telah diisolasi ke dalam fungsi

var func
func.call()

Sekali lagi, ini disebabkan oleh

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                <li key={item}>{item}</li>
            ))}
        </>
    );
};

export default CardsList;

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                <li key={item}>{item}</li>
            ))}
        </>
    );
};

export default CardsList;

throw TypeError("Wrong type found, expected character")

Sekarang hasilnya akan

Anda dapat mengamati betapa mudahnya menangani kesalahan dengan janji. Selain itu, Anda dapat merangkai blok

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                <li key={item}>{item}</li>
            ))}
        </>
    );
};

export default CardsList;

Atau, Anda juga dapat menangani kesalahan dalam janji menggunakan teknik try-catch-finally tradisional. Beginilah tampilan panggilan janji Anda dalam kasus itu

throw TypeError("Wrong type found, expected character")

Namun, ini hanya berfungsi di dalam fungsi asinkron. Oleh karena itu cara yang paling disukai untuk menangani kesalahan dalam promise adalah dengan menghubungkan

var list
list.count = 0

var func
func.call()

lempar/tangkap vs onerror() vs Callback vs Janji. Mana yang Terbaik?

Dengan empat metode yang Anda inginkan, Anda harus tahu cara memilih yang paling tepat dalam setiap kasus penggunaan tertentu. Inilah cara Anda dapat memutuskan sendiri

melempar/menangkap

Anda akan sering menggunakan metode ini. Pastikan untuk menerapkan kondisi untuk semua kesalahan yang mungkin terjadi di dalam blok tangkapan Anda, dan ingatlah untuk menyertakan blok terakhir jika Anda perlu menjalankan beberapa rutinitas pembersihan memori setelah blok percobaan

Namun, terlalu banyak blok coba/tangkap dapat membuat kode Anda sulit dipertahankan. Jika Anda menemukan diri Anda dalam situasi seperti itu, Anda mungkin ingin menangani kesalahan melalui penangan global atau metode janji

Saat memutuskan antara blok coba/tangkap asinkron dan janji

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                <li key={item}>{item}</li>
            ))}
        </>
    );
};

export default CardsList;

onerror()

Sebaiknya gunakan metode

var func
func.call()

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                <li key={item}>{item}</li>
            ))}
        </>
    );
};

export default CardsList;

Namun, Anda juga harus ingat bahwa metode

var func
func.call()

Callback dan Janji

Penanganan kesalahan dalam panggilan balik dan janji berbeda karena desain dan struktur kodenya. Namun, jika Anda memilih di antara keduanya sebelum Anda menulis kode Anda, akan lebih baik untuk menggunakan janji

Ini karena promise memiliki konstruk bawaan untuk merantai blok

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                <li key={item}>{item}</li>
            ))}
        </>
    );
};

export default CardsList;

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                <li key={item}>{item}</li>
            ))}
        </>
    );
};

export default CardsList;

Lacak Perubahan Dengan Repositori Git

Banyak error yang sering muncul akibat kesalahan manual pada codebase. Saat mengembangkan atau men-debug kode Anda, Anda mungkin akhirnya membuat perubahan yang tidak perlu yang dapat menyebabkan kesalahan baru muncul di basis kode Anda. Pengujian otomatis adalah cara yang bagus untuk menjaga kode Anda tetap terkendali setelah setiap perubahan. Namun, itu hanya dapat memberi tahu Anda jika ada sesuatu yang salah. Jika Anda tidak sering membuat cadangan kode, Anda akan membuang waktu untuk mencoba memperbaiki fungsi atau skrip yang berfungsi dengan baik sebelumnya

Di sinilah git memainkan perannya. Dengan strategi komit yang tepat, Anda dapat menggunakan riwayat git Anda sebagai sistem cadangan untuk melihat kode Anda saat berevolusi melalui pengembangan. Anda dapat dengan mudah menelusuri komit lama Anda dan mengetahui versi fungsi yang berfungsi dengan baik sebelumnya, tetapi melemparkan kesalahan setelah perubahan yang tidak terkait

Anda kemudian dapat memulihkan kode lama atau membandingkan kedua versi untuk menentukan apa yang salah. Alat pengembangan web modern seperti GitHub Desktop atau GitKraken membantu Anda memvisualisasikan perubahan ini secara berdampingan dan mengetahui kesalahannya dengan cepat

Kebiasaan yang dapat membantu Anda mengurangi kesalahan adalah menjalankan peninjauan kode setiap kali Anda membuat perubahan signifikan pada kode. Jika Anda bekerja dalam tim, Anda dapat membuat pull request dan meminta anggota tim meninjaunya secara menyeluruh. Ini akan membantu Anda menggunakan sepasang mata kedua untuk menemukan kesalahan yang mungkin terlewatkan oleh Anda

Praktik Terbaik untuk Menangani Kesalahan dalam JavaScript

Metode yang disebutkan di atas cukup untuk membantu Anda merancang pendekatan penanganan kesalahan yang kuat untuk aplikasi JavaScript berikutnya. Namun, akan lebih baik untuk mengingat beberapa hal saat menerapkannya untuk mendapatkan yang terbaik dari pemeriksaan kesalahan Anda. Berikut adalah beberapa tips untuk membantu Anda

1. Gunakan Kesalahan Kustom Saat Menangani Pengecualian Operasional

Kami memperkenalkan kesalahan khusus di awal panduan ini untuk memberi Anda gambaran tentang cara menyesuaikan penanganan kesalahan untuk kasus unik aplikasi Anda. Dianjurkan untuk menggunakan kesalahan kustom sedapat mungkin daripada kelas

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

Selain itu, kesalahan khusus memungkinkan Anda memoderasi bagaimana kesalahan ditampilkan ke lingkungan panggilan. Ini berarti Anda dapat memilih untuk menyembunyikan detail tertentu atau menampilkan informasi tambahan tentang kesalahan sesuai keinginan Anda

Anda dapat memformat konten kesalahan sesuai dengan kebutuhan Anda. Ini memberi Anda kontrol yang lebih baik atas bagaimana kesalahan ditafsirkan dan ditangani

2. Jangan Menelan Pengecualian Apa Pun

Bahkan pengembang paling senior pun sering membuat kesalahan pemula — mengonsumsi tingkat pengecualian jauh di dalam kode mereka

Anda mungkin menemukan situasi di mana Anda memiliki kode yang opsional untuk dijalankan. Jika berhasil, bagus;

Dalam kasus ini, sering tergoda untuk meletakkan kode ini di blok try dan melampirkan blok catch kosong ke dalamnya. Namun, dengan melakukan ini, Anda akan membiarkan potongan kode itu terbuka untuk menyebabkan kesalahan apa pun dan lolos begitu saja. Ini bisa menjadi berbahaya jika Anda memiliki basis kode yang besar dan banyak contoh konstruksi manajemen kesalahan yang buruk

Cara terbaik untuk menangani pengecualian adalah dengan menentukan level di mana semuanya akan ditangani dan menaikkannya sampai di sana. Level ini dapat berupa pengontrol (dalam aplikasi arsitektur MVC) atau middleware (dalam aplikasi berorientasi server tradisional)

Dengan cara ini, Anda akan mengetahui di mana Anda dapat menemukan semua kesalahan yang terjadi di aplikasi Anda dan memilih cara mengatasinya, bahkan jika itu berarti tidak melakukan apa-apa.

3. Gunakan Strategi Terpusat untuk Log dan Peringatan Kesalahan

Mencatat kesalahan seringkali merupakan bagian integral dari penanganannya. Mereka yang gagal mengembangkan strategi terpusat untuk mencatat kesalahan mungkin kehilangan informasi berharga tentang penggunaan aplikasi mereka

Log peristiwa aplikasi dapat membantu Anda menemukan data penting tentang kesalahan dan membantu men-debugnya dengan cepat. Jika Anda memiliki mekanisme peringatan yang tepat yang disiapkan di aplikasi Anda, Anda dapat mengetahui kapan kesalahan terjadi di aplikasi Anda sebelum mencapai sebagian besar basis pengguna Anda

Dianjurkan untuk menggunakan logger yang sudah dibuat sebelumnya atau membuatnya sesuai dengan kebutuhan Anda. Anda dapat mengonfigurasi logger ini untuk menangani kesalahan berdasarkan levelnya (peringatan, debug, info, dll. ), dan beberapa logger bahkan mengirimkan log ke server logging jarak jauh dengan segera. Dengan cara ini, Anda dapat melihat bagaimana logika aplikasi Anda bekerja dengan pengguna aktif

4. Beri tahu Pengguna Tentang Kesalahan dengan Tepat

Poin bagus lainnya yang perlu diingat saat menentukan strategi penanganan kesalahan Anda adalah mengingat pengguna

Semua kesalahan yang mengganggu fungsi normal aplikasi Anda harus memberikan peringatan yang terlihat kepada pengguna untuk memberi tahu mereka bahwa ada yang tidak beres sehingga pengguna dapat mencoba mencari solusi. Jika Anda mengetahui perbaikan cepat untuk kesalahan tersebut, seperti mencoba kembali operasi atau keluar dan masuk kembali, pastikan untuk menyebutkannya dalam peringatan untuk membantu memperbaiki pengalaman pengguna secara real-time

Dalam kasus kesalahan yang tidak menyebabkan gangguan apa pun pada pengalaman pengguna sehari-hari, Anda dapat mempertimbangkan untuk menekan peringatan dan mencatat kesalahan ke server jarak jauh untuk diselesaikan nanti.

5. Menerapkan Middleware (Node. js)

Node. Lingkungan js mendukung middlewares untuk menambahkan fungsionalitas ke aplikasi server. Anda dapat menggunakan fitur ini untuk membuat middleware penanganan kesalahan untuk server Anda

Manfaat paling signifikan menggunakan middleware adalah semua kesalahan Anda ditangani secara terpusat di satu tempat. Anda dapat memilih untuk mengaktifkan/menonaktifkan pengaturan ini untuk tujuan pengujian dengan mudah

Inilah cara Anda dapat membuat middleware dasar

throw TypeError("Wrong type found, expected character")

Anda kemudian dapat menggunakan middleware ini di aplikasi Anda seperti ini

throw TypeError("Wrong type found, expected character")

Anda sekarang dapat menentukan logika khusus di dalam middleware untuk menangani kesalahan dengan tepat. Anda tidak perlu lagi khawatir tentang penerapan konstruksi penanganan kesalahan individu di seluruh basis kode Anda

6. Mulai Ulang Aplikasi Anda Untuk Menangani Kesalahan Pemrogram (Node. js)

Ketika Node. Aplikasi js mengalami kesalahan pemrogram, mereka mungkin tidak serta merta memberikan pengecualian dan mencoba menutup aplikasi. Kesalahan tersebut dapat mencakup masalah yang timbul dari kesalahan pemrogram, seperti konsumsi CPU yang tinggi, pembengkakan memori, atau kebocoran memori. Cara terbaik untuk menangani ini adalah dengan memulai ulang aplikasi dengan baik dengan menabraknya melalui Node. mode klaster js atau alat unik seperti PM2. Ini dapat memastikan bahwa aplikasi tidak mogok saat tindakan pengguna, menghadirkan pengalaman pengguna yang buruk

7. Tangkap Semua Pengecualian yang Tidak Tertangkap (Node. js)

Anda tidak akan pernah yakin bahwa Anda telah menutupi setiap kemungkinan kesalahan yang dapat terjadi di aplikasi Anda. Oleh karena itu, penting untuk menerapkan strategi fallback untuk menangkap semua pengecualian yang tidak tertangkap dari aplikasi Anda

Inilah cara Anda dapat melakukannya

throw TypeError("Wrong type found, expected character")

Anda juga dapat mengidentifikasi apakah kesalahan yang terjadi merupakan pengecualian standar atau kesalahan operasional kustom. Berdasarkan hasil, Anda dapat keluar dari proses dan memulai ulang untuk menghindari perilaku yang tidak diharapkan

8. Tangkap Semua Penolakan Janji yang Tidak Tertangani (Node. js)

Mirip dengan bagaimana Anda tidak akan pernah bisa menutupi semua kemungkinan pengecualian, ada kemungkinan besar Anda akan kehilangan penanganan semua kemungkinan penolakan janji. Namun, tidak seperti pengecualian, penolakan janji tidak menimbulkan kesalahan

Jadi, janji penting yang ditolak mungkin berlalu begitu saja sebagai peringatan dan membiarkan aplikasi Anda terbuka terhadap kemungkinan mengalami perilaku yang tidak diharapkan. Oleh karena itu, sangat penting untuk menerapkan mekanisme fallback untuk menangani penolakan janji

Inilah cara Anda dapat melakukannya

throw 8
throw "An error occurred"

Ringkasan

Seperti bahasa pemrograman lainnya, kesalahan cukup sering dan alami dalam JavaScript. Dalam beberapa kasus, Anda bahkan mungkin perlu melempar kesalahan dengan sengaja untuk menunjukkan respons yang benar kepada pengguna Anda. Oleh karena itu, memahami anatomi dan tipe mereka sangat penting

Selain itu, Anda perlu dilengkapi dengan alat dan teknik yang tepat untuk mengidentifikasi dan mencegah kesalahan menghapus aplikasi Anda

Dalam kebanyakan kasus, strategi yang solid untuk menangani error dengan eksekusi yang hati-hati sudah cukup untuk semua jenis aplikasi JavaScript

Apakah ada kesalahan JavaScript lain yang masih belum bisa Anda atasi?

Dapatkan semua aplikasi, database, dan situs WordPress Anda secara online dan dalam satu atap. Platform cloud kami yang penuh fitur dan berkinerja tinggi mencakup

• Pengaturan dan pengelolaan yang mudah di dasbor MyKinsta
• Dukungan pakar 24/7
• Perangkat keras dan jaringan Google Cloud Platform terbaik, didukung oleh Kubernetes untuk skalabilitas maksimum
• Integrasi Cloudflare tingkat perusahaan untuk kecepatan dan keamanan
• Jangkauan audiens global dengan hingga 35 pusat data dan 275+ PoP di seluruh dunia

Uji sendiri dengan diskon $20 untuk bulan pertama Hosting Aplikasi atau Hosting Basis Data. Jelajahi paket kami atau hubungi bagian penjualan untuk menemukan yang paling cocok untuk Anda

Bagaimana cara menangani kesalahan yang tidak ditentukan dalam JavaScript?

Apa artinya ketika ada sesuatu yang tidak didefinisikan dalam JavaScript?

Apa itu tangkapan () dalam JavaScript?

Bagaimana cara menangkap kesalahan sintaksis dalam JavaScript?