Pada artikel kali ini, kita akan membahas panduan pemecahan masalah untuk kesalahan SyntaxError: Unexpected token < in JSON at position 0 errors.
Kesalahan unexpected token ‘a’ an error o… is not valid json, adalah sebuah error yang menunjukkan bahwa permintaan HTTP untuk respons JSON, tetapi tidak dapat menerima atau menemukan data JSON. Pendekatan pencatatan bergantung pada apakah kode JavaScript menggunakan fetch() atau JSON.parse().
Pada error tersebut terdapat beberapa varian umum yang muncul seperti :
SyntaxError artinya String tidak sesuai dengan pola yang diharapkan
SyntaxError: JSON.parse: karakter tak terduga pada baris 1 kolom 1 data JSON Kesalahan Penguraian JSON: Token ‘<‘ tidak dikenal
Untuk penyebab munculnya error ini adalah :
- Masalah respons file JSON
- Parser JSON memunculkan kesalahan saat mendeteksi respons yang tidak valid.
- URL permintaan salah Header Content-Type tidak disetel ke application/json
- Masalah penetapan variabel atau penyandian karakter
- Kesalahan sisi server JSON tidak terbentuk dengan benar
- Dalam banyak kasus, respons yang tidak diharapkan adalah HTML yang berisi detail kesalahan sisi server.
Cara memperbaiki error unexpected token ‘a’ an error o… is not valid json :
Dengan log data kesalahan dan respons ke konsol untuk menyelidiki mengapa JSON yang valid tidak diterima. Cara data dicatat bergantung pada apakah kode tersebut menggunakan fetch() atau JSON.parse().
Berikut adalah solusi perbaikan yang bisa Anda lakukan, namun sebelum itu, sebaiknya Anda memahami dulu respon apa yang ditampilkan.
- Respons berupa HTML dengan kode status 500: Periksa log kesalahan server untuk kesalahan sisi server.
- Respons berupa HTML dengan kode status 404: Periksa apakah URL yang diteruskan ke fetch() sudah benar.
- Respons kosong atau berisi serangkaian karakter yang tidak biasa: Periksa penugasan variabel dan penyandian karakter.
Mencatat data respons dari fetch()
Fungsi fetch() JavaScript mungkin terlihat mirip dengan berikut :
Kesalahan terjadi saat response.json() dipanggil dan data tidak dapat diurai menjadi JSON. Misalnya, responsnya mungkin berupa HTML. Cetak data ke konsol dengan membuat tiruan respons dan menambahkan fungsi untuk menangani kesalahan:
Objek respons hanya dapat dibaca satu kali. Oleh karena itu, kami ingin membuat tiruannya untuk dicetak ke konsol sebelum respons asli dibaca pada Baris 5. Pada Baris 9, kami menambahkan fungsi penanganan kesalahan. Jika response.json() gagal, fungsi ini dipanggil dan mencatat kesalahan serta data responseClone ke konsol untuk pemeriksaan lebih lanjut.
Log data respons dari JSON.parse()
Jika kode menggunakan JSON.parse(data), log data respons ke konsol dengan menambahkan pernyataan try…catch untuk menangani kesalahan seperti berikut :
