Uncaught ReferenceError: Backbone is not defined (Post Mortem)
Uncaught ReferenceError: Backbone is not defined (Post Mortem) — Beberapa jam yang lalu, penulis menyadari bahwa ketika mengakses web NginY terasa sangat lambat. Namun ketika menggunakan website speed test pingdom, hanya membutuhkan waktu 2 detik untuk load front page.
Menyadari hal tersebut penulis mencoba untuk mengecheck developer console dengan menekan F12 di browser dan terdapat error Uncaught ReferenceError: Backbone dan Uncaught ReferenceError: _ is not defined. Lalu penulis mencoba mengakses NginY dari incognito mode, dan tidak mendapat error apapun.
Uncaught ReferenceError: Backbone is not defined
Mengapa hal tersebut dapat terjadi ?
Setelah melihat error tersebut, penulis mencari masalah tersebut di google, semua solusi mengarah kepada plugin wordpress yang konflik. Penulis pun mencoba untuk melakukan uninstall semua plugin dan mengecek apakah error Uncaught ReferenceError: Backbone masih ada.
Lalu penulis mengetahui bahwa plugin jetpack jika diuninstall akan menghilangkan error tersebut. Namun penulis belum mengetahui plugin ini konflik dengan plugin yang mana, maka dari itu penulis kembali melakukan uninstall plugin yang lain dan ternyata error hanya pada plugin ini.
Penulis tidak ingin meng-uninstall plugin ini karena banyak keperluan yang dipakai sebagai contoh email subscriptions, related post, image optimization, markup language, dan lain lain
Penulis mengetahui bahwa plugin ini meng-include javascript backbone dengan cara seperti ini
<script src="https://nginy.net/wp-includes/js/backbone.min.js?ver=1.2.3" type="text/javascript"></script>
dan ketika https://nginy.net/wp-includes/js/backbone.min.js?ver=1.2.3 di akses akan menyebabkan error 502 dari cloudfllare.
Uncaught ReferenceError Backbone is not defined — Error 502 Cloud Flare
Namun, anehnya ketika ketika penulis mengecek cpanel di folder wp-include, file backbone.min.js sudah di include namun entah kenapa tidak bisa di akses oleh cloudflare.
Uncaught ReferenceError Backbone is not defined — Backbone.min.js is exist
Dan jika penulis menghilangkan query string ?ver=1.2.3 menjadi
<script src="https://nginy.net/wp-includes/js/backbone.min.js" type="text/javascript"></script>
Cloudflare tidak mengirimkan error 502 dan meload backbone.min.js dengan cepat.
Uncaught ReferenceError Backbone is not defined — Backbone.min.js is exist
Bagaimana cara mengatasi error tersebut ?
Dari sini dapat kita simpulkan bahwa query string pada backbone.min.js menyebabkan error pada cloudflare. Penulis pun mencari di google bagaimana menghilangkan query string ketika memasukkan js dan menemukan plugin Remove Query Strings From Static Resources. Plugin ini akan menghilangkan semua query string yang berasal dari static asset.
Good read: CARA RENDER PAGE WORDPRESS DALAM STATIC FILE
Cara installnya pun sangat mudah, hanya menekan tombol install dan plugin ini akan me-remove semua query string dari static asset. Dan developer console pun bersih dari error tersebut.
Uncaught ReferenceError Backbone is not defined — Clean console log
Kesimpulan
NginY menjadi lambat ketika diakses oleh user yang sudah login. Hal ini disebabkan karena request file javascript backbone.min.js ke cloudflare menyebabkan error 502 yang disebabkan oleh query string ?ver=1.2.3. Cara mengatasinya cukup menghilangkan query string pada static asset tersebut dengan install plugin Remove Query Strings From Static Resources. Query string pada website sebenarnya adalah salah satu point penilaian dari pingdom, gtmetrix, atau google page speed. Jadi tak ada salahnya menggunakan plugin ini untuk kedepannya.
Sekian post hari ini, mungkin kalian mengalami hal yang sama namun dengan penyebab yang berbeda karena banyak faktor yang menyebabkan error. Tetap semangat, selamat menjalankan aktivitas, terima kasih.
The way to succeed is to double your error rate — Thomas J. Watson, Sr.
Originally published at nginy.net on October 15, 2017.
